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

Heroku

The AI PaaS for deploying, managing, and scaling apps.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Get Started

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

DevCycle image

Fast, Flexible Releases with OpenFeature Built-in

Ship faster on the first feature management platform with OpenFeature built-in to all of our open source SDKs.

Start shipping

👋 Kindness is contagious

Delve into a trove of insights in this thoughtful post, celebrated by the welcoming DEV Community. Programmers of every stripe are invited to share their viewpoints and enrich our collective expertise.

A simple “thank you” can brighten someone’s day—drop yours in the comments below!

On DEV, exchanging knowledge lightens our path and forges deeper connections. Found this valuable? A quick note of gratitude to the author can make all the difference.

Get Started