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

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 18 (9 by maintainers)

Most upvoted comments

@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?

codebycliff on Apr 12, 2018

@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).

rcugut on Apr 12, 2018

@gauravtiwari

Success! 🥇

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.

serv on Oct 8, 2017

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 👏

dmfrancisco on Mar 7, 2018

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

gauravtiwari on Oct 8, 2017