CODEWITHSUNDEEP
javascriptwebpackbabeljs
Kiran Mohan
Kiran Mohan

Reputation: 3016

webpack: how to transpile code in node_modules

I want to import nano-memoize in my web application that uses Typescript and Webpack to transpile to ES5.

These steps do not work in IE 11. The page simply doesn't load.

On inspecting the code for nano-memoize/browser/nano-memoize.js in IE 11 developer console, I noticed it uses arrow function. If I copy nano-memoize/browser/nano-memoize.js directly to my source folder, they get transpiled to ES5 and everything works in IE 11 too.

So why is nano-memoize/browser/nano-memoize.js not getting transpiled?

Build setup: 

webpack                   : ^4.40.2,
@babel/core               : ^7.4.0,
awesome-typescript-loader : ^5.2.1,

UPDATE:
This was a webpack configuration issue where the node_modules are excluded from compilation. The skeleton setup is created by a script and my bad I never check this. The following in webpack.config.js for babel-loader can selectively compile the required node_modules. Replace with required module name.

{
  test: /\.js$/,
  exclude: function(modulePath) {
    return /node_modules/.test(modulePath) &&
        !/node_modules\/<MY_MODULE>/.test(modulePath);
  }
}

Upvotes: 4

Views: 1935

Answers (1)

Sukesh Hublikar
Sukesh Hublikar

Reputation: 116

Try it by using polyfills in your project , Below is the script tag to import in your index.html file <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>

Upvotes: -2

Related Questions