question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Node_Modules CSS Import And Next Export

See original GitHub issue

Bug report

It seems that importing css from node_modules in the _app.js file works fine locally and for normal builds but not for “next export” builds.

Describe the bug

Im using next 9.5.2 and trying to create a static page to put in a subdirectory in a Wordpress website. Everything works fine locally and also when I create the build. The imported css in _app.js for the “react-slick” package is not working though. Can’t find the file. It doesn’t seem like “react-slick”'s problem, since it’s working with SSR and non SSR renders. It’s just the CSS that is not being loaded OR imported right.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. install “react-slick” in an empty next application
  2. add the global css files in the _app.js
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
  1. Run locally, everything should be fine.
  2. Create a build with “next build && next export”

Expected behavior

Project should load all css from node_modules in the _app.js file.

Screenshots

The built code is in this url: https://uniquehairspa.com/cut-and-style/

In Local I don’t have any warnings or errors This is in the released version: image

System information

  • Next.js: 9.5.2
  • Node.js: 12.13.1

Additional context

Package.json file: { "name": "nextjs", "version": "4.0.0", "private": true, "dependencies": { "@material-ui/core": "latest", "@material-ui/icons": "^4.9.1", "clsx": "latest", "next": "latest", "prop-types": "latest", "react": "latest", "react-dom": "latest", "react-slick": "^0.27.11", "slick-carousel": "^1.8.1" }, "scripts": { "dev": "next", "build": "next build", "build-static": "next build && next export", "start": "next start", "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest" } }

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
rmaniumcommented, Sep 26, 2020

discussions

You are right, thanks, will do.

0reactions
balazsorban44commented, Jan 29, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to include CSS from node_modules in project? #10059
I am trying to. import 'bootstrap/dist/css/bootstrap.min.css';. in my next.js project but I get following error.
Read more >
Import css files from node modules in Next JS? - Stack Overflow
According to the documentation you can import css files from a static folder which should be in root directory but i want to...
Read more >
Basic Features: Built-in CSS Support - Next.js
Import styles from node_modules​​ Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.
Read more >
nextjs global css cannot be imported from within node_modules.
Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application. For global stylesheets, like bootstrap or nprogress, you ......
Read more >
Next.js Series #2-CSS Support - Level Up Coding
2. Import styles from node_modules. Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application. For global ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found