CODEWITHSUNDEEP
reactjswebpackbabeljswebpack-2native-module
jasan
jasan

Reputation: 12927

implementing Tree shaking in webpack 2 causing error

I recently refactored my app to work with webpack v2. After running webpack -p I noticed My build size actually increased by ~32kb. I assume it wasn't implementing tree shaking. Thus In my .babelrc file I changed this code:

  "presets": [
    "react",
    "es2015",
    "stage-0",
  ]

to ==>

  "presets": [
    ["es2015", { "modules": false }],
    "react",
     "stage-0",
  ]

But Now I'm getting the following error:

> webpack -p

C:\Users\jasan\Downloads\app\webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack fro
m 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (C:\Users\jasan\Downloads\app\node_modules\babel-register\lib\n
ode.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\jasan\D
ownloads\app\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (C:\Users\jasan\Downloads\app\node_modules\webpack\bin\c
onvert-argv.js:96:18)

Upvotes: 1

Views: 285

Answers (2)

gray.songs.Benson
gray.songs.Benson

Reputation: 26

in webpack.config.js

use const webpack = require('webpack');

instead of

import webpack from 'webpack';

Upvotes: 0

uladzimir
uladzimir

Reputation: 5689

The problem is that when webpack sees webpack.config.babel.js, it tries to use .babelrc with preset es2015 and "modules": false, that means that it leaves import/export statements as it is. But node.js can't understand such syntax so you have to provide CommonJS modules for node.

One of the possible solutions is to move configuration from .babelrc to webpack-loader directly with query param

module: {
  loaders: [
    { test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", 
      query: {
        "presets": [
          "react",
          ["es2015", { "modules": false }],
          "stage-0"
         ]
      }    
    }
  ]
}

and in .babelrc leave just plugin for converting imports to CommonJS:

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

Don't forget to add necessary plugin to package.json

"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0"

For details please, check this issue as well https://github.com/webpack/webpack/issues/1403

Upvotes: 1

Related Questions