Webpacker: Babel Loader broken outside of source path

[tomprats]

Problem

The babel-loader went from using an exclude, to using both an exclude and include. I'm not really sure the reasoning behind it, but since I keep my tests in a different folder (test/javascript), it broke them.

include: resolve(sourcePath),
exclude: /node_modules/,

Is the include necessary there? Should it maybe have been documented better that the babel loader would be more restricted than previously? Or did I just cause problems for myself because I may have been using it incorrectly in the first place?

Origin

Looks like it was introduced in the rc1 release here. It took me a long time to track down exactly what was failing since it gave me an Unexpected token error on the first angle bracket of some jsx, making me believe it was jsx or react specific.

Temporary Solution

Previously in my test config I just needed:

environment.resolvedModules.append("tests", "test/javascript")

But now I've updated it to be:

environment.resolvedModules.append("tests", "test/javascript")

const babelLoader = environment.loaders.get("babel")
babelLoader.include = [babelLoader.include, resolve("test/javascript")]

Is there a better solution? Should the babel-loader itself be different?

[connorshea]

I dunno if it's related, but I'm getting this error with babel-loader when upgrading to webpacker 4.0.0.rc2?

Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-syntax-dynamic-import' from '/Users/connorshea/Programming/game-tracker'
- Did you mean "@babel/syntax-dynamic-import"?
    at Function.module.exports [as sync] (/Users/connorshea/Programming/game-tracker/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at plugins (/Users/connorshea/Programming/game-tracker/node_modules/@babel/core/lib/config/config-descriptors.js:40:19) application-5491ec0a138aa8d8cd41.js:96:7

[codebryo]

I played around with an upgrade to webpacker 4 over the weekend. The biggest challenge here is that webpack 4 upgraded the underlying babel version. So basically you also need to update all babel packages. We are looking at babel 7 here.

What important to note here is that babel 7 switched npm wise to scoped packages. @babel/...
So babel-core becomes @babel/core.
This small guide might be handy: https://medium.com/@tonypai/fast-way-to-upgrade-to-babel-7-3f8cf97b4b3d

For webpacker you also need the correct npm package.
I started following the references in the official installation of the Repo:
https://github.com/rails/webpacker#installation

Otherwise, let me share what I have installed eventually:

//package.json
{
  "dependencies": {
    "@babel/runtime": "^7.2.0",
    "@rails/webpacker": "^4.0.0-rc.2",
     "webpack": "^4.28.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.5",
     ...
  }
}

And I needed to switch to the new babel.config.js format:

//babel.config.js
module.exports = function (api) {
  api.cache(true)
  const presets = [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: '> 1%'
        },
        useBuiltIns: 'entry',
        forceAllTransforms: true
      }
    ]
  ]
  const plugins = [
    '@babel/plugin-transform-modules-commonjs',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-transform-runtime'
  ]

  return {
    presets,
    plugins
  }
}

That did the trick for me, and I'm now compiling with webpacker 4, and babel 7 in blazing speed. So the upgrade path is not trivial as it includes many moving parts, but very much worth it.

[tomprats]

Yeah that was definitely a big update, but I think it's completely independent of the original issue here. I ran into this issue while already at Babel 7 and narrowed it down to the issue described above

[jakeNiemiec]

For the future you can have babel programmatically update itself with the babel-upgrade package.

@tomprats It looks like you are setting the babelLoader.include the proper way, but I would just delete the include and use a regex like /(app|test)\/javascript\/.+\.(js|jsx|mjs)?$/. (thats some sloppy regex though 😅 )

[ghaydarov]

And I needed to switch to the new babel.config.js format:

@codebryo is this strictly required? Is .babelrc or defining them in package.json being depreciated? I am getting different behaviors/errors when trying all of them separately. Any source for the cause of the switch?

Thanks!

[codebryo]

@ghaydarov I did the explicit change after it was stated as a requirement on the jest website. https://jestjs.io/docs/en/getting-started#using-babel

[maschwenk]

@tomprats I literally made the exact same change but then solved it by switching over to the new babel config format as mentioned by others (specifically the react sample config in my case)

Problem went away after that.

[tomprats]

Interesting... not sure why that worked, but it works! I'm still using my exact same babel config, just in babel.config.js. Thanks for the help everyone!

[connorshea]

Should this be mentioned as part of the upgrade process for webpacker 3->4? (does an upgrade doc even exist?)

[maschwenk]

@connorshea it's in progress in #1755