CODEWITHSUNDEEP
reactjsnext.jsstorybookcss-loaderpostcss-loader
Kristi Jorgji
Kristi Jorgji

Reputation: 1739

nextjs react storybook fails when importing css file

I am using nextjs + react + storybook with typescript.

I have one react component like

CropperModal.tsx

import 'cropperjs/dist/cropper.css';
rest of code

storybook crashes fails to start due to error

ERROR in ./node_modules/cropperjs/dist/cropper.css (./node_modules/@storybook/builder-webpack4/node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js??ref--7-2!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/cropperjs/dist/cropper.css)
Module build failed (from ./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/kristi.jorgji/Desktop/test/single_new_web/node_modules/cropperjs/dist/cropper.css Unknown word

> 1 | import api from "!../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    | ^
  2 |             import content from "!!../../css-loader/dist/cjs.js!../../sass-loader/dist/cjs.js!./cropper.css";
  3 |

storybook config files main.js and the included next-preset.js

https://pastebin.com/cd2cNAtA

Any idea how to fix this, I have already one css and sass loader as can be seen in config...

Upvotes: 2

Views: 393

Answers (0)

Related Questions