2

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:

  1. Is there a way to set up my repo so NextJS is happy with it?
  2. 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.
Mike Willis
  • 1,493
  • 15
  • 30

0 Answers0