Attempting to use a component from module
Answered
Yellowstripe scad posted this in #help-forum
Yellowstripe scadOP
I am getting the error seen in the attached screenshot.
The component is imported with
import {CidButton} from '@connectid-tools/idp-selector-react'
I don't understand really why it doesn't let me import this component, my only thinking is that it is due to the component importing stylesheets within the .js file. I have attached what I think the relevant part of the module is, as well as the file structure for it.
I am importing and attempting to use this component in index.tsx, but i have tried to import it in app.tsx as well. Also have attempted to import the stylesheet seperately.
Any help is greatly appreciated, thanks!
The component is imported with
import {CidButton} from '@connectid-tools/idp-selector-react'
I don't understand really why it doesn't let me import this component, my only thinking is that it is due to the component importing stylesheets within the .js file. I have attached what I think the relevant part of the module is, as well as the file structure for it.
I am importing and attempting to use this component in index.tsx, but i have tried to import it in app.tsx as well. Also have attempted to import the stylesheet seperately.
Any help is greatly appreciated, thanks!
Answered by fuma
Because it's about how Next.js resolves CSS imports, it won't scan CSS stylesheets imported in
Thus you have to remove the CSS import from the original component (in
node_modules for performance reasons.CidButton.js is not a part of your application code, it's not allowed to import a css file.Thus you have to remove the CSS import from the original component (in
node_modules)12 Replies
Yellowstripe scadOP
Does anyone have any idea what I'm doing wrong here? It's got to be something amd I really cannot figure it out. No matter what I try, next won't let me use this component. Even tried only using it in app.tsx and it still comes up with the same error.
Because it's about how Next.js resolves CSS imports, it won't scan CSS stylesheets imported in
Thus you have to remove the CSS import from the original component (in
node_modules for performance reasons.CidButton.js is not a part of your application code, it's not allowed to import a css file.Thus you have to remove the CSS import from the original component (in
node_modules)Answer
@fuma Because it's about how Next.js resolves CSS imports, it won't scan CSS stylesheets imported in `node_modules` for performance reasons.
`CidButton.js` is not a part of your application code, it's not allowed to import a css file.
Thus you have to remove the CSS import from the original component (in `node_modules`)
Yellowstripe scadOP
So if the whole module is built with .js files importing from various other js files, all with stylesheet imports, this module basically just can't work with next?
yeah, basically that package can't contain any css imports
Yellowstripe scadOP
would you have any advice on ways to get around that? Maybe removing the imports from module and then importing as global stylesheets?
Correct, remove these imports can solve the issue (but you have to patch that package, better to open a PR if it's not your package)
Next.js recommends importing it in page/component/_app
Yellowstripe scadOP
Yeah unfortunately it's not. Working to establish a new system so might be able to get it changed in the future, but not within my time frame
Might have to have a look at some other frameworks, but was really hoping to use next
ah well thanks for you help! very much appreciated
Sure! as an alternative, you can also patch the package yourself: https://www.npmjs.com/package/patch-package
Yellowstripe scadOP
oh thats pretty cool. never seen it before. will have a look