For the browser (i.e. when the output of Babel is further processed by Webpack), you have to use the es2015 Babel preset and not the es2016 one (at least for the time of this writing, July 2016). It is obvious now but lost a couple of hours hunting the following misleading message:
Error: Cannot find module 'babel-plugin-syntax-exponentiation-operator' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.(/home/mperdikeas/js-react-fixed-data-table-wrapper/node_modules/babel-preset-es2016/index.js:3:5) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17)
The crux of the matter is that the code that get's generated for the es2016 preset uses import
statements that cannot be bundled by Webpack. In contrast, the code generated by the es2015 preset
uses require
statements which (apparently) can be bundled.
The above is clearly shown in the following diff where the code generated with the es2016 preset is shown on the left-hand side and the code generated with the es2015 preset is shown on the right:
I effected the following changes in my package.json and .babelrc files in order to use the es2015 preset:
diff --git a/.babelrc b/.babelrc index 5783ec8..77c6202 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { - "presets": ["es2016", "react"], + "presets": ["es2015", "react"], "plugins": ["transform-object-rest-spread"] }
diff --git a/package.json b/package.json index 104cfbd..f0cab29 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,11 @@ "author": "Menelaus Perdikeas", "license": "ISC", "devDependencies": { "babel-core": "^6.7.4", "babel-loader": "^6.2.4", - "babel-preset-es2016": "^6.0.10", + "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "babel-runtime": "^6.6.1", "css-loader": "^0.23.1",