[@next/storybook] - incorrectly imported css throws an inaccurate error #15195
Comments
|
I realized that my reproduction steps here are inaccurate, will adjust and update shortly! |
|
Updated with a custom reproduction repo! |
|
I ran into the same error, I guess there's a reason why
Anyway the reason why this happens is that Next's Webpack rules use internal error-loader which is nested under
Long story short, I have attempted to prune Next's S/CSS loading rules to work with Storybook but in the end I still didn't manage to get them to work – the best I got was having // Based on https://github.com/vercel/next.js/blob/canary/packages/next-plugin-storybook/preset.js
const {PHASE_PRODUCTION_BUILD} = require('next/constants')
const {findPagesDir} = require('next/dist/lib/find-pages-dir')
const loadConfig = require('next/dist/next-server/server/config').default
const getWebpackConfig = require('next/dist/build/webpack-config').default
const CWD = process.cwd()
async function webpackFinal(config) {
const pagesDir = findPagesDir(CWD)
const nextConfig = await loadConfig(PHASE_PRODUCTION_BUILD, CWD)
const nextWebpackConfig = await getWebpackConfig(CWD, {
pagesDir,
entrypoints: {},
isServer: false,
isProduction: false,
target: 'server',
config: nextConfig,
buildId: 'storybook',
})
config.plugins = [...config.plugins, ...nextWebpackConfig.plugins]
config.resolve = {
...config.resolve,
...nextWebpackConfig.resolve,
}
config.module.rules = [
...config.module.rules.filter((rule) => {
// the rules we're filtering use RegExp for the test
if (!rule.test instanceof RegExp) return true
// use Next.js' built-in CSS
if (rule.test.test('hello.css')) {
return false
}
// use next-babel-loader instead of storybook's babel-loader
if (
rule.test.test('hello.js') &&
Array.isArray(rule.use) &&
rule.use[0].loader === 'babel-loader'
) {
return false
}
return true
}),
...nextWebpackConfig.module.rules.map((rule) => {
// we need to resolve next-babel-loader since it's not available
// relative with storybook's config
if (rule.use && rule.use.loader === 'next-babel-loader') {
rule.use.loader = require.resolve(
'next/dist/build/webpack/loaders/next-babel-loader'
)
}
if (rule.oneOf) {
rule.oneOf = rule.oneOf
.map((oneOfRule) => {
// remove Next's error-loader rules
if (oneOfRule.use && oneOfRule.use.loader === 'error-loader') {
return null
}
// trim issuer
if (oneOfRule.issuer && oneOfRule.issuer.and) {
delete oneOfRule.issuer
}
// trim mini-css-extract-plugin
if (Array.isArray(oneOfRule.use)) {
oneOfRule.use = oneOfRule.use.filter(({loader}) => {
return !/mini-css-extract-plugin/.test(loader)
})
}
return oneOfRule
})
.filter(Boolean)
}
return rule
}),
]
return config
}
module.exports = {
webpackFinal,
}Currently I think the best workaround would be to remove the Next's |
|
Okay, I have managed to make it work with global CSS by injecting a custom set of rules into that // .storybook/main.js
const {sassOptions} = require('../next.config')
const path = require('path')
const includePath = path.resolve(__dirname, '../')
const cssRules = [
{
sideEffects: true,
test: /(?<!\.module)\.css$/,
use: ['style-loader', 'css-loader'],
include: includePath,
},
{
sideEffects: true,
test: /(?<!\.module)\.(scss|sass)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions,
},
},
],
include: includePath,
},
]
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@next/plugin-storybook',
'@storybook/addon-links',
'@storybook/addon-essentials',
],
webpackFinal: async (config) => {
const oneOfRule = config.module.rules.find((rule) => !!rule.oneOf)
oneOfRule.oneOf = [...cssRules, ...oneOfRule.oneOf]
return config
},
} |
|
to get the "Global CSS cannot be imported from files other than your Custom ." error instead of "Error: Module not found: Can't resolve 'error-loader'" maybe |
jankaifer
added
the
please verify canary
|
Please verify that your issue can be recreated with Why was this issue marked with the
|
|
This issue has been automatically closed because it wasn't verified against next@canary. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you. |
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
When a css file is imported in the wrong way, rather than displaying an error that describes the problem, the error
can't resolve 'error-loader'is displayed, with no stack trace.To Reproduce
.cssfile and import it within one of the stories (this is not allowed, since normal css imports are only possible in_app.js)Expected behavior
I would expect that the error message mirror that which you receive when using next.js normally - something along the lines of "global css imports are not allowed within pages, please use a css module or import within _app.js"
System information
The text was updated successfully, but these errors were encountered: