New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@babel/plugin-transform-arrow-functions not working in webpack #9300

Closed
ryanhugh opened this Issue Jan 8, 2019 · 8 comments

Comments

Projects
None yet
4 participants
@ryanhugh
Copy link

ryanhugh commented Jan 8, 2019

Bug Report

Current Behavior
A clear and concise description of the behavior.

@babel/plugin-transform-arrow-functions is not transforming arrow functions when used with webpack (babel-loader). This causes the output JS to crash in IE11 (which doesn't support arrow functions).

For example, I can use the following command:

babel --plugins  @babel/plugin-transform-arrow-functions src -d dist

On a specific file and it will transform all the arrow functions. However, when I use this babel plugin with babel-loader in webpack, it doesn't transform any arrow functions. I have the following in my package.json:

{
  ...
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-transform-arrow-functions",
        {
          "spec": false
        }
      ],
      "@babel/plugin-proposal-class-properties",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "@babel/plugin-proposal-object-rest-spread",
      "react-hot-loader/babel",
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-syntax-import-meta",
      "@babel/plugin-proposal-json-strings",
      "@babel/plugin-proposal-function-sent",
      "@babel/plugin-proposal-export-namespace-from",
      "@babel/plugin-proposal-numeric-separator",
      "@babel/plugin-proposal-throw-expressions",
      "@babel/plugin-proposal-export-default-from",
      "@babel/plugin-proposal-logical-assignment-operators"
    ]
  },
  ...
}

And the following in my webpack.config.babel.js:

const rootDir = // the folder with package.json in it (the root of the project). 
{
...
 module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(rootDir, 'frontend'), path.join(rootDir, 'common')],
        options: {
          cacheDirectory: true,
        },
        ...
      }
  ...
  }

When I run

babel-node ./node_modules/webpack/bin/webpack.js --config ./backend/webpack.config.babel.js

a dist/0-xxxxxxxxxx.js is built, but it contains arrow functions. I have also tried adding path.join(rootDir, 'node_modules') to the include option in the webpack.config.babel.js and it had no changes. I've also tried moving the babel config to .babelrc and it had no affect.

Here is an example of the output of this build setup. This output contains arrow functions (=>): https://searchneu.com/0-de8b01ed97dd5b5e30ea.js

You can find the full repository here (master branch): https://github.com/ryanhugh/searchneu. If you want to get the repo working on your computer just run yarn;yarn build

Please let me know if you have any more questions. Also, if you have any leads that I could look into that might help that would be great too.

Environment

  • Babel version(s): ^7.2.3
  • Node/npm version: v11.5.0
  • OS: OSX 10.14.2
  • Monorepo: yes?
  • How you are using Babel: babel-loader
@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Jan 8, 2019

Hey @ryanhugh! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Jan 8, 2019

Do the other plugins work? What is the path of the original file which isn't correctly transpiled?

@ryanhugh

This comment has been minimized.

Copy link

ryanhugh commented Jan 11, 2019

It appears that other plugins do work (@babel/plugin-proposal-function-sent
appears to be working). A bunch of files that have arrow functions in them aren't being transpiled correctly - files both inside and outside of node_modules.

@ryanhugh

This comment has been minimized.

Copy link

ryanhugh commented Jan 11, 2019

One example in searchneu/backend/macros.js:

in the source code we have this code:

return amplitude.track(data).catch((error) => {
   Macros.warn('error Logging amplitude event failed:', error);
});

which is compiled to this (note the arrow function):

return b.track(n).catch(e=>{_.warn("error Logging amplitude event failed:",e)})}
@ryanhugh

This comment has been minimized.

Copy link

ryanhugh commented Jan 15, 2019

I’ve spent some time trying to debug this and haven’t found a specific cause yet. One interesting thing I tried is I copied the package.json (which includes the Babel config) and the webpack config to another, smaller project. The problem didn’t show up in the smaller project.

@hzoo

This comment has been minimized.

Copy link
Member

hzoo commented Jan 15, 2019

I ran the repo with your instructions and do not get the arrow functions in the output (specifically for the macros part .catch(function (error) {.

Maybe it's a caching thing? Try deleting node_modules/.cache or the dist folder again.

Also including the arrow functions plugin specifically is not necessary, it's already in preset-env. You only need the plugins that are proposals/experimental (same with "@babel/plugin-proposal-object-rest-spread"). And preset-env can just be a devDependency

    "plugins": [
      [
        "@babel/plugin-transform-arrow-functions",
        {
          "spec": false
        }
      ],
@ryanhugh

This comment has been minimized.

Copy link

ryanhugh commented Jan 15, 2019

Just ran yarn cache clean and cloned the repo from scratch and am still seeing this in the newly cloned repo. The webpack output is in searchneu/public/0-a74e206c7d6c77c29f8f.js btw.

Here's the list of installed packages, and which version they are at:
installed_packages.log

Thanks! I'll make those changes.

@ryanhugh

This comment has been minimized.

Copy link

ryanhugh commented Jan 15, 2019

Fixed it!

I had 1 dynamic require in the codebase (that was supposed to be ignored by webpack). Webpack was compiling in this file, which was pulling in a bunch of modules that are made for only node (and not the browser). I fixed this and now all the arrow functions are correctly compiled. Not sure why these are related.

Was able to figure out that this was the cause by deleting huge chunks of the codebase and checking if the arrow functions were still present in the output.

ryanhugh/searchneu@c536b97...147ced8

I'll close this issue for now - if anyone wants to keep it open just let me know. :)

@ryanhugh ryanhugh closed this Jan 15, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment