search

uiwjs / react-code-preview

Code edit preview for React.
https://uiwjs.github.io/react-code-preview
MIT License
65 stars 11 forks source link

problem in using in Nextjs #225

Closed mostafaRoosta74 closed 2 years ago

mostafaRoosta74 commented 2 years ago

hello first nice work building react-code-preview

when i add this package to my nextjs project it makes error in compiling the project and the error is:

../../node_modules/@uiw/react-split/esm/style/index.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: ..\..\node_modules\@uiw\react-split\esm\index.js

reason of this error is css is used inside of component in creating the project i think if you don't import css inside your code and let users import css from node_modules will fix the problem

thanks again

mostafaRoosta74 commented 2 years ago

i used next-remove-imports with this code and it got fixed

next.config.js js const removeImports = require("next-remove-imports")(); module.exports = removeImports({ experimental: { esmExternals: true } });

main.tsx js import "@uiw/react-code-preview/esm/index.css" and js const CodePreview = dynamic( () => import("@uiw/react-code-preview").then((mod) => mod.default), { ssr: false } ); and it got fixed