Webpacker: Upgrading from 3.5 to 4.0.0.rc.7 - Cannot find module 'babel-plugin-syntax-dynamic-import'

[scottwater]

I am still trying to work through #1917. I figured trying out Webpack 4 might be a better use of time.

Here were my upgrade steps:

1. change the gem version to gem 'webpacker', '>= 4.0.x'
2. bundle update webpacker
3. yarn add @rails/webpacker@next
4. bundle exec rails webpacker:install I let it overwrite everything except production.js.
5. Copy the plugin from .postcssrc.yml to postcss.config.js.
   6.Rm .postcssrc.yml and .bablelrc
6. yarn upgrade

I then ran bundle exec rails webpacker:install which generated the issue below.

Is there a step related to babel I am missing?

BTW: Here is what I changed: https://github.com/scottwater/rails_webpacker_with_purgecss_example/tree/webpack4

Thanks,
Scott

Hash: 3c68802e3c8f91684ac4
Version: webpack 4.29.0
Time: 451ms
Built at: 01/29/2019 3:16:56 PM
2 assets
Entrypoint application = js/application-3b4deecf7a37050034af.js js/application-3b4deecf7a37050034af.js.map
[0] ./app/javascript/packs/application.js 2.85 KiB {0} [built] [failed] [1 error]

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-syntax-dynamic-import' from '/Users/scott/play/webpack_with_purge'

• Did you mean "@babel/syntax-dynamic-import"?
  at Function.module.exports [as sync] (/Users/scott/play/webpack_with_purge/node_modules/resolve/lib/sync.js:58:15)
  at resolveStandardizedName (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePlugin (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
  at loadPlugin (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
  at createDescriptor (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
  at Array.map ()
  at createDescriptors (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPluginDescriptors (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
  at plugins (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)
  at mergeChainOpts (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-chain.js:319:26)
  at /Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-chain.js:283:7
  at buildRootChain (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/config-chain.js:120:22)
  at loadPrivatePartialConfig (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/partial.js:85:55)
  at Object.loadPartialConfig (/Users/scott/play/webpack_with_purge/node_modules/@babel/core/lib/config/partial.js:110:18)
  at Object. (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:140:26)
  at Generator.next ()
  at asyncGeneratorStep (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:3:103)
  at _next (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:5:194)
  at /Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:5:364
  at new Promise ()
  at Object. (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:5:97)
  at Object._loader (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:220:18)
  at Object.loader (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:56:18)
  at Object. (/Users/scott/play/webpack_with_purge/node_modules/babel-loader/lib/index.js:51:12)

[scottwater]

Apologies. I missed deleting/migrating the .babelrc file.

[EverybodyKurts]

This bit me as well. Simply deleting the file worked.

[jaykilleen]

I learned by reading this thread that I also missed deleting the .babelrc. Let me pretend for a little while longer that I know what I am doing :)

[benlieb]

I learned by reading this thread that I also missed deleting the .bablelrc. Let me pretend for a little while longer that I know what I am doing :)

Watchout for @jaykilleen's comment above. I went to check if I had that file by copy/pasting it. I thought I didn't and I actually did (he mispelled .babelrc as .bablelrc). Just saving people some headaches...

[jaykilleen]

Thanks @benlieb for pointing that out. I've edited my comment. Glad I'm helping people though :) sorry for the headscratcher.

[Uysim]

I came to this issue since I met the same problem. But I can not understand what you guys mean yet

[benlieb]

I came to this issue since I met the same problem. But I can not understand what you guys mean yet

@Uysim If you have this problem you may need to delete your .babelrc file

[Uysim]

@benlieb correct. thank you

[Qwertie-]

Why does this file need to be deleted? I have plugins such as transform-class-properties which need to be used. Is there somewhere else this config should go now?

[jakeNiemiec]

Is there somewhere else this config should go now?

@Qwertie- See: https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#webpacker-upgrade-guide

[hanson-tapatalk]

I learned by reading this thread that I also missed deleting the .babelrc. Let me pretend for a little while longer that I know what I am doing :)

same here, hahaha

[WyriHaximus]

Don't forget about the babel section in your package.json, if you don't use .babelrc for some reason

[manielli]

Thank you, had the same issue and deleting the file worked for me too. :)

[single-stop-rj]

I'm not sure how this turned into a reddit post, but I also found that removing the .babelrc file resolved my issue... and created others