Import css from a file in shared module or node module in next js

Question

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

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