Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies.
These components come with their own corresponding .css files. The structure of the source code looks like this:
|- src
|-|
|- components
|-|
| Component
|-|
|- index.js
|- Component.js
|- Component.css
The same structure is present in a build folder, with each JavaScript file transpiled for production use.
My project integrates this module through React-Starter-Kit, but when attempting to start the service using either yarn start or npm start, an error occurs:
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}`);
This issue seems to be related to Babel trying to interpret the .css files. I am seeking advice on how to resolve this problem within the React Starter Kit boilerplate.
UPDATE
I neglected to mention that importing the module using a relative path syntax:
import Component, { Styles } from '../../../node_modules/@scope/my-project/Component';
works as intended. However, it would be preferable to have a more concise import statement.
Thank you.