Global CSS cannot be imported from within node_modules

[eschwartz929]

I have been trying to install this package to use with my NextJS project, but I am receiving the following error:

./node_modules/react-bootstrap-submenu/src/index.css Global CSS cannot be imported from within node_modules. Read more: https://err.sh/next.js/css-npm Location: node_modules/react-bootstrap-submenu/dist/DropdownSubmenu.js

The official NextJS documentation (https://github.com/vercel/next.js/blob/master/errors/css-npm.md) offers a solution

Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

I know that this is issue is more specific to NextJS than it is to your package, but if there is any plans to push any updates to the react-bootstrap-submenu that would resolve this issue, or if you have any suggestions, that would be appreciated.

Thanks!

[felipecarrillo100]

I'm not familiar with Next.js, but it seems your problem is that you are not able to import CSS files in your Reacr/Javascript code. If that is the case, then you have two options,

Option 1: find a way to import CSS files from Javascript. I normally use webpack and it has CSS loaders. I don't know if your environment supports that. Option 2: If Option 1 is not feasible for you then fork my repository and then go to the ./src/DropdownSubmenu.tsx and delete the line that imports the css (import '../src/index.css'). You will have to manually import the index.css file in your project some how.

I hope this helps you.

A question for you, are you able to run React-Bootstrap in your Next.JS environment? If yes then it should be possible to run "react-bootstrap-submenu" because this is a very tiny extension to React-Bootstrap. In that case I guess Option 2 should be the best for you. I don't want to change it in the main branch because that would affect other users. I will keep it like this for now, but feel free to branch it and let us know.

Best regards

[eschwartz929]

Yes, I am able to run React-Bootstrap perfectly in my NextJS environment. The only problem arises with react-bootstrap-submenu.

Not sure how feasible Option 2 is for me. I can manually import your index.css file into my project, but every time my project is built, npm install runs automatically, so I don't think deleting your import lines will stick. I will look into Option 1.

This seems to be an issue for NextJS dealing with modules that import the css files themselves: https://github.com/vercel/next.js/discussions/19166

[felipecarrillo100]

Fork the project, make the change and make your own npm package

On Wed, Dec 9, 2020, 13:01 eschwartz929 notifications@github.com wrote:

Yes, I am able to run React-Bootstrap perfectly in my NextJS environment. The only problem arises with react-bootstrap-submenu.

Not sure how feasible Option 2 is for me. I can manually import your index.css file into my project, but every time my project is built, npm install runs automatically, so I don't think deleting your import lines will stick. I will look into Option 1.

This seems to be an issue for NextJS dealing with modules that import the css files themselves: vercel/next.js#19166 https://github.com/vercel/next.js/discussions/19166

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/felipecarrillo100/react-bootstrap-submenu/issues/3#issuecomment-741981765, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEAM4AWSZCNRR37BA2XE7GDST7CRDANCNFSM4UQ4EQRA .

[felipecarrillo100]

I will consider this as a requirement for a future release. Not scheduled, so for now, people having this issue use the forked solution

[marcosvspimenta]

@eschwartz929, Did you do anything besides using forked?