Storybook: Webpack 4 + Babel 7 support
I have a running React + Webpack + Babel application running fine with the current config:
"@babel/cli": "^7.0.0-beta.49"
"@babel/core": "^7.0.0-beta.51",
"webpack": "^4.12.0",
According to https://github.com/storybooks/storybook/issues/3044 I've tried to use @storybook/cli@alpha (now mirroring to ^4.0.0-alpha.10) and I'm getting this error:
ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/env" relative to directory "<appDir>/.storybook"
at <appDir>/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
My steps were:
npm i -g @storybook/cli@^4.0.0-alpha.10
getstorybook
yarn storybook
Is there any dependency inside @storybook/cook that refers babel v6.0? Can you maybe guide me to fix this? I'd love to submit a PR.
hugomn
All 24 comments
I also couldn't run Storybook with Babel 7.
I will be subscribing to this thread for news :)
thanks!
pedroteixeira
on 3 Jul 2018
Hi @pedroteixeira! I solved the issue reverting storybook local babel to version 6. To do that, I just created a .babelrc file inside .storybook folder:
{
"presets": ["env", "stage-0", "react"]
}
We still don't have a solution for webpack 4 + babel 7. But this solution works for now. Hope it helps.
hugomn
on 3 Jul 2018
Thanks for the tip @hugomn - I'll give it a try this week!
pedroteixeira
on 4 Jul 2018
Do you use [email protected]?
Hypnosphi
on 4 Jul 2018
I wanted to use babel 7 plugins and presets.
To get storybook to use babel 7 you can use a yarn alias.
yarn add -D babel-core@npm:@babel/core
Adds to package.json
...
"babel-core": "npm:@babel/core",
...
DylanVann
on 23 Jul 2018
Any idea on when Babel 7 will be pulled in to storybooks?
matthewharwood
on 26 Jul 2018
@DylanVann actually, 'babel-bridge' does exactly that, it proxies babel-core imports to @babel-core
Hypnosphi
on 2 Aug 2018
@matthewharwood if your question is when we'll use it by default, then not sooner than when it becomes stable, see https://github.com/storybooks/storybook/pull/3746#issuecomment-406782129
Hypnosphi
on 2 Aug 2018
@Hypnosphi Is there a guide anywhere about using Babel 7 with Storybook? If not, it might be useful to add to the README — I've done a lot of this stuff and am still not entirely sure the best path moving forward to using the latest Babel betas.
aendrew
on 9 Aug 2018
@aendrew it would help me too 😄
I'm using Vue.js and since I can't custom the webpack.config.js I'm looking for a working way to make Storybook working. By the way I tried babel-core@bridge... but never succeeded ðŸ˜
sneko
on 9 Aug 2018
@aendrew @sneko In my gatsby-storybook-jest-starter repo I have outlined a very basic configuration for making Storybook use Babel 7 that you can find here:
https://github.com/Mathspy/gatsby-storybook-jest-starter/blob/master/.storybook/webpack.config.js
A more stripped down version would look something like:
module.exports = (baseConfig, env, defaultConfig) => {
// make sure you have babel-loader@8 installed and @babel/core@7
defaultConfig.module.rules[0].use[0].loader = require.resolve('babel-loader')
// This reflect what presets you want webpack's babel loader to go through while transpiling your code
// use @babel/preset-react for JSX and env (instead of staged presets)
defaultConfig.module.rules[0].use[0].options.presets = [
require.resolve('@babel/preset-react'),
require.resolve('@babel/preset-env'),
]
// This reflect what plugins you want webpack's babel loader to go through while transpiling your code
// use @babel/plugin-proposal-class-properties for class arrow functions
defaultConfig.module.rules[0].use[0].options.plugins = [
require.resolve('@babel/plugin-proposal-class-properties'),
]
return defaultConfig
}
Hope this helps and feel free to ask me if anything isn't clear enough or if something doesn't work :heart:
Mathspy
on 9 Aug 2018
This works for me as well:
module.exports = {
module: {
rules: [
test: /\.js$/,
use: 'babel-loader' // make sure you have babel-loader@8 installed and @babel/core@7
]
}
}
I use babel.config.js instead of .babelrc. babelrc.js also works
Hypnosphi
on 9 Aug 2018
@Mathspy I tried your solution but I have this error when I start Storybook :
> [email protected] storybook /Users/administrateur/asi/AndrossApp
> storybook start -p 7007
=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
/Users/administrateur/asi/AndrossApp/storybook/webpack.config.js:3
defaultConfig.module.rules[0].use[0].loader = require.resolve("babel-loader");
^
TypeError: Cannot read property '0' of undefined
at module.exports (/Users/administrateur/asi/AndrossApp/storybook/webpack.config.js:3:36)
at exports.default (/Users/administrateur/asi/AndrossApp/node_modules/@storybook/react-native/dist/server/config.js:80:12)
at exports.default (/Users/administrateur/asi/AndrossApp/node_modules/@storybook/react-native/dist/server/middleware.js:21:37)
at new Server (/Users/administrateur/asi/AndrossApp/node_modules/@storybook/react-native/dist/server/index.js:46:50)
at Object.<anonymous> (/Users/administrateur/asi/AndrossApp/node_modules/@storybook/react-native/dist/bin/storybook-start.js:34:14)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
I use Storybook in a React Native project I am trying to upgrade to RN 0.56.0 and so Babel 7.
My Storybook and Babel dependencies in package.json:
"dependencies": {
"react": "16.4.1",
"react-native": "0.56.0",
},
"devDependencies": {
"@babel/core": "7.0.0-rc.1",
"@babel/plugin-proposal-class-properties": "7.0.0-rc.1",
"@babel/preset-env": "7.0.0-rc.1",
"@storybook/addon-storyshots": "4.0.0-alpha.16",
"@storybook/addons": "4.0.0-alpha.16",
"@storybook/channels": "4.0.0-alpha.16",
"@storybook/react-native": "4.0.0-alpha.16",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "7.1.1",
"babel-jest": "23.4.2",
"babel-loader": "8.0.0-beta.4",
"babel-plugin-ignite-ignore-reactotron": "^0.3.0",
"babel-preset-react-native": "5.0.2",
},
Any idea where it could come from ?
chawax
on 12 Aug 2018
@chawax I did some digging around and if I am not mistaken you should use this line instead:
defaultConfig.module.rules[0].loader = require.resolve('babel-loader')
do note however that the rest of the lines were ReactDOM specific and I think you actually don't need any of them IF you're using CRNA so you might be good with just:
module.exports = (baseConfig, env, defaultConfig) => {
// the configuration doesn't have the "use" array for React-Native for some reason
defaultConfig.module.rules[0].loader = require.resolve('babel-loader')
return defaultConfig
}
Thanks a lot @Mathspy for your help, it solved this error. But it looks like your solution doesn't work with React Native since I have the same error I had before :( Migration to Babel 7 is really a pain !
> [email protected] storybook /Users/administrateur/asi/AndrossApp
> storybook start -p 7007
=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
Scanning folders for symlinks in /Users/administrateur/asi/AndrossApp/node_modules (19ms)
React Native Storybook started on => http://localhost:7007/
webpack built 68d7e9d27300f998ce2c in 5237ms
✖ ｢wdm｣: Hash: 68d7e9d27300f998ce2c
Version: webpack 4.16.5
Time: 5237ms
Built at: 2018-08-13 09:00:21
Asset Size Chunks Chunk Names
static/manager.bundle.js 6.18 MiB manager [emitted] manager
index.html 637 bytes [emitted]
Entrypoint manager = static/manager.bundle.js
[./node_modules/@storybook/channel-websocket/dist/index.js] 2.76 KiB {manager} [built]
[./node_modules/@storybook/core-events/index.js] 412 bytes {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/index.js] 511 bytes {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/provider.js] 4.24 KiB {manager} [built]
[./node_modules/@storybook/ui/dist/index.js] 2.38 KiB {manager} [built]
[./node_modules/@storybook/ui/dist/modules/ui/index.js] 1010 bytes {manager} [built]
[./node_modules/babel-runtime/helpers/classCallCheck.js] 208 bytes {manager} [built]
[./node_modules/babel-runtime/helpers/extends.js] 544 bytes {manager} [built]
[./node_modules/babel-runtime/helpers/inherits.js] 1.08 KiB {manager} [built]
[./node_modules/babel-runtime/helpers/possibleConstructorReturn.js] 542 bytes {manager} [built]
[./node_modules/global/window.js] 232 bytes {manager} [built]
[./node_modules/react/index.js] 190 bytes {manager} [built]
[0] multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js 40 bytes {manager} [built]
[./node_modules/uuid/index.js] 120 bytes {manager} [built]
[./storybook/addons.js] 1.36 KiB {manager} [built] [failed] [1 error]
+ 576 hidden modules
ERROR in ./storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/administrateur/asi/AndrossApp/node_modules/babel-preset-react/lib/index.js
at createDescriptor (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:138:11)
at items.map (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
at createPresetDescriptors (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:61:10)
at passPerPreset (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:53:96)
at cachedFunction (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/caching.js:32:19)
at presets.presets (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:25:30)
at mergeChainOpts (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-chain.js:303:26)
at /Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-chain.js:266:7
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js manager[0]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.38 MiB 0
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/src/server/index.html.ejs] 926 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.
I got them to run here.
https://github.com/ritz078/react-typescript-component-starter-kit
ritz078
on 16 Aug 2018
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 30 days. Thanks!
![stale[bot] picture](https://avatars3.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 6 Sep 2018
up
tomasztomys
on 13 Sep 2018
Webpack 4 + Babel 7 Is fully supported in current alpha. Here's the issue for support of React Native 0.56
https://github.com/storybooks/storybook/issues/4011
Hypnosphi
on 13 Sep 2018
Hey guys,
sorry to barge in, but I'm having the same issue and was wondering how I can use the alpha in order to test if it would fix my build
RomainGoncalves
on 30 Sep 2018
You need to change all the @storybook/* packages versions to latest alpha (today it's 4.0.0-alpha.23), and probably apply something from Migration Guide
Hypnosphi
on 30 Sep 2018
Does storybook look for a babel.config.js file? or is it still just .babelrc?
carrickjason
on 29 Nov 2018
@carrickjason I am currently using a babel.config.js and it works
hipstersmoothie
on 30 Nov 2018
@hipstersmoothie Nice, thanks. Works for me too. The docs still say it looks for .babelrc so i was curious.
carrickjason
on 30 Nov 2018
Related issues
tlrobinson
·
3Comments
MrOrz
·
3Comments
tirli
·
3Comments
alexanbj
·
3Comments
purplecones
·
3Comments
Most helpful comment
@aendrew @sneko In my gatsby-storybook-jest-starter repo I have outlined a very basic configuration for making Storybook use Babel 7 that you can find here:
https://github.com/Mathspy/gatsby-storybook-jest-starter/blob/master/.storybook/webpack.config.js
A more stripped down version would look something like:
Hope this helps and feel free to ask me if anything isn't clear enough or if something doesn't work :heart: