next-transpile-modules: Can't build CSS（Next.js v13）

• I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
• 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.