Created my first plugin - problem deploying to Heroku

mckennapaul27 · May 31, 2022, 12:53pm

System Information

**Strapi Version4.1.12:
**Operating SystemMAC:
**DatabasePOSTGRES:
**Node Version16.13.2:
**NPM Version8.1.2:
**Yarn Version1.22.19:

I have developed my first custom plugin for Strapi.

It is working absolutely perfectly locally.

When I try to deploy to Heroku it keeps failing without providing sufficient information to diagnose the problem.

It is simply remote: error Command failed with exit code 1.

Has anyone else had a similar issue when trying to deploy to heroku with a plugin inside the src/plugins folder?

The build logs are below, I’ve been trying to solve this since last Thursday 26th May.

Any help will be greatly appreciated.

Thanks,
Paul

Enumerating objects: 65, done.
Counting objects: 100% (65/65), done.
Delta compression using up to 4 threads
Compressing objects: 100% (37/37), done.
Writing objects: 100% (45/45), 90.78 KiB | 6.05 MiB/s, done.
Total 45 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        USE_YARN_CACHE=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  16.13.2
remote:        engines.npm (package.json):   8.1.2
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 16.13.2...
remote:        Downloading and installing node 16.13.2...
remote:        npm 8.1.2 already installed with node
remote:        Resolving yarn version 1.22.x...
remote:        Downloading and installing yarn (1.22.18)
remote:        Installed yarn 1.22.18
remote:        
remote: -----> Restoring cache
remote:        - yarn cache
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.22.18
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        [3/4] Linking dependencies...
remote:        warning "@strapi/plugin-graphql > apollo-server-koa@3.1.2" has unmet peer dependency "koa@2.13.1".
remote:        warning "@strapi/plugin-graphql > graphql-iso-date@3.6.1" has incorrect peer dependency "graphql@^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
remote:        warning "@strapi/plugin-graphql > graphql-playground-middleware-koa@1.6.22" has unmet peer dependency "koa@^2".
remote:        warning "@strapi/plugin-graphql > graphql-type-long@0.1.1" has incorrect peer dependency "graphql@^0.9.1 || ^0.10.0 || ^0.12.0 || ^0.13.0".
remote:        warning "@strapi/plugin-users-permissions > @strapi/helper-plugin@4.1.12" has unmet peer dependency "formik@^2.2.6".
remote:        warning "@strapi/plugin-users-permissions > @strapi/helper-plugin@4.1.12" has unmet peer dependency "immer@9.0.6".
remote:        warning "@strapi/plugin-users-permissions > @strapi/helper-plugin@4.1.12" has unmet peer dependency "qs@6.10.1".
remote:        warning "@strapi/plugin-users-permissions > @strapi/helper-plugin@4.1.12" has unmet peer dependency "react-select@^4.0.2".
remote:        warning "@strapi/plugin-users-permissions > grant-koa@5.4.8" has unmet peer dependency "koa@>=2.0.0".
remote:        warning "@strapi/plugin-users-permissions > react-redux@7.2.3" has unmet peer dependency "redux@^2.0.0 || ^3.0.0 || ^4.0.0-0".
remote:        warning "@strapi/plugin-users-permissions > @strapi/helper-plugin > mini-css-extract-plugin@2.4.4" has unmet peer dependency "webpack@^5.0.0".
remote:        warning "@strapi/plugin-users-permissions > @strapi/helper-plugin > styled-components@5.3.3" has unmet peer dependency "react-is@>= 16.8.0".
remote:        warning "@strapi/strapi > @strapi/admin > @strapi/design-system@1.1.1" has incorrect peer dependency "@strapi/icons@^0.0.1-alpha.73".
remote:        warning "@strapi/strapi > @strapi/admin > react-virtualized@9.22.3" has incorrect peer dependency "react@^15.3.0 || ^16.0.0-alpha".
remote:        warning "@strapi/strapi > @strapi/admin > react-virtualized@9.22.3" has incorrect peer dependency "react-dom@^15.3.0 || ^16.0.0-alpha".
remote:        warning " > strapi-plugin-preview-button@0.3.3" has unmet peer dependency "@strapi/design-system@^1.1.0".
remote:        warning " > strapi-plugin-preview-button@0.3.3" has unmet peer dependency "@strapi/helper-plugin@^4.1.10".
remote:        warning " > strapi-plugin-preview-button@0.3.3" has unmet peer dependency "@strapi/icons@^1.10".
remote:        warning " > strapi-plugin-preview-button@0.3.3" has unmet peer dependency "@strapi/utils@^4.1.10".
remote:        warning "strapi-plugin-preview-button > react-router-dom@6.3.0" has unmet peer dependency "react-dom@>=16.8".
remote:        warning Workspaces can only be enabled in private projects.
remote:        warning Workspaces can only be enabled in private projects.
remote:        [4/4] Building fresh packages...
remote:        Done in 23.97s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.22.18
remote:        $ strapi build
remote:        Building your admin UI with production configuration ...
remote:        ℹ Compiling Webpack
remote: ModuleNotFoundError: Module not found: Error: Can't resolve 'classnames' in '/tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/Wysiwyg'
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/Compilation.js:2011:28
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:795:13
remote:     at eval (eval at create (/tmp/build_a6a357bd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:275:22
remote:     at eval (eval at create (/tmp/build_a6a357bd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:431:22
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:124:11
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:667:25
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:852:8
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:972:5
remote: resolve 'classnames' in '/tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/Wysiwyg'
remote:   Parsed request is a module
remote:   using description file: /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/package.json (relative path: ./admin/src/components/Wysiwyg)
remote:     Field 'browser' doesn't contain a valid alias configuration
remote:     resolve as module
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/Wysiwyg/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/node_modules doesn't exist or is not a directory
remote:       looking for modules in /tmp/build_a6a357bd/node_modules
remote:         single file module
remote:           using description file: /tmp/build_a6a357bd/package.json (relative path: ./node_modules/classnames)
remote:             no extension
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames doesn't exist
remote:             .js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames.js doesn't exist
remote:             .jsx
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames.jsx doesn't exist
remote:             .react.js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames.react.js doesn't exist
remote:         /tmp/build_a6a357bd/node_modules/classnames doesn't exist
remote:       /tmp/node_modules doesn't exist or is not a directory
remote:       /node_modules doesn't exist or is not a directory
remote:       looking for modules in /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules
remote:         single file module
remote:           using description file: /tmp/build_a6a357bd/node_modules/@strapi/admin/package.json (relative path: ./node_modules/classnames)
remote:             no extension
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames doesn't exist
remote:             .js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames.js doesn't exist
remote:             .jsx
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames.jsx doesn't exist
remote:             .react.js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames.react.js doesn't exist
remote:         /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames doesn't exist
remote: ModuleNotFoundError: Module not found: Error: Can't resolve 'classnames' in '/tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/Wysiwyg'
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/Compilation.js:2011:28
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:795:13
remote:     at eval (eval at create (/tmp/build_a6a357bd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:275:22
remote:     at eval (eval at create (/tmp/build_a6a357bd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:431:22
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:124:11
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:667:25
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:852:8
remote:     at /tmp/build_a6a357bd/node_modules/webpack/lib/NormalModuleFactory.js:972:5
remote: resolve 'classnames' in '/tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/Wysiwyg'
remote:   Parsed request is a module
remote:   using description file: /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/package.json (relative path: ./admin/src/components/Wysiwyg)
remote:     Field 'browser' doesn't contain a valid alias configuration
remote:     resolve as module
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/Wysiwyg/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/components/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/src/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/admin/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/editorjs-custom-plugin/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/plugins/node_modules doesn't exist or is not a directory
remote:       /tmp/build_a6a357bd/src/node_modules doesn't exist or is not a directory
remote:       looking for modules in /tmp/build_a6a357bd/node_modules
remote:         single file module
remote:           using description file: /tmp/build_a6a357bd/package.json (relative path: ./node_modules/classnames)
remote:             no extension
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames doesn't exist
remote:             .js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames.js doesn't exist
remote:             .jsx
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames.jsx doesn't exist
remote:             .react.js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/classnames.react.js doesn't exist
remote:         /tmp/build_a6a357bd/node_modules/classnames doesn't exist
remote:       /tmp/node_modules doesn't exist or is not a directory
remote:       /node_modules doesn't exist or is not a directory
remote:       looking for modules in /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules
remote:         single file module
remote:           using description file: /tmp/build_a6a357bd/node_modules/@strapi/admin/package.json (relative path: ./node_modules/classnames)
remote:             no extension
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames doesn't exist
remote:             .js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames.js doesn't exist
remote:             .jsx
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames.jsx doesn't exist
remote:             .react.js
remote:               Field 'browser' doesn't contain a valid alias configuration
remote:               /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames.react.js doesn't exist
remote:         /tmp/build_a6a357bd/node_modules/@strapi/admin/node_modules/classnames doesn't exist
remote: error Command failed with exit code 1.
remote:        info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to vk-backend-2022.
remote: 
To https://git.heroku.com/vk-backend-2022.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/vk-backend-2022.git'

mckennapaul27 · May 31, 2022, 8:42pm

I included all the libraries from src/plugins/editorjs-custom-plugin inside the the main strapi app package.json and it removed the ModuleNotFoundError: Module not found: Error.

However, this doesn’t seem right. When you create a plugin you have to include all the libraries inside the the root package.json for the main strapi app (not the plugin package.json)? Seems strange that would be the case.

Anyway, despite it removing the ModuleNotFoundError: Module not found: Error, the plugin still works perfectly locally but once deployed I am getting these 2 errors in console:

element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. and Uncaught Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop

Why would it work perfectly locally but not production?

Any guidance appreciated …

mckennapaul27 · May 31, 2022, 9:11pm

I think the issue here seems to be that the package.json inside the plugin is not accessible once it is deployed to Heroku.

Please can you somebody advise me how the packages within src/plugins/[plugin-name]/package.json can be made accessible in production?

I spoke to Heroku and they said it is simply failing because the app cannot find the modules. That’s why I then installed them into the root package.json which solved some of those module not found errors but the plugin does not work in production

mckennapaul27 · June 2, 2022, 11:07am

Solved by using ‘workspaces’: Is there a proper way to install local plugin's dependencies?