Keeping your babel and postcss config up to date in Rails 6

Recently, I was upgrading this project to Rails 6 RC1. I ran into the following error with webpacker :

'Error: Cannot find module 'babel-plugin-syntax-dynamic-import' - Did you mean "@babel/syntax-dynamic-import"

Upon some searching, I found that Babel had deprecated .babelrc in favor of babel.config.js . Rails 6 Beta 2 has generates files with the update config, but since, I had upgraded my project from Rails 5.2, to 6 beta, I was still using a slightly older config.

Here is what my updated config looks like :

Our postcss as also gone through an overhaul in the meanwhile, so I get an error with postcss-cssnext.

Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-cssnext'

In order to update this config, you just need to delete your existing .postcssrc.yml file and replace it with postcss.config.js .

As you can see here, postcss-cssnex has been replaced with postcss-preset-env.

And boom! webpacker is back in business.