4

My setup: I have a mono repo with multiple NextJS app sharing component from a shared module. The apps and shared module are individual workspaces managed by npm workspace. I m using css modules and post css for my NextJS apps.

Problem: I want to import a css file from a shared module to css files in the NextJS apps. For example, I want to do something like @import @shared/shared.css in my css file for one of my component in the NextJS app.

Solutions tried:

  1. postcss-import - works but its weird to import css files within the shared module components from shared modules using full package name. I hear relative path root can be specified using from but not really good doc.
  2. tried something like @import ~@shared/shared.css. My IDE actually recognizes the path and is happy but the application fails to resolve the import and errors out like this: error - ../node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!../node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[2]!./components/common/ToastAlert/ToastAlert.module.css TypeError: Cannot destructure property 'file' of 'undefined' as it is undefined.

Thank you in advance

Mandark
  • 85
  • 1
  • 5
  • Does this answer your question: [Is it possible to include one CSS file in another?](https://stackoverflow.com/questions/147500/is-it-possible-to-include-one-css-file-in-another)? Try importing it as `@import "@shared/shared.css";` in your CSS file. – juliomalves Jul 09 '21 at 14:03
  • hi @juliomalves. that does not solve my issue. The postcss-import solves it but i m trying to see if there is a better way without using that lib. – Mandark Jul 09 '21 at 20:09
  • is there any way to import JS file from node modules? – Swati Singh Aug 26 '22 at 05:17

1 Answers1

1

You can use next-transpile-modules package. The way you use it

// next.config.js
const withTM = require("next-transpile-modules");
const nextConfig = {...}

module.exports = withTM(["@shared"])(nextConfig);

Worked for me with no issues. I used rush.

Yusufbek
  • 2,180
  • 1
  • 17
  • 23