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.