I created a React component and uploaded it to a private git repo. It's a fairly simple component that renders a data table that can be sorted etc. I used nwb
to for the setup / build process (https://github.com/insin/nwb).
It's not published on npm, so when I want to use it on a project I install via something like npm install --save git+ssh://git@github.com/Me/myRepo.git
. This all works fine in normal React projects.
Unfortunately on a NextJS
site I'm working on, NextJS
won't compile, and is giving the error CSS Modules cannot be imported from within node_modules
and linking me to https://nextjs.org/docs/messages/css-modules-npm
That page suggests that I might be accidentally using the package's source files - but I'm not. When I look in my /node_modules/myComponent/
folder, there's a /lib/
folder that has the compiled source. However, the styles are still in separate files and are included into the compiled source just like you might normally do (var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));
).
I did some searching online and it seems like the "quick and easy" solution is to use https://github.com/martpie/next-transpile-modules.
I'd prefer to solve this by fixing my repo though, so that when I install it on a project (whether NextJS
or whatever) I get whatever it is that NextJS
wants.
So my various questions are:
- Is there a way to set up my repo so
NextJS
is happy with it? - Is
nwb
not the preferred way to make a React component? Should I have used some other process? I'm not having this problem with any other component, so it seems like this is something I did wrong with my repo.