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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

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...

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay