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.

Support es modules syntax in .config & webpack.config

See original GitHub issue

It seems as though babel isn’t working properly for me. Here’s my .babelrc file:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-runtime", "add-module-exports"],
  "env": {
    "development": {
      "plugins": [
        ["react-intl", {
          "messagesDir": "./build/messages/",
          "enforceDescriptions": false
        }]
      ]
    }
  }
}

and my .storybook/webpack.config.js file:

import config from '../config';
import base from '../build/webpack-environments/_base';

export default require(`../build/webpack-environments/${config.env}`)(base);

Error I’m seeing:

> start-storybook -p 9001

=> Loading custom .babelrc
.../.storybook/webpack.config.js:1
import config from '../config';
^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:54:16)
    at Module._compile (module.js:375:25)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
    at exports.default (.../node_modules/@kadira/storybook/dist/server/config.js:41:22)
    at Object.<anonymous> (.../node_modules/@kadira/storybook/dist/server/index.js:84:35)
    at Module._compile (module.js:399:26)

Issue Analytics

State:
Created 7 years ago
Comments:16 (8 by maintainers)

Top GitHub Comments

20reactions

loudwinstoncommented, May 26, 2016

My solution to this was use babel-register. I created 2 files, webpack.config.js and webpack.config.es6.js. webpack.config.js is responsible for loading babel-register then requiring webpack.config.es6.js.

webpack.config.js

require('babel-register');
module.exports = require('./webpack.config.es6.js');

webpack.config.es6.js

import config from '../config';
//whatever other es6 code you need
export default config;

7reactions

vvocommented, Dec 2, 2016

@arunoda webpack is able to either load webpack.config.babel.js if present (and will use .babelrc) or load webpack.config.js otherwise. Would you want to support this in storybook too?

Top Results From Across the Web

How can I use ES6 in webpack.config.js?

Webpack documentation says webpack.js.org/api/module-methods/#es6-recommended- ES6 syntax can be used without need of babel. Did anyone succeed using ES6 syntax ...

How to transpile ES modules with webpack and Node.js

Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.

Allow webpack.config.js to be written in ES6 · Issue #1403

Any plans for allowing the webpack.config.js to be written in ES6? For example, Gulp added support for a gulpfile.babel.js file with the ...

ECMAScript Modules

ECMAScript Modules (ESM) is a specification for using Modules in the Web. It's supported by all modern browsers and the recommended way of...

Module Methods

Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle...