Asset compilation error during heroku deployment, webpacker 3, react 16 #915

serv · 2017-10-08T20:55:57Z

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

The text was updated successfully, but these errors were encountered:

gauravtiwari · 2017-10-08T21:41:46Z

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

gauravtiwari · 2017-10-08T21:43:35Z

Could you please paste the content please?

serv · 2017-10-08T21:47:40Z

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 · 2017-10-08T21:49:09Z

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

serv · 2017-10-08T21:50:42Z

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 · 2017-10-08T21:52:47Z

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 · 2017-10-08T21:52:54Z

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

gauravtiwari · 2017-10-08T21:53:34Z

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 · 2017-10-08T21:54:33Z

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

serv · 2017-10-08T22:15:41Z

@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 Heroku and webpacker v3.0.0 #739. Not sure adding buildpacks helped or not, but I followed Heroku and webpacker v3.0.0 #739 (comment) suggestion.

Closing this issue now. Thanks again.

dmfrancisco · 2018-03-07T15:11:56Z

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 · 2018-04-11T22:08:18Z

@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 · 2018-04-12T15:15:55Z

@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 · 2018-04-12T15:24:26Z

@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 · 2018-04-12T15:42:19Z

@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 · 2018-04-12T18:05:48Z

@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 · 2018-04-12T18:06:29Z

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 · 2018-04-12T18:08:08Z

Perfect. Thanks for your reply.

serv mentioned this issue Oct 8, 2017

Cannot find module 'extract-text-webpack-plugin' while deploy to Heroku #907

Closed

serv closed this as completed Oct 8, 2017

reconstructions mentioned this issue Dec 24, 2017

Heroku deployment fails with rake task error starting in commit #421 shakacode/react-webpack-rails-tutorial#429

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Asset compilation error during heroku deployment, webpacker 3, react 16 #915

Asset compilation error during heroku deployment, webpacker 3, react 16 #915

serv commented Oct 8, 2017 •

edited

Loading

gauravtiwari commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

dmfrancisco commented Mar 7, 2018

rcugut commented Apr 11, 2018

codebycliff commented Apr 12, 2018

rcugut commented Apr 12, 2018 •

edited

Loading

codebycliff commented Apr 12, 2018

gauravtiwari commented Apr 12, 2018

gauravtiwari commented Apr 12, 2018

codebycliff commented Apr 12, 2018

Asset compilation error during heroku deployment, webpacker 3, react 16 #915

Asset compilation error during heroku deployment, webpacker 3, react 16 #915

Comments

serv commented Oct 8, 2017 • edited Loading

gauravtiwari commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

gauravtiwari commented Oct 8, 2017

serv commented Oct 8, 2017

dmfrancisco commented Mar 7, 2018

rcugut commented Apr 11, 2018

codebycliff commented Apr 12, 2018

Error message

.babelrc

package.json

rcugut commented Apr 12, 2018 • edited Loading

codebycliff commented Apr 12, 2018

gauravtiwari commented Apr 12, 2018

gauravtiwari commented Apr 12, 2018

codebycliff commented Apr 12, 2018

serv commented Oct 8, 2017 •

edited

Loading

rcugut commented Apr 12, 2018 •

edited

Loading