Comments (29)
I also got the same error. Fixed it by removing the @storybook/preset-scss
addon from my .storybook/main.js
:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
}
It collides with @storybook/preset-create-react-app
. This is also logged as a warning right at the beginning of my logs:
WARN `@storybook/preset-scss` may not be compatible with `@storybook/preset-create-react-app`
from presets.
Any fixes?
from presets.
@QuevedoIB yes, the CRA preset contains an SCSS loader.
I still ran into problems with a global import in my .storybook/preview.js
:
// ...
import '!style-loader!css-loader!sass-loader!../src/styles/app.scss'
The build was hanging at around 67-69% every time, until I removed the loaders from that file path:
// ...
import '../src/styles/app.scss'
Note: I'm using the latest versions of the storybook packages, and of
react-scripts
.
I also didn't need to install@storybook/preset-scss
,css-loader
,sass-loader
, orstyle-loader
because these loaders come withreact-scripts
.
from presets.
Getting the same error. Using CRA and the storybook scss preset
from presets.
I also got the same error. Fixed it by removing the
@storybook/preset-scss
addon from my.storybook/main.js
:module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', ], }It collides with
@storybook/preset-create-react-app
. This is also logged as a warning right at the beginning of my logs:WARN `@storybook/preset-scss` may not be compatible with `@storybook/preset-create-react-app`
Thanks a ton @simon-tr I am also using CRA and scss. It is mentioned in their documentation to use
module.exports = {
addons: ['@storybook/preset-scss'],
};
But it breaks if I add '@storybook/preset-scss'
to the main.js
So, I am guessing that @storybook/preset-create-react-app
already contains preset for scss if you are already using CRA , hence, you don't need to add '@storybook/preset-scss'
addon.
from presets.
Having same problem. I am using exported SCSS variables to JS:
_variables/_colors.scss
$GREEN_DARK: #00A979;
_js-variables/_colors.scss
:export {
GREEN_DARK: $GREEN_DARK;
}
In preview.js
at the top of file I am doing: import '!style-loader!css-loader!sass-loader!./reset-storybook.scss';
and in main.js
in webpack
config:
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../modules/@ergonode/core/src/assets/scss/main.scss'),
},
},
],
include: path.resolve(__dirname, '../'),
});
ERROR
ERROR in ./modules/@ergonode/core/src/assets/scss/_js-variables/colors.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??ref--10-3!./modules/@ergonode/core/src/assets/scss/_js-variables/colors.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of modules/@ergonode/core/src/assets/scss/_js-variables/colors.scss
>> var api = require("!../../../../../../../node_modules/style-loader/dist/runt
^
from presets.
I'm using Storybook 6.1.3. Followed the instructions from this link. Didn't worked and I was receiving the same error as seen above. Tried to uninstall everything related to the instructions of the mentioned link and just import the .scss in preview.js and it worked like a charm. I guess that the SCSS preset isn't necessary anymore for version 6.
from presets.
I think the problem is that the module node-sass
is a dev-dependency while they actually use it. At least I'm getting that error on the console.
from presets.
Same error here
from presets.
Same here. Looking for answers
from presets.
@peiris @morrigan do you have any webpack configs in main.js?
from presets.
@peiris @morrigan do you have any webpack configs in main.js?
Sorry for not replying earlier. I was able to solve the issue on a fresh storybook installation.
from presets.
@peiris i had some webpack config, so i guess that was messing up with react-scripts(create-react-app) webpack configs.once i remove by storybook webpack config.it worked fine.
from presets.
Same error here
from presets.
@t596502 do you have any webpack configuration in storybook setting/or main.js in .storybook folder?
from presets.
Same error for me using the example or trying @storybook/preset-scss
main.js
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/preset-scss',
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-storysource'
]
};
Error
ERROR in ./node_modules/react-bulma-components/lib/components/box/box.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/react-scripts/node_modules/style-loader!./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--8-oneOf-5-3!./node_modules/react-bulma-components/lib/components/box/box.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
on line 1 of node_modules/react-bulma-components/lib/components/box/box.sass
>>
^
@ ./node_modules/react-bulma-components/lib/components/box/box.sass 2:26-393 43:4-64:5 46:18-385
@ ./node_modules/react-bulma-components/lib/components/box/index.js
@ ./src/components/Bulma.stories.js
@ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
from presets.
@deckardd in my case webpack configuration was not there and i was not using cra that provide inbuilt webpack conf and with cra i have to install node-sass module to fix.dont know how exactly it got fixed.
from presets.
@t596502 do you have any webpack configuration in storybook setting/or main.js in .storybook folder?
I have solved
storybook/main.js
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.tsx'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
],
webpackFinal: async (config, { configType }) => {
// new code
config.module.rules = config.module.rules.filter(rule => {
if(rule.test) {
return !rule.test.test(".scss")
}
});
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader',{
loader:'sass-loader',
}],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
from presets.
@t596502 are you using create-react-app(react-scripts) in your project?
from presets.
I am having the same issue.
./.storybook/webpack.config.js
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.scss$/i,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: true
},
},
{
loader: 'sass-loader',
options: {
importLoaders: true,
indentedSyntax: true
}
}
],
include: path.resolve(__dirname, '../'),
}
]
}
}
The error (appears once for every scss file)
ERROR in ./components/ui_input/Searchbar/searchbar.scss (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--8-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--8-4!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./components/ui_input/Searchbar/searchbar.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of /Users/philyoo/workspace/BPNYC-common/components/ui_input/Searchbar/searchbar.scss
>> var api = require("!../../../node_modules/style-loader/dist/runtime/injectSt
^
@ ./components/ui_input/Searchbar/searchbar.scss 2:14-487 21:1-42:3 22:19-492
@ ./components/ui_input/Searchbar/index.jsx
@ ./components/ui_component/Transfer/TransferList.jsx
@ ./components/ui_component/Transfer/index.jsx
@ ./stories/Transfer.stories.js
@ ./stories sync \.stories\.js$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
I am not using create-react-app, just regular React components transpiled with webpack.
from presets.
@philyoosays try installing node-saas
from presets.
Having the same issue, trying to use CRA preset with SCSS preset and getting the exact same error. Did anyone to get them both working together somehow? Or how are we supposed to have a CRA with sass?
@simon-tr You removed the SCSS preset and managed to get sass working with the CRA preset?
from presets.
@t596502 are you using create-react-app(react-scripts) in your project?
yes!
from presets.
Did anyone solved it? Got the same problem here...
from presets.
@philyoosays try installing node-saas
Already installed.
from presets.
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.[tj]s[x]"],
addons: [
"@storybook/addon-actions/register",
"@storybook/addon-links",
"@storybook/addon-knobs/register",
"@storybook/addon-storysource/register",
"storybook-addon-styled-component-theme/dist/register",
"@storybook/addon-viewport/register",
],
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [["react-app", { flow: false, typescript: true }]],
},
});
config.module.rules.push({
test: /\.scss$/,
sideEffects: false,
use: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../"),
exclude: /\.module\.scss$/,
});
config.resolve.extensions.push(".ts", ".tsx");
config.module.rules.push({
test: /\.stories\.tsx?$/,
loaders: [require.resolve("@storybook/source-loader")],
enforce: "pre",
});
config.module.rules.push({
test: /\.module\.scss$/,
sideEffects: false,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
"sass-loader",
],
});
return config;
},
};
from presets.
I'm getting the same error. I followed this doc to add sass support but obviously it's not working well. But commenting @storybook/preset-create-react-app
SB works again so I don't know what I'm missing here. I'm using Storybook 6 and CRA 4 and installed [email protected]
(I'm using 4.14.1 because the CRA node-sass@5 issue).
from presets.
I still need to use webpackFinal to compile Sass using CRA4, so I think the preset doesn't work with Storybook 6.1.x (or less? That's just what I'm on), at least not for compiling SCSS. I'm actually pretty unfamiliar with this package and I think it was included when I initiated a new Storybook on a new CRA project.
Edit: Found the definitive answer lol.
const incompatiblePresets = [
'@storybook/preset-scss',
'@storybook/preset-typescript',
];
Perhaps, if this is within the scope of presets, it should maybe diff webpack with the webpackFinal one and see if there is a conflicting rule or maybe a warning if 'sass-loader' is found with a css rule. It seems oddly specific, but I feel like this is an easy issue to run into without an immediately obvious answer.
I'm down to contribute, if what I suggested makes sense, if any maintainer sees this...
from presets.
This solves the issue: https://github.com/nirus/storybook-issue/blob/597a4df091362dbd61422d7033ef210bdd146f20/.storybook/main.js#L13
from presets.
Related Issues (20)
- [Bug] CRA does not print eslint errors to terminal anylonger
- [Bug] CRA preset does not support ES2020 dependencies HOT 2
- Where are the tests for your presets?
- V3.2.0 works but V4.0.0 does not HOT 4
- [Bug] preset-create-react-app: Storybook config dir webpack override breaks default CRA config
- [Bug] Install @storybook/preset-scss with default storybook's bundler 'webpack4' doesn't works HOT 5
- [Bug] CRA5, [email protected] HOT 6
- [Bug] Fails in case of using custom folder structure inside /src
- [Help] Cannot find module '@babel/plugin-proposal-private-property-in-object'
- @storybook/preset-create-react-app 4.0.1 breaks Storybook HOT 4
- [Bug]: macos - Error: Cannot find module '.../node_modules/config/webpack.config' HOT 5
- [Bug] URL from readme does not exist on the website
- [Bug] ENAMETOOLONG on "preset-create-react-app@4" package installation HOT 1
- [Bug] start-storybook breaks when tsconfig.json has comments (preset-create-react-app)
- [Bug] Package dependency HOT 4
- [Bug] Confusing error message when stories folder is outside of src.
- [Bug] cannot run storybook with CRA preset version 4.1.0. HOT 1
- @storybook/react-docgen-typescript-plugin canary dependency
- [Bug] Storybook preset function `getReactScriptsPath` has bug HOT 2
- Missing license file
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from presets.