Error: Global CSS cannot be imported from within node_modules.

[amirhhashemi]

Describe the bug I just installed the package in a next.js project and I get this error:

error - ../../node_modules/katex/dist/katex.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/verbum/dist/verbum.esm.js

To Reproduce

1. start a new next.js app with yarn create next-app <name>
2. install verbum: yarn add verbum
3. copy the example in the README
4. start the development server with yarn dev

[sewardgw]

hey @ozanyurtsever - I'm getting this as well when running npm install and would love to get your take.

ERROR in ./node_modules/verbum/dist/verbum.esm.js 48:0-30
Module not found: Error: Package path ./dist/katex.css is not exported from package .../static/node_modules/katex (see exports field in .../static/node_modules/katex/package.json)

I am using React v18. I've tried adjusting the verbum package version as well as the katex package version with no luck.

When I install verbum, katex is installed and I can see that the katex.css file is indeed there under node_modules/katex/dist/katex.css.

Happy to provide more info or take some guidance here if you have some thoughts

[NorkzYT]

Describe the bug I just installed the package in a next.js project and I get this error:

error - ../../node_modules/katex/dist/katex.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/verbum/dist/verbum.esm.js

To Reproduce

1. start a new next.js app with yarn create next-app <name>
2. install verbum: yarn add verbum
3. copy the example in the README
4. start the development server with yarn dev

Read the following from next.js discussion: https://github.com/vercel/next.js/discussions/27953 @ahhshm @sewardgw

I used to get the error and for my fix I did not import any other CSS into any file other than Global CSS file that is in the styles folder into the _app.js file that is in the pages folder.

The _app.js Global CSS content:

// Global styles
import "../styles/style.css";

The file contains all the CSS in my project.

You can read more about nextjs CSS here.

[DonSmog]

Describe the bug I just installed the package in a next.js project and I get this error:

error - ../../node_modules/katex/dist/katex.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/verbum/dist/verbum.esm.js

To Reproduce

1. start a new next.js app with yarn create next-app <name>
2. install verbum: yarn add verbum
3. copy the example in the README
4. start the development server with yarn dev

Read the following from next.js discussion: vercel/next.js#27953 @ahhshm @sewardgw

I used to get the error and for my fix I did not import any other CSS into any file other than Global CSS file that is in the styles folder into the _app.js file that is in the pages folder.

The _app.js Global CSS content:

// Global styles
import "../styles/style.css";

The file contains all the CSS in my project.

You can read more about nextjs CSS here.

This didn't fix it.

[NorkzYT]

Describe the bug I just installed the package in a next.js project and I get this error:

error - ../../node_modules/katex/dist/katex.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/verbum/dist/verbum.esm.js

To Reproduce

1. start a new next.js app with yarn create next-app <name>
2. install verbum: yarn add verbum
3. copy the example in the README
4. start the development server with yarn dev

Read the following from next.js discussion: vercel/next.js#27953 @ahhshm @sewardgw I used to get the error and for my fix I did not import any other CSS into any file other than Global CSS file that is in the styles folder into the _app.js file that is in the pages folder. The _app.js Global CSS content:

// Global styles
import "../styles/style.css";

The file contains all the CSS in my project. You can read more about nextjs CSS here.

This didn't fix it.

A resolution similar to the following link should fix this issue. Were the steps you used the same as @ahhshm? If you did then try the steps documented on the README, and use npm. The steps @ahhshm provided did not contain any instructions for launching a typescript project app because Verbum was written in that language.

You can start a TS Nextjs app with the following command.

yarn create next-app <app-name> --typescript

https://paigekim29.medium.com/global-css-cannot-be-imported-from-within-node-modules-db55805ec258

[DonSmog]

@NorkzYT I tried the method you recommended, still getting an error Below is a screenshot of my code and error

[NorkzYT]

@NorkzYT I tried the method you recommended, still getting an error Below is a screenshot of my code and error

What are the contents of your _app.js? Please also show your index.js file and the routing code for the verbum text editor.

[Toshimichi0915]

Did anyone find a workaround? I've been stuck on this issue. Edit: I moved to tiptap texteditor because it's easier to use/maintain compared to Lexical.

[topgmedia]

To fix the global css issue:

1. npm install next-transpile-modules
2. in next config do this

Now you will get a new error from excalidraw, because the document is not defined. This means that it wants to be client rendered and the document is not defined as we are running it on the server!

To resolve the document not defined issue:

1. Copy and paste the verbum starter code into a noteviewer.tsx file in your components folder.
2. This is how your desired page should look! Using next-dynamic import

Everything works now :))

[visortelle]

In newer Next.js versions you can use built-in transpilePackages instead of next-transpile-modules:

const nextConfig = {
  transpilePackages: ["verbum"],
};

module.exports = nextConfig;

[donkarimmansour]

solution:

next v13.3

Everything works now