Can't build CSS（Next.js v13）

[KushibikiMashu]

• [x] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
• [x] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Are you trying to transpile a local package or an npm package? If an npm package, which one?

Any packages. For example, react-use.

Describe the bug A clear and concise description of what the bug is (please include logs from your terminal with debug enabled).

My next.config.js is like:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental:{appDir: true},
}

const withTM = require('next-transpile-modules')([
  'react-use',
], {debug: true})

module.exports = withTM(nextConfig)

Try yarn dev and you'll get an error.

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;
TypeError: Cannot read properties of undefined (reading 'default')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1298:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:320:14)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1934:55)

I use Next.js v13. A file app/layout.tsx imports app/global.css. The error is caused by this CSS file.

// app/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

When an array given to next-transpile-modules is empty, yarn dev doesn't output an error and can build successfully.

const withTM = require('next-transpile-modules')([])

To Reproduce Steps to reproduce the behavior (a reproduction is even better):

This is a repo for repro.

https://github.com/KushibikiMashu/repro-next-transpile-module-tailwind

Expected behavior A clear and concise description of what you expected to happen.

Setup

• Next.js version: 13.0.2
• next-transpile-modules version: ^10.0.0
• Node.js version: v16.12.0
• yarn version: 1.22.10
• Operating System: MacOS 12.6
• Webpack 4 or 5: 5

Additional context Add any other context about the problem here.

[martpie]

Thanks for reporting this, I'll try to have a look as soon as I can

[KushibikiMashu]

Thank you for a quick response. I'm not in a hurry. Take your time :)

[julianomcl]

I am having the same problem.

[ramiAbdou]

No hurry for me either, but confirming that this is also happening for me too.

[controversial]

I have the same problem using Sass in my project:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @use './reset';
| @use './typography-imports';
| @use './typography';
TypeError: Cannot read properties of undefined (reading 'default')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/../../node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)

The import that breaks is in app/layout.jsx:

import '@my-org/design-system/styles/global/base.scss';

If I move back to the pages directory (i.e. in pages/_app.jsx), then the same import works perfectly.

[murad-alqadi]

I am having an identical issue with Tailwind breaking when wrapping nextjs config with next-transpile-modules

[tuahear]

Same here

[controversial]

as of a recent release, the built in next.js experimental.transpilePackages functionality now supports CSS/SCSS/SASS as well as CSS/SCSS/SASS modules—which is all the functionality I needed in order to switch my project over.

[martpie]

Thanks @controversial for surfacing this (I'm not reading all of Next's canary changelogs), I'll have to try this!

[murad-alqadi]

as of a recent release, the built in next.js experimental.transpilePackages functionality now supports CSS/SCSS/SASS as well as CSS/SCSS/SASS modules—which is all the functionality I needed in order to switch my project over.

This was a huge help! Thank you for bringing this to our attention. It worked without a hitch in our turborepo.

I believe it would be beneficial to the community if this feature were added to the beta docs.

[martpie]

I believe it would be beneficial to the community if this feature were added to the beta docs.

it is there https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages

also: https://github.com/vercel/next.js/discussions/42136

[murad-alqadi]

I believe it would be beneficial to the community if this feature were added to the beta docs.

it is there https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages

also: https://github.com/vercel/next.js/discussions/42136

Got it. Thank you!

[martpie]

as of a recent release, the built in next.js experimental.transpilePackages functionality now supports CSS/SCSS/SASS as well as CSS/SCSS/SASS modules—which is all the functionality I needed in order to switch my project over.

@controversial I cannot make it work with Next.js 13.0.4, do you have a repo/reproduction I could have a look at? For me, both .module.css and global css import don't work.

[martpie]

Nevermind, I can reproduce it with yarn workspaces. It is just not working yet with a classic npm setup. I will try to maintain a compatibility table in https://github.com/vercel/next.js/discussions/42136

[controversial]

I’m not sure exactly what you mean by a “classic NPM setup” — I’m using npm workspaces in my project. I can put together a reproduction if it’s not working in npm workspaces for you?

[devsparkles]

its still there for me in next 14

npm run dev on a fresh install right now

Import trace for requested module: ./src/app/globals.css ./src/app/layout.tsx ⨯ ./src/app/globals.css Module parse failed: Unexpected character '@' (1:0)

@tailwind base; | @tailwind components; | @tailwind utilities;

Import trace for requested module: ./src/app/globals.css ./src/app/layout.tsx ⨯ ./src/app/globals.css Module parse failed: Unexpected character '@' (1:0)

[mulkrajsingh]

+1 in "next": "14.2.3" @devsparkles did you get any fix?

[BATTLEROYALXS]

Same here with 14.2.4

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| html,
| body,
> #__next {
|   width: 100%;
|   /* To smooth any scrolling behavior */

Import trace for requested module:
./app/globals.css```

[nolafs]

Not working for me either. Any work arounds???

[mulkrajsingh]

@nolafs Don't know if this will help you, but for me it was my windows problem. Once I reset my windows (11), it started to work. Before that I tired everything (re-installing npm, node etc) but nothing worked.

[tsz1412]

not working for me either. On Mac OS

did somone manage to solve this?

[mulkrajsingh]

@tsz1412 May be this will help, if there is any equivalent of it in mac os https://github.com/vercel/next.js/discussions/66616#discussioncomment-10712131