Login/Register
Rails 6 failing to deploy to Heroku: ModuleNotFoundError: Module not found: Error: Can't resolve '@popperjs/core' in '/tmp
Asked Answered
ruby-on-railspopper.jsbootstrap-5
T

3

8

I am trying to deploy my rails 6 blog-like app to Heroku and since I've added Bootstrap to do some styling I haven't been able to compile and push anymore. This is the message I am getting:

ModuleNotFoundError: Module not found: Error: Can't resolve '@popperjs/core'....

If somebody knows how to fix this error, please let me know.

The code can be found here : https://github.com/parK-dev/Alpha-Blog

Note that this is my first try at Rails and I am new to development, clear instructions would be appreciated, thank you.

-----> Building on the Heroku-20 stack
-----> Ruby app detected
-----> Installing bundler 2.1.4
-----> Removing BUNDLED WITH version in the Gemfile.lock
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-3.0.0
-----> Installing dependencies using bundler 2.1.4
       Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
       Using rake 13.0.3
       Using concurrent-ruby 1.1.8
       Using i18n 1.8.8
       Using minitest 5.14.3
       Using tzinfo 2.0.4
       Using zeitwerk 2.4.2
       Using activesupport 6.1.1
       Using builder 3.2.4
       Using erubi 1.10.0
       Using racc 1.5.2
       Using nokogiri 1.11.1 (x86_64-linux)
       Using rails-dom-testing 2.0.3
       Using crass 1.0.6
       Using loofah 2.9.0
       Using rails-html-sanitizer 1.3.0
       Using actionview 6.1.1
       Using rack 2.2.3
       Using rack-test 1.1.0
       Using actionpack 6.1.1
       Using nio4r 2.5.4
       Using websocket-extensions 0.1.5
       Using websocket-driver 0.7.3
       Using actioncable 6.1.1
       Using globalid 0.4.2
       Using activejob 6.1.1
       Using activemodel 6.1.1
       Using activerecord 6.1.1
       Using mimemagic 0.3.5
       Using marcel 0.3.3
       Using activestorage 6.1.1
       Using mini_mime 1.0.2
       Using mail 2.7.1
       Using actionmailbox 6.1.1
       Using actionmailer 6.1.1
       Using actiontext 6.1.1
       Using msgpack 1.4.2
       Using bootsnap 1.7.0
       Using bundler 2.2.3
       Using ffi 1.14.2
       Using jbuilder 2.11.2
       Using method_source 1.0.0
       Using pg 1.2.3
       Using puma 5.2.0
       Using rack-proxy 0.6.5
       Using thor 1.1.0
       Using railties 6.1.1
       Using sprockets 4.0.2
       Using sprockets-rails 3.2.2
       Using rails 6.1.1
       Using sassc 2.4.0
       Using tilt 2.0.10
       Using sassc-rails 2.1.2
       Using sass-rails 6.0.0
       Using semantic_range 2.3.1
       Using turbolinks-source 5.2.0
       Using turbolinks 5.2.1
       Using webpacker 5.2.1
       Bundle complete! 17 Gemfile dependencies, 57 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into `./vendor/bundle`
       Removing bundler (2.1.4)
       Bundle completed (0.55s)
       Cleaning up the bundler cache.
-----> Installing node-v12.16.2-linux-x64
-----> Installing yarn-v1.22.4
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.22.4
       warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       info [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > [email protected]" has unmet peer dependency "@popperjs/core@^2.5.4".
       warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       [4/4] Building fresh packages...
       Done in 26.67s.
       I, [2021-02-11T21:45:58.554126 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/jumbotron-4e5a1586b8afb6f5e26722d19ec0227e803b1d6618993041f7e1411fffc5bb69.jpg
       I, [2021-02-11T21:45:58.555799 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/application-c7c465c57bf58300b796315902849aa287f9b5b88a643b887e9e748ebb91f409.css
       I, [2021-02-11T21:45:58.556164 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/application-c7c465c57bf58300b796315902849aa287f9b5b88a643b887e9e748ebb91f409.css.gz
       I, [2021-02-11T21:45:58.556594 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/jumbotron-4e5a1586b8afb6f5e26722d19ec0227e803b1d6618993041f7e1411fffc5bb69.jpg
       I, [2021-02-11T21:45:58.557113 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/custom-7137798345420ff198a899149dea901836a9003f4d0caf633b5ec120aeb44dba.css
       I, [2021-02-11T21:45:58.557217 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/custom-7137798345420ff198a899149dea901836a9003f4d0caf633b5ec120aeb44dba.css.gz
       I, [2021-02-11T21:45:58.557349 #303]  INFO -- : Writing /tmp/build_f6d49c25/public/assets/jumbotron-4e5a1586b8afb6f5e26722d19ec0227e803b1d6618993041f7e1411fffc5bb69.jpg
       Compiling...
       Compilation failed:
       ModuleNotFoundError: Module not found: Error: Can't resolve '@popperjs/core' in '/tmp/build_f6d49c25/node_modules/bootstrap/dist/js'
           at /tmp/build_f6d49c25/node_modules/webpack/lib/Compilation.js:925:10
           at /tmp/build_f6d49c25/node_modules/webpack/lib/NormalModuleFactory.js:401:22
           at /tmp/build_f6d49c25/node_modules/webpack/lib/NormalModuleFactory.js:130:21
           at /tmp/build_f6d49c25/node_modules/webpack/lib/NormalModuleFactory.js:224:22
           at /tmp/build_f6d49c25/node_modules/neo-async/async.js:2830:7
           at /tmp/build_f6d49c25/node_modules/neo-async/async.js:6877:13
           at /tmp/build_f6d49c25/node_modules/webpack/lib/NormalModuleFactory.js:214:25
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:213:14
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/forEachBail.js:30:14
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/Resolver.js:285:5
           at eval (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
           at /tmp/build_f6d49c25/node_modules/enhanced-resolve/lib/RootPlugin.js:37:38
           at _next42 (eval at create (/tmp/build_f6d49c25/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
       resolve '@popperjs/core' in '/tmp/build_f6d49c25/node_modules/bootstrap/dist/js'
         Parsed request is a module
         using description file: /tmp/build_f6d49c25/node_modules/bootstrap/package.json (relative path: ./dist/js)
           Field 'browser' doesn't contain a valid alias configuration
           resolve as module
             looking for modules in /tmp/build_f6d49c25/app/javascript
               using description file: /tmp/build_f6d49c25/package.json (relative path: ./app/javascript)
                 Field 'browser' doesn't contain a valid alias configuration
                 using description file: /tmp/build_f6d49c25/package.json (relative path: ./app/javascript/@popperjs/core)
                   no extension
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core doesn't exist
                   .mjs
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.mjs doesn't exist
                   .js
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.js doesn't exist
                   .sass
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.sass doesn't exist
                   .scss
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.scss doesn't exist
                   .css
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.css doesn't exist
                   .module.sass
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.module.sass doesn't exist
                   .module.scss
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.module.scss doesn't exist
                   .module.css
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.module.css doesn't exist
                   .png
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.png doesn't exist
                   .svg
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.svg doesn't exist
                   .gif
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.gif doesn't exist
                   .jpeg
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.jpeg doesn't exist
                   .jpg
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core.jpg doesn't exist
                   as directory
                     /tmp/build_f6d49c25/app/javascript/@popperjs/core doesn't exist
             /tmp/build_f6d49c25/node_modules/bootstrap/dist/js/node_modules doesn't exist or is not a directory
             /tmp/build_f6d49c25/node_modules/bootstrap/dist/node_modules doesn't exist or is not a directory
             /tmp/build_f6d49c25/node_modules/bootstrap/node_modules doesn't exist or is not a directory
             /tmp/build_f6d49c25/node_modules/node_modules doesn't exist or is not a directory
             /tmp/node_modules doesn't exist or is not a directory
             /node_modules doesn't exist or is not a directory
             looking for modules in /tmp/build_f6d49c25/node_modules
               using description file: /tmp/build_f6d49c25/package.json (relative path: ./node_modules)
                 Field 'browser' doesn't contain a valid alias configuration
                 using description file: /tmp/build_f6d49c25/package.json (relative path: ./node_modules/@popperjs/core)
                   no extension
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core doesn't exist
                   .mjs
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.mjs doesn't exist
                   .js
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.js doesn't exist
                   .sass
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.sass doesn't exist
                   .scss
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.scss doesn't exist
                   .css
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.css doesn't exist
                   .module.sass
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.module.sass doesn't exist
                   .module.scss
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.module.scss doesn't exist
                   .module.css
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.module.css doesn't exist
                   .png
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.png doesn't exist
                   .svg
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.svg doesn't exist
                   .gif
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.gif doesn't exist
                   .jpeg
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.jpeg doesn't exist
                   .jpg
                     Field 'browser' doesn't contain a valid alias configuration
                     /tmp/build_f6d49c25/node_modules/@popperjs/core.jpg doesn't exist
                   as directory
                     /tmp/build_f6d49c25/node_modules/@popperjs/core doesn't exist
       
 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed
Tenuto answered 11/2, 2021 at 22:0 Comment(1)
Can I ask if you got this problem fixed? I'm currently having this issue and the one answer below doesn't seem to help me. – Broadcaster
B
26

I've found a solution to the same problem I've been having. It seems that the code

yarn add bootstrap jquery popper.js

is outdated and is used for Bootstrap 4.

I myself have been using/developing for Bootstrap 5 therefor I had to remove the packages from above using

yarn remove bootstrap jquery popper.js

And instead run, for Bootstrap 5

yarn add bootstrap@next jquery @popperjs/core
Broadcaster answered 12/3, 2021 at 4:6 Comment(0)
B
10

At the time of this answer, I've found a solution to the same problem I've been having. I'd suggest you just

yarn remove popper.js

and then install @popperjs/core

yarn add @popperjs/core

and that is

Bracey answered 19/5, 2021 at 21:31 Comment(0)
U
0

I'd suggest you get those CDNs out of your application layout file (app/views/layouts/application.html.erb) and follow something more like this: https://stevepolito.design/blog/rails-6-bootstrap-4-webpacker-tutorial/.

Rails 6 makes use of webpacker and so a lot of these packages can be added through yarn. They are then added via app/javascript/packs/application.js.

Another thing to try in the future when you get something like this is to run bin/webpack. This compiles webpack. Essentially this is a check to make sure it can. Then it may be clearer if this a Heroku issue or (I'm presuming in this case) a coding issue.

Unweighed answered 12/2, 2021 at 1:23 Comment(1)
Thank you for your answer. I'll let you know. – Tenuto

© 2022 - 2024 — McMap. All rights reserved.