Webpacker: Asset compilation error during heroku deployment, webpacker 3, react 16

[serv]

While deploy to Heroku, during Webpacker compiling assets, I get this error message

Main error

remote:        ERROR in ./app/javascript/packs/application.js
remote:        Module build failed: ReferenceError: [BABEL] /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/app/javascript/packs/application.js: Unknown option: /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
remote:        A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
remote:        Invalid:
remote:        `{ presets: [{option: value}] }`
remote:        Valid:
remote:        `{ presets: [['presetName', {option: value}]] }`

./app/javascript/packs/application.js

console.log('Hello World from Webpacker')

import('bootstrap');

Full log

remote:        Webpacker is installed 🎉 🍰
remote:        Using /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/config/webpacker.yml file for setting up webpack paths
remote:        Compiling…
remote:        Compilation failed:
remote:        yarn run v1.1.0
remote:        $ ./node_modules/webpack/bin/webpack.js "--config" "/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/config/webpack/production.js"
remote:        Hash: 2d04d04cab2e88cc387a
remote:        Version: webpack 3.6.0
remote:        Time: 8457ms
remote:        Asset       Size  Chunks             Chunk Names
remote:        styles/application-b53a7ff2f4f1607a4df4974c75f207cb.css.map  132 bytes       1  [emitted]  styles/application
remote:        _/_/node_modules/leaflet/dist/images/layers-a6137456ed160d7606981aa57c559898.png  696 bytes          [emitted]
remote:        _/_/node_modules/leaflet/dist/images/marker-icon-2273e3d8ad9264b7daa5bdbf8e6b47f8.png    1.47 kB          [emitted]
remote:        styles/mapper-bfc5f290a91f1461a865.js  544 bytes       0  [emitted]  styles/mapper
remote:        styles/application-0ae7347915dcaea70b43.js  549 bytes       1  [emitted]  styles/application
remote:        mapper-4545f993d0f0a050b398.js    3.36 kB       2  [emitted]  mapper
remote:        hello_react-790851e77f12419d2fb5.js    3.37 kB       3  [emitted]  hello_react
remote:        application-982c1218013859ff1500.js    3.37 kB       4  [emitted]  application
remote:        styles/application-b53a7ff2f4f1607a4df4974c75f207cb.css     139 kB       1  [emitted]  styles/application
remote:        styles/mapper-aabc516419e7cbe13bc791ee9e6d1836.css    11.4 kB       0  [emitted]  styles/mapper
remote:        styles/mapper-bfc5f290a91f1461a865.js.map    1.11 kB       0  [emitted]  styles/mapper
remote:        styles/mapper-aabc516419e7cbe13bc791ee9e6d1836.css.map  127 bytes       0  [emitted]  styles/mapper
remote:        styles/application-0ae7347915dcaea70b43.js.map    1.12 kB       1  [emitted]  styles/application
remote:        _/_/node_modules/leaflet/dist/images/layers-2x-4f0283c6ce28e888000e978e537a6a56.png    1.26 kB          [emitted]
remote:        mapper-4545f993d0f0a050b398.js.map    1.13 kB       2  [emitted]  mapper
remote:        hello_react-790851e77f12419d2fb5.js.map    1.14 kB       3  [emitted]  hello_react
remote:        application-982c1218013859ff1500.js.map    1.13 kB       4  [emitted]  application
remote:        manifest.json    1.54 kB          [emitted]
remote:        styles/mapper-bfc5f290a91f1461a865.js.gz  342 bytes          [emitted]
remote:        styles/application-0ae7347915dcaea70b43.js.gz  344 bytes          [emitted]
remote:        mapper-4545f993d0f0a050b398.js.gz    1.04 kB          [emitted]
remote:        hello_react-790851e77f12419d2fb5.js.gz    1.04 kB          [emitted]
remote:        application-982c1218013859ff1500.js.gz    1.04 kB          [emitted]
remote:        styles/mapper-aabc516419e7cbe13bc791ee9e6d1836.css.gz    2.77 kB          [emitted]
remote:        manifest.json.gz  435 bytes          [emitted]
remote:        styles/application-b53a7ff2f4f1607a4df4974c75f207cb.css.gz      20 kB          [emitted]
remote:        [0] ./app/javascript/packs/application.js 2.83 kB {4} [built] [failed] [1 error]
remote:        [1] ./app/javascript/packs/hello_react.jsx 2.83 kB {3} [built] [failed] [1 error]
remote:        [2] ./app/javascript/packs/mapper.jsx 2.82 kB {2} [built] [failed] [1 error]
remote:        [3] ./app/javascript/packs/styles/application.scss 41 bytes {1} [built]
remote:        [4] ./app/javascript/packs/styles/mapper.scss 41 bytes {0} [built]
remote:        [5] ./node_modules/css-loader?{"minimize":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/.postcssrc.yml"}}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/packs/styles/application.scss 139 kB [built]
remote:        [9] ./node_modules/css-loader?{"minimize":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/.postcssrc.yml"}}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/packs/styles/mapper.scss 11.5 kB [built]
remote:        + 6 hidden modules
remote:        ERROR in ./app/javascript/packs/application.js
remote:        Module build failed: ReferenceError: [BABEL] /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/app/javascript/packs/application.js: Unknown option: /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
remote:        A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
remote:        Invalid:
remote:        `{ presets: [{option: value}] }`
remote:        Valid:
remote:        `{ presets: [['presetName', {option: value}]] }`
remote:        For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js")
remote:        at Logger.error (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
remote:        at OptionManager.mergeOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
remote:        at Array.map (<anonymous>)
remote:        at OptionManager.resolvePresets (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
remote:        at OptionManager.mergePresets (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
remote:        at OptionManager.mergeOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
remote:        at OptionManager.init (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
remote:        at File.initOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/index.js:212:65)
remote:        at new File (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/index.js:135:24)
remote:        at Pipeline.transform (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
remote:        at transpile (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/index.js:50:20)
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/fs-cache.js:118:18
remote:        at ReadFileContext.callback (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/fs-cache.js:31:21)
remote:        at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:421:13)
remote:        ERROR in ./app/javascript/packs/hello_react.jsx
remote:        Module build failed: ReferenceError: [BABEL] /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/app/javascript/packs/hello_react.jsx: Unknown option: /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
remote:        A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
remote:        Invalid:
remote:        `{ presets: [{option: value}] }`
remote:        Valid:
remote:        `{ presets: [['presetName', {option: value}]] }`
remote:        For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js")
remote:        at Logger.error (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
remote:        at OptionManager.mergeOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
remote:        at Array.map (<anonymous>)
remote:        at OptionManager.resolvePresets (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
remote:        at OptionManager.mergePresets (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
remote:        at OptionManager.mergeOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
remote:        at OptionManager.init (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
remote:        at File.initOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/index.js:212:65)
remote:        at new File (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/index.js:135:24)
remote:        at Pipeline.transform (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
remote:        at transpile (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/index.js:50:20)
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/fs-cache.js:118:18
remote:        at ReadFileContext.callback (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/fs-cache.js:31:21)
remote:        at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:421:13)
remote:        ERROR in ./app/javascript/packs/mapper.jsx
remote:        Module build failed: ReferenceError: [BABEL] /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/app/javascript/packs/mapper.jsx: Unknown option: /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
remote:        A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
remote:        Invalid:
remote:        `{ presets: [{option: value}] }`
remote:        Valid:
remote:        `{ presets: [['presetName', {option: value}]] }`
remote:        For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/react/index.js")
remote:        at Logger.error (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
remote:        at OptionManager.mergeOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
remote:        at Array.map (<anonymous>)
remote:        at OptionManager.resolvePresets (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
remote:        at OptionManager.mergePresets (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
remote:        at OptionManager.mergeOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
remote:        at OptionManager.init (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
remote:        at File.initOptions (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/index.js:212:65)
remote:        at new File (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/file/index.js:135:24)
remote:        at Pipeline.transform (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
remote:        at transpile (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/index.js:50:20)
remote:        at /tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/fs-cache.js:118:18
remote:        at ReadFileContext.callback (/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/node_modules/babel-loader/lib/fs-cache.js:31:21)
remote:        at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:421:13)
remote:        Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--5-2!node_modules/postcss-loader/lib/index.js??ref--5-3!node_modules/resolve-url-loader/index.js!node_modules/sass-loader/lib/loader.js??ref--5-5!app/javascript/packs/styles/mapper.scss:
remote:        3 assets
remote:        [0] ./node_modules/css-loader?{"minimize":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/.postcssrc.yml"}}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/packs/styles/mapper.scss 11.5 kB {0} [built]
remote:        + 4 hidden modules
remote:        Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--5-2!node_modules/postcss-loader/lib/index.js??ref--5-3!node_modules/resolve-url-loader/index.js!node_modules/sass-loader/lib/loader.js??ref--5-5!app/javascript/packs/styles/application.scss:
remote:        [0] ./node_modules/css-loader?{"minimize":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/tmp/build_be33e5f893115ab1c2f0ef294bfe742a/.postcssrc.yml"}}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/packs/styles/application.scss 139 kB {0} [built]
remote:        + 1 hidden module
remote:        info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
remote:        warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
remote:        error Command failed with exit code 2.
remote:  !
remote:  !     Precompiling assets failed.
remote:  !

Some more info

• $ NODE_ENV=production RAILS_ENV=production rails assets:precompile --trace works fine in local machine.
• Webpacker 3
• React 16

[gauravtiwari]

Do you have a .babelrc file in your app root?

[gauravtiwari]

Could you please paste the content please?

[serv]

Yes, I have the babelrc file in the app root.

$ cat .babelrc 
{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

[gauravtiwari]

Is babel-preset-react under devDependencies in package.json? Could you please paste your package.json?

[serv]

Yes I see babel-preset-react in the devDependencies.

$ cat package.json 
{
  "name": "torontohouse.net",
  "version": "0.0.1",
  "main": "index.js",
  "author": "[email protected]",
  "license": "MIT",
  "scripts": {
    "rails-install": "yarn install --modules-folder ./vendor/node_modules",
    "webpack": "./node_modules/webpack/bin/webpack.js",
    "webpack-watch": "./node_modules/webpack/bin/webpack.js --watch"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "7.x",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^0.11.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "uglifyjs-webpack-plugin": "^0.4.3",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "autoprefixer": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "bootstrap": "4.0.0-beta",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.7",
    "coffeescript": "1.12.7",
    "compression-webpack-plugin": "^1.0.0",
    "glob": "^7.1.2",
    "jquery": "^3.1.1",
    "jquery-ujs": "^1.2.2",
    "js-yaml": "^3.9.1",
    "leaflet": "^1.0.3",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "popper.js": "^1.12.2",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.5",
    "precss": "^2.0.0",
    "prop-types": "^15.6.0",
    "rails-erb-loader": "^5.1.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "resolve-url-loader": "^2.1.0",
    "tether": "^1.4.0",
    "webpack-manifest-plugin": "^1.3.1",
    "webpack-merge": "^4.1.0",
    "whatwg-fetch": "^2.0.3"
  },
  "engines": {
    "node": ">=6.0.0",
    "yarn": ">=0.25.2"
  }
}

[gauravtiwari]

Post 3.0+ you don't need these dependencies so just remove everything that's webpacker 2.0 specific and then remove node_modules, do yarn install and redeploy again. Make sure nothing is under devDependencies that's build specific (post 3.0 you don't need it anyway).

[serv]

After I upgraded to webpack 3, I ran $ bundle exec rails webpacker:install:react as well.

[gauravtiwari]

All deps now lives with npm package, https://github.com/rails/webpacker/blob/master/package.json so just remove everything except @rails/webpacker and you application deps.

[gauravtiwari]

Here is more background on why it's failing: https://devcenter.heroku.com/articles/nodejs-support#devdependencies

[serv]

@gauravtiwari

Success! :1st_place_medal:

Thanks for the help.

Here are a list of things I did going from Webpacker 2 to Webpacker 3.

• Update Gemfile to use Webpacker 3.
• bundle install
• Remove package.json
• bundle exec rails webpacker:install
• rails new myapp --webpack=react

A couple of other things to consider.

• I had environment specific configs for webpacker in config/webpack/ dir. Everyone should have their own quirks in their app, and there's no one size fits all solution here, but just wanted to inform people that Webpacker 3 changed up env configs handling from 2.
• I followed https://github.com/rails/webpacker/issues/739. Not sure adding buildpacks helped or not, but I followed https://github.com/rails/webpacker/issues/739#issuecomment-327546884 suggestion.

Closing this issue now. Thanks again.

[dmfrancisco]

In my case everything was working in the dev env but failed in production with the same error:

remote:        A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
remote:        Invalid:
remote:        `{ presets: [{option: value}] }`
remote:        Valid:
remote:        `{ presets: [['presetName', {option: value}]] }`

Turned out to be a missing babel-preset-react in the dependencies list (in development it was working because I use storybook that installs the preset). The react installer added the react preset to the .babelrc file but it seems it didn't update my package.json accordingly.

In the meantime I upgraded versions of the gem and package and everything worked correctly. So I'm not sure if this was fixed or a mistake on my side (plausible). Thanks for the help and this project 👏

[rcugut]

@gauravtiwari What about webpack-dev-server ?

I know Rails 5.1+ has the middleware to re-build packs on-the-fly, but I'm more comfortable using a separate process with bin/webpack-dev-server.

I can't see the webpack-dev-serverin the package.json file for webpacker, so I presume I have to manually add it myself, in my own package.json, under devDependencies. Unless I do that, I can't use the webpack-dev-server. I have latest webpacker 3.4 gem and npm package. And I see it only works with webpack-dev-server 2.x, but not 3.x

Or am I missing something else?

[codebycliff]

@gauravtiwari I'm receiving this error as well after upgrading to Rails 5.2. Our webpack configuration or version didn't change during the Rails upgrade. Everything is working in development mode and we only see this issue when running rails assets:precompile both locally and during a production deployment. If I run rails assets:precompile locally twice in a row, it fails the first time and succeeds the second time. I can consistently reproduce it locally with rm -rf public/packs && rails assets:precompile. We are not using Heroku, so that is one difference. Here are our details:

Error message

  01 ERROR in ./app/javascript/packs/activity/ActivityFeed.jsx
      01 Module build failed: ReferenceError: [BABEL] /home/deployer/sites/staging.lha-ignite/releases/20180412141715/app/javascript/packs/activity/ActivityFeed.jsx: Unknown option: /home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
      01 
      01 A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
      01 
      01 Invalid:
      01   `{ presets: [{option: value}] }`
      01 Valid:
      01   `{ presets: [['presetName', {option: value}]] }`
      01 
      01 For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/react/index.js")
      01     at Logger.error (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      01     at OptionManager.mergeOptions (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      01     at /home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      01     at /home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
      01     at Array.map (native)
      01     at OptionManager.resolvePresets (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      01     at OptionManager.mergePresets (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      01     at OptionManager.mergeOptions (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      01     at OptionManager.init (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      01     at File.initOptions (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/index.js:212:65)
      01     at new File (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/file/index.js:135:24)
      01     at Pipeline.transform (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      01     at transpile (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-loader/lib/index.js:50:20)
      01     at /home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-loader/lib/fs-cache.js:118:18
      01     at ReadFileContext.callback (/home/deployer/sites/staging.lha-ignite/releases/20180412141715/node_modules/babel-loader/lib/fs-cache.js:31:21)
      01     at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:367:13)

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }],
    "react",
    "es2015"
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ],

  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

package.json

  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.3",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-airbnb-base": "12.1.0",
    "eslint-plugin-dollar-sign": "^1.0.1",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "jest": "^22.4.3",
    "sass-lint": "^1.12.1",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "@rails/webpacker": "3.3.1",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "bower": "^1.8.4",
    "classnames": "^2.2.5",
    "immutability-helper": "^2.6.6",
    "local-time": "^2.0.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-portal": "^4.1.4",
    "react-responsive-modal": "^2.0.1",
    "react-select": "^1.2.1"
  }

[rcugut]

@codebycliff see @dmfrancisco comment above, that's the fix I had to do for my scenario:

Turned out to be a missing babel-preset-react in the dependencies list (in development it was working because I use storybook that installs the preset). The react installer added the react preset to the .babelrc file but it seems it didn't update my package.json accordingly.

So, because you reference thereact preset in your .babelrc, you need to put babel-preset-react in package.json, in the dependencies section. And it will work.

And if you would be deploying on heroku (like we do) you don't even need to add the nodejs buildpack (which takes a bit extra time during deploy to go through).

[codebycliff]

@rcugut Thank you. I had to move babel-preset-es2015 to the dependencies section as well. So it looks like any presets you use in production need to be under the dependencies section. However, I am still curious as to why this is now the case as of Rails 5.2? It works just fine in the devDependencies on Rails 5.1. Furthermore, the documentation for these presets still say to install under devDependencies.

@gauravtiwari Is this the intended behavior? Or just a workaround for the timebeing?

[gauravtiwari]

@codebycliff Yep that correct since webpacker depends on all these dependencies. Obviously, it doesn't directly use them in production code but to actually build the bundles in the production environment when deploying to Heroku or other environments. If you put any direct dependencies of webpacker inside dev dependencies yarn won't install them since on Heroku NODE_ENV is set to be production. I hope this makes sense.

The other way is to compile deps locally and then push them to production (if you want to keep them under dev dependencies section)

[gauravtiwari]

Out of the box webpacker installer installs these deps under dependencies section: https://github.com/rails/webpacker/blob/master/lib/install/react.rb#L29

[codebycliff]

Perfect. Thanks for your reply.