I've the standard webpacker 3.2.1 config with rails 5.1 and the following .babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
When I run RAILS_ENV=production NODE_ENV=production bundle exec rails webpacker:compile I get some output that is minified but not transpiled completely, e.g. I have arrow function ins the output:
translations:{default()=>{}}
When I transpile the file manually with babel-cli ...
yarn run babel public/packs/ --out-dir tmp/
... they get transpiled correctly, eg the arrow function gets changed to:
translations:{default:function(){return{}}}
So transpiling is working in theory, but not doing it's full job when compiling the assets.
The interesting part is: When I run RAILS_ENV=production NODE_ENV=production bundle exec rails webpacker:compile on my development machine, the files in public/packs are correctly transpiled (e.g. there are no arrow functions). So this only happens on the staging/production server.
I thought it might be due to some dev dependencies missing on production, but yarn has installed all dev dependencies on production, too.
What can be the cause of that it does not work on production server?
I found it out: On my dev machine, I had linked a package (yarn link pack). This seems to change the absolute path in the way that ...
exclude: /node_modules/
... in the default babel loader config does not pick it up. That is why it transpiled it locally.
When the package is installed regularly inside node_modules/, it reproduced the same behaviour like on my production servers. By removing the exclude option ...
# webpack/environment.js
const { environment, loaders } = require('@rails/webpacker')
delete loaders.babel.exclude
...
... it now transpiles it like I expected it.
It looks like webpacker expects packages already to be transpiled correctly by having this default.
Most helpful comment
I found it out: On my dev machine, I had linked a package (
yarn link pack). This seems to change the absolute path in the way that ...... in the default babel loader config does not pick it up. That is why it transpiled it locally.
When the package is installed regularly inside
node_modules/, it reproduced the same behaviour like on my production servers. By removing theexcludeoption ...... it now transpiles it like I expected it.
It looks like webpacker expects packages already to be transpiled correctly by having this default.