Support es modules syntax in .config & webpack.config

[jxodwyer]

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)

[arunoda]

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.

[jxodwyer]

$ 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?

[arunoda]

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

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

[moroshko]

@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?

[loudwinston]

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;

[TigerC10]

@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.

[vvo]

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

[arunoda]

@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).

[vvo]

@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?

[arunoda]

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

[ndelangen]

A PR for this is very much welcome!

[stale]

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!

[ndelangen]

Will be implemented in #1209

[stale]

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]

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!

[eric-burel]

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.