Webpacker: Module parse failed: Unexpected token error in webpacker 4.0

[s-daoud]

Hello! I'm getting this error trying to get a new app going:

Uncaught Error: Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type.
| 
| const App = () => (
>   <div>
|     <FactContainer />
|   </div>
    at Object../frontend/app.jsx (root-8a3f5067da70131b5f0b.js:207)
    at __webpack_require__ (root-8a3f5067da70131b5f0b.js:20)
    at Module../app/javascript/packs/root.jsx (root-8a3f5067da70131b5f0b.js:107)
    at __webpack_require__ (root-8a3f5067da70131b5f0b.js:20)
    at root-8a3f5067da70131b5f0b.js:84
    at root-8a3f5067da70131b5f0b.js:87

I saw some similar issues, but nothing in those fixed this issue.

Here's my setup:

package.json

{
  "name": "curiosity",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/preset-env": "^7.4.1",
    "@babel/preset-react": "^7.0.0",
    "@rails/webpacker": "^4.0.2",
    "apollo-boost": "^0.3.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "lodash": "^4.17.11",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-apollo": "^2.5.2",
    "react-dom": "^16.8.4",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "rest": "^2.0.0",
    "webpack": "^4.29.6"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.2.1"
  }
}

babel.config.js

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        require('@babel/preset-env').default,
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      [
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true
        }
      ],
      [
        require('@babel/plugin-transform-regenerator').default,
        {
          async: false
        }
      ],
      isProductionEnv && [
        require('babel-plugin-transform-react-remove-prop-types').default,
        {
          removeImport: true
        }
      ]
    ].filter(Boolean)
  }
}

The file in question:

import React from 'react';

import FactContainer from './components/facts/FactContainer';

const App = () => (
  <div>
    <FactContainer />
  </div>
);

export default App;

Taking out the divs and directly returning <FactContainer /> just causes the error to throw once it sees a div in the component, but that means it is reading some of the jsx to some extent? I'm pretty stumped at this point.

Thanks for your help!

[JWesorick]

Just a guess. Remove "webpack" from your package.json. It's already a dependency of @rails/webpacker.

[JWesorick]

Maybe also make sure you don't have a .babelrc file.

[jakeNiemiec]

Try this first: "@babel/core": "^7.0.0-0" does not apear to be valid. To fix: yarn add @babel/core@^7 That should give you @babel/[email protected]

@s-daoud It looks like your JSX is not being transformed, without knowing more info it could be related to useBuiltIns.

Try and change this:

      [
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true // Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.
        }
      ]

into this:

    [
      "@babel/preset-react",
      {
        development: isDevelopmentEnv || isTestEnv
      },
    ],

@JWesorick You always want to have webpack as a dependency. If you rely on implicit sub-dependancies, you are subjecting yourself to a bunch of nasty edge cases...esp if you are transforming JSX/Typescript/CoffeeScript. This is why peerDependencies are a thing.

[zedtux]

Adding the @babel/preset-react dependency the way @jakeNiemiec suggested solved the issue.

[jakeNiemiec]

https://github.com/rails/webpacker/pull/2060 was merged, so we should see less of this problem.

[zedtux]

Sorry I don't understand why #2060 would solve this issue @jakeNiemiec ?

[jakeNiemiec]

Files will be generated in a way that respects babel name resolution. Now that I read again, I see that you were probably referring to the useBuiltIns part.