Webpacker: Jest unexpected token import

[jbernardo95]

Hi !

I just upgraded one of my applications to webpacker 2.0 and everything went smoothly until I reached the part of running my frontend tests.

I was getting a unexpected token import when running jest due to the fact the the env config in .babelrc disables module transformation "modules": false.

To go around this I had to set a specific config in .babelrc just for the test environment.

I was wondering if it is possible to move all the env configuration to the config/webpack/loaders/babel.js ? Similar to this:

// config/webpack/loaders/babel.js

module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }]
    ]
  }
}

I would be happy to open a PR if this makes sense :)

Thanks !

[gauravtiwari]

@jbernardo95 Hey, that's strange because jest recommends using .babelrc - http://facebook.github.io/jest/docs/getting-started.html#babel-integration.

Could this be related to? - https://github.com/facebook/jest/issues/3129

[jbernardo95]

Maybe I didn't express myself correctly.

With the generated .babelrc jest fails because the modules are disabled in all envs.

But If change the generated .babelrc to actually enable modules in the test env only, everything works, no problem.

The problem with this is that my .babelrc looks like this now (not very pretty):

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

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

  "env": {
    "test": {
      "presets": [
        ["env", {
          "targets": {
            "browsers": "> 1%",
            "uglify": true
          },
          "useBuiltIns": true
        }]
      ]
    }
  }
}

So my suggestion is to leave the the .babelrc as generic as possible as before, and move the babel configurations to the babel-loader config.

But I am not sure if there are any special reasons to have the configurations at the .babelrc.

What do you think ?

[gauravtiwari]

Ahh I see @jbernardo95

Basically, the reason why it's moved out to .babelrc was that it's a standard practice across frontend projects and secondly because we are using babel-loader for other frameworks too and a common .babelrc works for all of them. If we have some options in loader, .babelrc is simply ignored. Please see this issue - #202

I see that there is bit of duplication there but given that's how env specific configuration works it's not too bad 😄 If you get any ideas that might fix this, please feel free to share it here 👍

[gauravtiwari]

I will document this in README for now.

[jbernardo95]

@gauravtiwari Got it !

Well I understand the move to .babelrc, and if it works for all the frameworks you support that is nice.

But don't think this is correct. From my understanding .babelrc should be generic file, because it id used by several components/packages. In my case webpack and jest. If your .babelrc config is specific to webpack, there will be problems when working with other components/packages, like I had when jest used the .babelrc.

Of course jest is a testing dependency, and you can go around that with test env specific configurations, but I can see this same problem with non testing dependencies.

A way to fix this would be to move these configurations to the loaders which is more generic but adds code duplication or to wrap the current .babelrc configurations in something like:

{
  "env": {
    "production,development": { // <- not sure if this is possible
      // Current .babelrc config
    }
  }
}

I personally prefer them in the loaders, even thought they are repeated.

But again if the objective of the gem is to support only those frameworks, the current implementation is fine.

Tell me what you think. And correct me if I am wrong :)

[renchap]

I am also using Jest and have a special test env config in my .babelrc for the same reason.
Maybe there is a way to tell babel-jest to override presets.env.modules? So it will use the common .babelrc for everything else, and tell Babel to transforme modules when compiling for Jest?

[p0wl]

Have you seen this: http://facebook.github.io/jest/docs/webpack.html#using-with-webpack-2 ?

Our .babelrc looks like this:

{
  "presets": [
    "react",
    [ "env",
      {
        "modules": false,
        "targets": {
          "android": 4.4,
          "ios": 9,
          "browsers": [ "> 1%", "last 2 versions" ]
        },
        "useBuiltIns": true
      }
    ]
  ],
  "plugins": [
    "transform-object-rest-spread"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

[jbernardo95]

@p0wl Thank you very much for the info, I had no idea webpack 2 had native support for ES modules.

I guess this justifies it, because jest will be kind of an exception.

@gauravtiwari Will close the issue.

[sdellis]

@jbernardo95 I'm running into this issue and having a hard time interpreting this solution. Is the recommendation here to add a custom test env in babel.rc or in the config/webpack/environment.js? Neither seem to work for me, but it would help me debug if I can narrow it down.

[jbernardo95]

I'm not familiarised with this anymore, but I believe @p0wl's comment has the solution.

Take a look at: http://facebook.github.io/jest/docs/en/webpack.html#using-with-webpack-2

[Petercopter]

Adding

"env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  },

as suggested by @jbernardo95
Fixed

    SyntaxError: Unexpected token *

For me. On to the next adventure!