Webpack 4 support? #3044
Comments
|
Storybook uses webpack as direct dependency. So you can't replace its version on your side. Instead, you can fork our repo and try to update corresponding packages to beta version. If things go well, we'll be able to do the upgrade as soon as it becomes stable |
|
Anyone doing this yet? |
|
I'll do that, and it will be a breaking change in storybook. The thing is that custom webpack configs may contain plugins, and plugins targeted for webpack 4 are most of the times (if not always) not backwards compatible with webpack 3 |
|
Great, thanks so much! |
|
Currently it's broken as even though storybook explicitly requires Now Now as soon as storybook loads |
|
I believe the above is caused by a bug in |
|
Checklist of things that block the migration on our side right now moved to #3148 |
|
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventing us proceeding with Webpack 4 |
|
You can subscribe to #3148 updates |
|
@TomFoyster I had the same issue, temporarily working around it with using |
|
Released as |
|
@Hypnosphi after updating to Before upgrading to the alpha build, I was running into @TomFoyster's issue. I can still get it to compile now by using |
|
Is @storybook/react deprecated because of @storybook/core now? @pollen8 |
|
We encountered the same problem that @TomFoyster mentions in #3044 (comment) when trying to use The somewhat ugly solution was to require Storybook's Webpack 3 dependency in // .storybook/webpack.config.js
const webpack = require('webpack');
// ^ Causes the TypeError: Cannot read property 'compilation' of undefined
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
// ^ Works (for us...) |
|
@hanshenrik -- Can you please show an example of a complete const path = require("path");
module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
require.resolve("awesome-typescript-loader"),
require.resolve("react-docgen-typescript-loader"),
],
},
{
test: /\.scss$/,
use: [
"style-loader", "css-loader", "sass-loader"
]
});
config.resolve.extensions.push(".ts", ".tsx");
return config;
}; |
|
@adyz Sure! const path = require('path');
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
module.exports = {
module: {
rules: [
// ...
],
},
plugins: [
new webpack.DefinePlugin({ // <-- Uses DefinePlugin from the imported webpack library
HELLO: 'world',
}),
],
resolve: {
// ...
},
};You should only need this if you need to use a plugin from the webpack library, though. We needed it to use the DefinePlugin. |
|
I'm running into the same issue around DefinePlugin, but my .storybook/webpack.config.js file remains devoid of any references to DefinePlugin, those references are only located in my main project's webpack.config.js. I'm unsure why Storybook would be accessing the main file when it has its own inside the .storybook folder. I've tried upgrading to the @storybook/react@alpha package and am seeing a massive list of other issues when attempting to start the server. One of the more interesting ones: I've verified that swapping the same project to Yarn allows everything to work with no issues. |
|
How would one go about applying this fix to a Vue-CLI 3 project? |
|
@davek1979 |
|
Yesterday I reverified the Yarn fix, then wiped out my node_modules folder and tried |
|
@anujparikh @pollen8 requiring our default config directly is deprecated, you should see a deprecation message when using it. The correct way is to use third argument: https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default @Melocaster no,
Can you please try it again with |
|
|
|
@nerdmax can you please provide some reproduction example? We use this plugin ourselves and it works for us |
|
@Hypnosphi Thank you for your response. I'm so sorry, I just checked, it's working fine with |
|
I was able to get this working after upgrading to |
|
I'm having the issue with the DefinePlugin problem as well. I've tried above recommended alpha fixes with no luck. I'm following this tutorial out of the box: https://www.valentinog.com/blog/react-webpack-babel/, which with the latest versions of all listed dependencies works fine.
I would love to give Storybook a try, but it looks like I'm thwarted by using the html-webpack-plugin in this instance. |
@ridhoq - can you share your Also, are you using npm or yarn? |
|
Sure - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. I don't know how helpful this will be for you as we may have different build requirements. I'm using npm for this project |
|
I had same issue after upgrading |
|
I created a working version with the following (latest) versions: added some Addon too, hope this example will help someone. |
@relaxed-tomato did you resolve this? I have the same issue. thanks |
Thanks, that did the trick for me. But I also had to install |
Same here. I had to use following babel core & loader versions: |
general setup: https://storybook.js.org/basics/guide-vue/ alpha fix: storybookjs/storybook#3044 multi stories: storybookjs/storybook#125
|
I accidentally run into this issue when I upgraded to the newest webpack. Version |
|
Got the error as well. Manually installing webpack 4.20.2 as mentioned above does the trick for now. |
and others
Webpack 4 is releasing in a couple days that could potentially speed up the build process.
Is storybook ready for webpack 4?
I tried to use the beta versions of ts-loader and webpack together with storybook but running into errors that most likely indicate storybook isn't compatible yet with the upcoming webpack 4.
The text was updated successfully, but these errors were encountered: