Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot compile javascript #2723

Closed
kaji-hiro opened this issue Sep 6, 2020 · 3 comments
Closed

Cannot compile javascript #2723

kaji-hiro opened this issue Sep 6, 2020 · 3 comments

Comments

@kaji-hiro
Copy link

kaji-hiro commented Sep 6, 2020 •
edited
Loading

Error message is here.

ERROR in ./app/javascript/packs/application.js
 Module build failed (from ./node_modules/babel-loader/lib/index.js):
 Error: Cannot find module './node_modules/@rails/webpacker/package/babel/preset.js' from '/myapp'
     at Function.resolveSync [as sync] (/myapp/node_modules/resolve/lib/sync.js:89:15)
     at resolveStandardizedName (/myapp/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
     at resolvePreset (/myapp/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
     at loadPreset (/myapp/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
     at createDescriptor (/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
     at items.map (/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
     at Array.map (<anonymous>)
     at createDescriptors (/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
     at createPresetDescriptors (/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
     at presets (/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
     at mergeChainOpts (/myapp/node_modules/@babel/core/lib/config/config-chain.js:384:26)
     at /myapp/node_modules/@babel/core/lib/config/config-chain.js:347:7
     at Generator.next (<anonymous>)
     at buildRootChain (/myapp/node_modules/@babel/core/lib/config/config-chain.js:129:29)
     at buildRootChain.next (<anonymous>)
     at loadPrivatePartialConfig (/myapp/node_modules/@babel/core/lib/config/partial.js:99:62)
     at loadPrivatePartialConfig.next (<anonymous>)
     at Function.<anonymous> (/myapp/node_modules/@babel/core/lib/config/partial.js:125:25)
     at Generator.next (<anonymous>)
     at evaluateSync (/myapp/node_modules/gensync/index.js:244:28)
     at Function.sync (/myapp/node_modules/gensync/index.js:84:14)
     at Object.<anonymous> (/myapp/node_modules/@babel/core/lib/config/index.js:43:61)
     at Object.<anonymous> (/myapp/node_modules/babel-loader/lib/index.js:151:26)
     at Generator.next (<anonymous>)
     at asyncGeneratorStep (/myapp/node_modules/babel-loader/lib/index.js:3:103)
     at _next (/myapp/node_modules/babel-loader/lib/index.js:5:194)
     at /myapp/node_modules/babel-loader/lib/index.js:5:364
     at new Promise (<anonymous>)
     at Object.<anonymous> (/myapp/node_modules/babel-loader/lib/index.js:5:97)
     at Object._loader (/myapp/node_modules/babel-loader/lib/index.js:231:18)

Code
application.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Environment

Ruby: 2.7.1
Rails: 6.0.3.2
Webpacker: 5.2.1
yarn: 1.22.5
Docker: 19.03.11
docker-compose: 1.25.4

Tried command

rails webpacker:install
rails webpacker:install:react
rails g react:install
yarn upgrade

Please help me.
Thanks for your advice.
@kikonen
Copy link

kikonen commented Oct 13, 2020 •
edited
Loading

I surely would like to understand this "/node_modules/@rails/webpacker/package/babel/preset.js", which seems to randomly appear. This whole webpacker setup in rails 6 seems to be rather fragile. Or more precisely npm package repository itself is rather fragile with fragile packages.

@kikonen
Copy link

kikonen commented Oct 13, 2020 •
edited
Loading

Basically I did

yarn remove @rails/webpacker
yarn remove webpack webpack-cli webpack-dev-server
rm -fr node_modules
rm -fr public/packs
bundle exec rails webpacker:install
# REMOVE invalid babel preset from package.json added by "webpacker:install"
# DELETE .browserlistrc
# ADD missing dependencies not installed
yarn add node-releases
yarn add electron-to-chromium
# .... wait for it ...
bundle exec rails webpacker:compile
# SUCCESS

... and after this clean reinstall it did work (having seemingly "@rails/webpacker": "5.1.1"). Before it was failing various interesting ways (i.e. worked in devepment or in production, or failed either one; while both supposedly had same node modules installed).

And in the future must be careful and try to avoid using "yarn upgrade" to upgrade all possible modules and such to avoid triggering fatal incompatibility errors

@sachiotomita
Copy link

this may solve:

remove this error cause from package.json

  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },

( and rm .browserslistrc

working webpack compatibility:
rails/rails#43062 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kikonen @sachiotomita @guillaumebriday @kaji-hiro