question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Arrow function not getting transpiled inside node_modules

See original GitHub issue

Bug Report

Current behavior I am using a 3rd party library called joi-date as follows const joiDate = require(‘@hapi/joi-date’);

The issue is The arrow function used in @hapi/joi-date is not getting transpiled in IE11 due to which my app does not work in IE11. i attached the screenshot below. I am using babel7 and webpack4

Input Code

Here is my webpack config
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!.*hapi\/joi-date)/,
        loader: 'babel-loader',
      },
Tried using function version as well but did not help
        exclude: function(modulePath) {
          return /node_modules/.test(modulePath) &&
              !/node_modules\/@hapi\/joi-date/.test(modulePath);
        },


Expected behavior Babel-loader should convert the arrow function into es2015 style function

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: .babelrc
{
.babelrc entries
{
  "presets": [
    "@babel/env",
    "@babel/react",
    "@babel/preset-flow"
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  },
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": false,
        "regenerator": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@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",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ]
}
}

Environment


  • Babel version(s): 7.0.0
  • Node/npm version: 12.16.3
  • OS: OSX 10.13.4
  • Monorepo:No
  • How you are using Babel: loader

Additional context Screen Shot 2020-08-11 at 1 08 22 pm

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
JLHwungcommented, Nov 10, 2020

If you are running webpack on Windows, see also https://github.com/babel/babel-loader/pull/883/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R101 for how to include @hapi/joi-date but exclude all the other node_modules.

2reactions
AjayPoshakcommented, Oct 25, 2020

@brvenkat If you change your node_modules exclusion regex to exclude: [/node_modules\/(?!(@hapi\/joi-date|@hapi\/joi)\/).*/], then it would start transpiling these modules.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Babel not transpiling arrow functions (Webpack)
I think an issue is related to query-string because it's written in ES6 and not transpiled to ES5. Try to downgrade version from...
Read more >
Webpack 5 Beta + babel-loader: Why do I still have arrow ...
I dug through the v4 to v5 migration docs, forked babel-loader, migrated it to the latest API, then published it to npm with...
Read more >
babel/plugin-transform-arrow-functions
Wrap the generated function in .bind(this) and keeps uses of this inside the function as-is, instead of using a renamed this .
Read more >
babel-loader - npm
Some files in my node_modules are not transpiled for IE 11 ... Top level function (IIFE) is still arrow (on Webpack 5).
Read more >
Babel does not transpile a JSX instance of an arrow function ...
As another answer mentions, JSX syntax is usually used in situations like ReactDOM.render(...) where it can be unambiguously identified as an expression, so ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found