DEV Community

thanders
thanders

Posted on

NextJS build ReferenceError imported module

Hello,

I am working on a React component library to use with Next.js and I am having trouble getting it to run in a Next.js project.

When I try to build the project I receive an error:

info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully

> Build error occurred
ReferenceError: document is not defined at u (/home/userName/devProjects/techblog/node_modules/badenweiler-ui/dist/index.js:1:3835)

I've tested the library out using Link with a React project and it works without issue. What could be causing this issue?

My next.config.js is as follows:
Alt Text

I've included a screenshot of the component that imports the external node_module that is causing the problem. Any advice would be much appreciated.

Alt Text

Top comments (1)

Collapse
 
thanders profile image
thanders • Edited

I was able to get it to build by changing the rule for the imported library to use MiniCssExtractPlugin, but now the styles don't appear to get applied to the component anymore. Does anyone know how I can get the styles applied using MiniCssExtractPlugin in this scenario?

Screenshot of my the component library's package.json
dev-to-uploads.s3.amazonaws.com/up...