Webpacker: `rails assets:precompile` behaves differently from `rails webpacker:compile`

[deepj]

remote:        ERROR in ./app/javascript/packs/components/QuestionForm.jsx
remote:        Module build failed: ReferenceError: Unknown plugin "transform-decorators-legacy" specified in "/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/.babelrc" at 1, attempted to resolve relative to "/tmp/build_9790f539c6a0ba630f90c5268b4cf44d"
remote:            at /tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
remote:            at Array.map (<anonymous>)
remote:            at Function.normalisePlugins (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
remote:            at OptionManager.mergeOptions (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
remote:            at OptionManager.init (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
remote:            at File.initOptions (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/file/index.js:212:65)
remote:            at new File (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/file/index.js:135:24)
remote:            at Pipeline.transform (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
remote:            at transpile (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-loader/lib/index.js:50:20)
remote:            at /tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-loader/lib/fs-cache.js:118:18
remote:            at ReadFileContext.callback (/tmp/build_9790f539c6a0ba630f90c5268b4cf44d/node_modules/babel-loader/lib/fs-cache.js:31:21)
remote:            at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)

This has started after upgrading to Rails 5.2 and Webpacker 4.0.0-pre2. What's interesting, this is not caused on the local machine (bin/webpack-dev-server, even RAILS_ENV=production rails webpacker:compile). Happening only on Circle CI or Heroku

This happens only after running rails assets:precompile, no issue with bin/webpack-dev-server or rails webpacker:compile

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%"
      },
      "useBuiltIns": true
    }],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }],
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

package.json

{
  "dependencies": {
    "@fortawesome/fontawesome-free-webfonts": "^1.0.6",
    "@rails/webpacker": "^4.0.0-pre.2",
    "@rematch/core": "^0.6.0",
    "immutable": "^3.8.2",
    "immutable-treeutils": "^1.1.0",
    "jquery": "^3.2.1",
    "jquery-slimscroll": "^1.3.8",
    "metismenu": "^2.7.0",
    "pace-progress": "^1.0.2",
    "prop-types": "^15.6.1",
    "rails-erb-loader": "^5.3.0",
    "react": "16.3.2",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-dom": "16.3.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "select2": "^4.0.3"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-react": "^7.7.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "webpack-dev-server": "^3.1.3"
  }
}

config/initializers/assets.rb

  # frozen_string_literal: true

  # Be sure to restart your server when you modify this file.

  # Version of your assets, change this if you want to expire all your assets.
  Rails.application.config.assets.version = '1.0'

  # Add additional assets to the asset load path.
  # Rails.application.config.assets.paths << Emoji.images_path
  # Add Yarn node_modules folder to the asset load path.
  Rails.application.config.assets.paths << Rails.root.join('node_modules')

  # Precompile additional assets.
  # application.js, application.css, and all non-JS/CSS in the app/assets
  # folder are already added.

```

[deepj]

Here is demo: https://github.com/deepj/rails52-webpacker-400

[gauravtiwari]

@deepj It's because assets:precompile also runs yarn:install task in production mode, which removes dev dependencies so I would suggest putting any build related library under dependencies section.

[deepj]

@gauravtiwari Thanks for the answer. Now it makes sense. What it's interesting, it has started failing after upgrading to Rails 5.2. Webpacker 4.0.0-pre2 and Rails 5.1.6 had been used before with the same package.json like now.

Is this possible to reflect this somewhere in docs (apologize if it's already noticed somewhere there). On the other hand, I don't think the regular dependencies are a good fitting place for babel packages. Since Babel is a compiler into JavaScript, and these ones are its extensions. Something what wouldn't belongs into dependencies since it's a place more for the "application" packages but dev ones (in my context).

I'd propose to consider to change this behavior, and reflect the fact, assets:precompile can need some other packages during the compiling process?

[nvanderlaan]

@deepj It started failing after upgrading to Rails 5.2 because that's when the assets:precompile task started getting passed the production flag. Checkout the pull request for that change here:

https://github.com/rails/rails/commit/2118c98b98c4984069e070aa0d5c398de618d02a#diff-dcd44149ba1cd25c12956a3ebecc32a3

I agree that it'd be helpful if this change was documented somewhere (and also apologize if it already is and I missed it). Hopefully this thread is enough to help others with their upgrade in the meantime.