Fixed regression: CSS entries were not picked up for storybook pages (e.g. when using exract-text-webpack-plugin) #1363
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1363 +/- ##
==========================================
+ Coverage 14.1% 14.35% +0.25%
==========================================
Files 201 201
Lines 4609 4611 +2
Branches 502 500 -2
==========================================
+ Hits 650 662 +12
+ Misses 3521 3520 -1
+ Partials 438 429 -9
Continue to review full report at Codecov.
|
|
@shilman I assigned you, as you seem to be quite active these days :-) Let me know if anything is unclear! Hoping to get the fix for this regression in asap to de-confuse our |
|
@usulpro I saw you were last active, would you mind having a look? I am blocked by this, but need a second pair of eyes on it :) |
| @@ -8,7 +8,7 @@ import url from 'url'; | |||
| // 'preview.0d2d3d845f78399fd6d5e859daa152a9.css', | |||
| // 'static/preview.9adbb5ef965106be1cc3.bundle.js.map', | |||
| // 'preview.0d2d3d845f78399fd6d5e859daa152a9.css.map' ] | |||
| const urlsFromAssets = assets => { | |||
| export const urlsFromAssets = assets => { | |||
There was a problem hiding this comment.
who uses this? does it need to be exported?
There was a problem hiding this comment.
Only the tests, but for those it needs to be exported, yes.
app/react/src/server/iframe.html.js
Outdated
| } | ||
| assetList.filter(u => re.exec(u)[1] !== 'map').forEach(u => { |
joscha
changed the title
|
Tested in |
|
@joscha do you happen to have a sample project you could point to? I'm on 3.1.7 and can't for the life of me get webpack to actually generate the CSS file. We haven't hit any issues with extract-text-plugin in other projects so I'm wondering if there's a storybook-specific step I'm missing here. |
|
@danielmcgrath we use extension mode (e.g. we have an additional const extractCSS = new ExtractTextPlugin({
// The filename does not contain a hash in dev and local such that conf/head.html used by
// Storybook can refer directly to the static filename in Storybook.
filename: options.hashOutputFileNames ? '[name].[contenthash].css' : '[name].css',
allChunks: true,
ignoreOrder: true,
});
// ...
plugins: [
extractCSS
]that's all that is needed for a |
|
Hi, @joscha , We very love storybook. But we got the error: My custorm webconfig is: rules: [
{
// use sass-loader for *.sass files
test: /\.sass/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: `css-loader?modules&localIdentName=${ __DEV__ ? '[path][name]__[local]--[hash:base64:5]' : '[hash:base64]' }`,
},
{
loader: 'postcss-loader',
options: {
plugins: [
precss,
autoprefixer
]
}
},
{
loader: "sass-loader",
},
],
}),
exclude: /node_modules/
},
]Any ideas, please |
|
You need to add it to the `plugins` array as well.
…On 30 Jun. 2017 13:26, "Nixon" ***@***.***> wrote:
Hi, @joscha <https://github.com/joscha> , We very love storybook. But we
got the error:
ERROR in ./src/core/view/style.sass
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (/Users/qiuwei/Workspace/rongcaptial-ui/node_modules/extract-text-webpack-plugin/loader.js:25:9)
@ ./src/core/view/index.js 33:13-36
@ ./src/core/index.js
@ ./stories/view.story.js
@ ./build/config.js
@ multi .***@***.***/react/dist/server/config/polyfills.js .***@***.***/react/dist/server/config/globals.js ./~/webpack-hot-middleware/client.js?reload=true ./build/config.js
My custorm webconfig is:
rules: [
{
// use sass-loader for *.sass files
test: /\.sass/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: `css-loader?modules&localIdentName=${ __DEV__ ? '[path][name]__[local]--[hash:base64:5]' : '[hash:base64]' }`,
},
{
loader: 'postcss-loader',
options: {
plugins: [
precss,
autoprefixer
]
}
},
{
loader: "sass-loader",
},
],
}),
exclude: /node_modules/
},
]
***@***.***/react": "^3.1.7", from [here](https://storybook.js.org/basics/slow-start-guide/)
"webpack": "2.2.0",
"webpack-merge": "^4.1.0",
Any ideas, please
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1363 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AALehr8UKS_TD8U5gIak-roW0lkufxcNks5sJNuAgaJpZM4OGBWL>
.
|
|
@joscha Yes, you are right. I forgot it. It works now. Thanks. |
|
@joscha I somehow cannot get extract styles to work with extending the config based on your example above. Could you expand on your example, or show a whole webpack config.? How do you get the env check into the webpack config when in "extending mode"? |
|
@janusch Would you be able to try the 3.3 alpha release? We have changed the way entry points are added there, and the issue you're having should be resolved. could you check it out? |
|
@ndelangen Hey, thank you for getting back to me that quickly! However, there is another error related to webpack now. Maybe that is due to some other breaking change? It was the first issue in storybook that refers to the same error: storybook-eol/storybook-addons#1 One more little thing is that as soon as I am wrapping the webpack config object in a function returning the object, to get the Thank you for working so hard on storybook, it is really becoming a complex product, with a lot of great features! |
this one I got resolved! I am still having the 'emit' error described above. I am running the latest version of the package. Please let me know, if I should test something else, looking forward to get the latest alpha into a stable build asap. |
|
I got the remaining issues fixed. Just had to upgrade everything else to 3.3.0-alpha.0 as well. Thank you for the help, storybook rocks! |
|
sorry I am bit lost as first time using storybook. Do I need a custom webpack conf to load Uses "@storybook/react": "^3.2.12". Do I need to use thanks for any help. EDIT: |
Issue: CSS not displaying when using the
exract-text-webpack-plugin, regression introduced in 38b9dfaWhat I did
Upgraded from
@kadira/storybook@1.xand had theextract-text-webpack-pluginenabled.Unfortunately my CSS didn't load, encountering the same issue as described in #1104 and most likely #388 and #708.
Using the
extract-text-webpack-plugincreates a new entry point however, making the asset list look something like this:and due to https://github.com/storybooks/storybook/blob/34b96aae764a386c35d4db2a057e85236bd8ddfe/app/react/src/server/iframe.html.js#L33 only ever taking the very first asset, the CSS never makes it into
iframe.html.How to test
I added new tests :)
fixes #388
fixes #708
fixes #1104