How to deal with modules inside node_modules that depends .css files? - css

Question

I'm working in a project where some of dependencies are a self made UI library components.
Those components has its proper .css file. The source structure is something like this:
|- src
|-|
|- components
|-|
| Component
|-|
|- index.js
|- Component.js
|- Component.css
The same structure is published in a build folder, with each .js file transpiled for a production compatible JavaScript format.
The project I consume this module vw using React-Starter-Kit and when I try to start the service using yarn start or npm start, I get the following error:
SyntaxError: Unexpected token .
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> ([... path to my component inside node_modules]:13:15)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
/pathtomyproject/runServer.js:67
throw new Error(`Server terminated unexpectedly with code: ${code} signal: ${signal}`);
I guess the problem is about babel trying to read .css files, but I would like to know if someone have a good approach to avoid this kind of problem, using the actual boilerplate I'm using right now (React Starter Kit).
UPDATE
I forgot to mention this. If I import that module using relative path sintax:
import Component, { Styles } from '../../../node_modules/#scope/my-project/Component';
It works as expected, obviously is nice to have syntatic sugar import
Thanks.

Answer 1

According to your answer, I think, that import has to be:
import Styles from './Component.css',
it's necessary to add .css extension to show that it's not .js and it has to be processed by css-loaders (in case if webpack is used) or other tools.