ShaunEvening
commented
1 year ago Hey @FK78
errors like this occur when sass files are processed twice. This means that your webpack config already has sass rules in it before you prepend your custom rules in main.js
@storybook/preset-create-react-app uses the webpack config included in react-scripts, so if you are using react-scripts@2.x.x and up, your storybook will already have the scss, css modules, and postcss webpack settings that react-scripts provides.
This means that you have two options.
- Remove your custom rules in favour of react-scripts existing rules
- If you want to use your custom rules, you should filter out the existing rules with something like the following:
require('dotenv').config();
const path = require('path');
const { nodeModulesEs6IncludeRegExp } = require('../config/webpack.helpers');
const { ENVIRONMENT } = process.env;
module.exports = {
core: {
builder: "webpack5",
},
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-postcss',
'@storybook/addon-a11y',
],
webpackFinal: async config => {
const newConfig = { ...config };
newConfig.module.rules[1].include = nodeModulesEs6IncludeRegExp;
// Remove existing scss rules
const newRules = newConfig.module.rules.filter(({ test }) => !test.test('test.scss'));
// Sass loader rules
newRules.unshift(
{
test: /\.scss$/,
include: path.resolve('src'),
use: [
require.resolve('style-loader'),
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
auto: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
},
{
loader: 'sass-loader',
options: {
additionalData: '$use-cdn-fonts: false;'
},
},
],
},
{
test: /\.(sa|sc|c)ss$/,
include: file =>
file.includes('node_modules/custom-module),
sideEffects: true,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
type: 'asset',
},
);
// Set the config rules to our new rule set
newConfig.module.rules = newRules
// Return the altered config
return newConfig;
},
};Additionally, you can also remove @storybook/preset-postcss as create react app has this configured for you already.
With all of that configured you can remove the inline loaders to import your scss file in preview.js like so:
-import '!style-loader!css-loader!sass-loader!../src/stylesheets/index.scss';
+import '../src/stylesheets/index.scss';
// process.env is populated by dotenv at the start of main.js
window.process = { env: process.env }
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}EDIT: I always mix up .match and .test 😅
FK78
manhhung-fpt
Describe the bug
Currently we are using Node 14, but when upgrading to Node 18 and trying to run
npm run build-storybookI am getting these errors:Reverting
"@storybook/preset-create-react-app"to^3.2.0fixes the error above, but another appears:My devDependencies:
My .storybook/main.js:
My .storybook/preview.js: