Storybook: Support es modules syntax in .config & webpack.config

Created on 2 May 2016 · 16Comments · Source: storybookjs/storybook

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)

babel / webpack feature request help wanted inactive

Source

jxodwyer

Most helpful comment

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;

loudwinston on 26 May 2016

👍19

All 16 comments

What's the node version you are running? I hope it's not 5.x.x
The file .storybook/webpack.config.js is not runs with a babel loader, so it uses the normal node binary.
You may need to use ES5 in that file.

Otherwise, use the latest node version.

arunoda on 2 May 2016

$ node -v
v5.2.0
$ npm -v
3.3.12

is this not compatible with 5.x.x? So eitherway I will have to stick to es5 in webpack.config.js?

jxodwyer on 2 May 2016

Hmm. That's weird.
Try using ES5 in the webpack.config.js.

This is the place which loads, babel config for client apps.

arunoda on 2 May 2016

@arunoda It would be nice to be able to use things like import and the destructuring operator in .storybook/webpack.config.js the same way you use it in server/config.js or server/webpack.config.js.
Is there any reason why can't we use Babel in .storybook/webpack.config.js?

moroshko on 6 May 2016

👍2

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;

loudwinston on 26 May 2016

👍19

@jxodwyer / @moroshko / @loudwinston - Rename webpack.config.js to webpack.config.babel.js and make sure your webpack (and/or webpack-dev-server) is updated to the latest version. It should obey your .babelrc file and allow ES2015 syntax once you do.

TigerC10 on 3 Jun 2016

❤1 😕1

@arunoda Does storybook automatically load webpack.config.babel.js? Seems like it does not, it only tries to read webpack.config.js

vvo on 2 Dec 2016

👍1

@vvo we only support .babelrc for the app project. Check here: https://getstorybook.io/docs/react-storybook/configurations/custom-babel-config

For the webpack config, we need to use ES5. (or something supported by your Node version).

arunoda on 2 Dec 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?

vvo on 2 Dec 2016

👍7

@vvo That's not in our plans yet. If we are going to do so, we'll do it for the webpack.config.js.

arunoda on 2 Dec 2016

😕3

A PR for this is very much welcome!

ndelangen on 7 Jul 2017

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

stale[bot] on 14 Nov 2017

Will be implemented in #1209

ndelangen on 15 Nov 2017

stale[bot] on 31 Dec 2017

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 15 Jan 2018

Hi, this issue is still a problem in my app. The webpack config is rather complex and need ES6 (coming from electron-react-boilerplate). Having a separate config causes discrepancies between Storybook and the app. What could be a possible solution in current Storybook version?

Edit: using @babel/register solves this issue for me.