[V5] next.js 使用报错：Global CSS cannot be imported from within node_modules.

[TinsFox]

请求帮助如何在next中使用antd mobile v5
根据文档步骤

yarn add antd-mobile@next

在页面中引入

// pages/index.tsx
import type { NextPage } from 'next'
import {Button}  from 'antd-mobile/es/components/button'
const Home: NextPage = () => {
  return (
    <div>
      <Button>123</Button>
    </div>
  )
}
export default Home

会导致报错 Global CSS cannot be imported from within node_modules.

同时import {Button} from 'antd-mobile/es/components/button' vs code 提示模块 ""antd-mobile/es/components/button"" 没有导出的成员 "Button"。你是想改用 "import Button from "antd-mobile/es/components/button"" 吗?

导入方式修改为import Button from 'antd-mobile/es/components/button' 后就没有vs code 的报错了

请问是需要配置.babelrc 跟 next.config.js吗？
配置以下文件，仍然出现 Global CSS cannot be imported from within node_modules.与一个新的错误 Cannot use import statement outside a module

// .babelrc
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd-mobile",
                "libraryDirectory": "es/components",
                "style": false
            }
        ]
    ]
}

// next.config.js
/** @type {import('next').NextConfig} */
const path = require('path')
function moduleDir(m) {
  return path.dirname(require.resolve(`${m}/package.json`))
}
module.exports = {
  reactStrictMode: true,
  webpack: (config, { dev }) => {
    config.resolve.extensions = ['.web.js', '.js', '.jsx', '.json','tsx']

    config.module.rules.push(
      {
        test: /\.(svg)$/i,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        },
        include: [
          moduleDir('antd-mobile'),
          __dirname
        ]
      },
      {
        test: /\.(svg)$/i,
        loader: 'svg-sprite-loader',
        include: [
          moduleDir('antd-mobile'),
          __dirname
        ]
      }
    )

    return config
  }
}

复现仓库：https://github.com/TinsFox/react-app-antd-v5

[awmleer]

已复现，原因是这个：https://nextjs.org/docs/messages/css-npm
需要组件库对 CSS 的引入方式做调整

[awmleer]

最新版本已支持：https://mobile.ant.design/guide/ssr

[MrZhangFengfeng]

@awmleer 请问这个问题上面提到需要组件库对CSS引入方式做调整。 这一块目前支持了吗？因为今天试了下，这个报错还是存在

[awmleer]

@awmleer 请问这个问题上面提到需要组件库对CSS引入方式做调整。 这一块目前支持了吗？因为今天试了下，这个报错还是存在

@MrZhangFengfeng 你按照这篇文档里描述的方式配置了么：https://mobile.ant.design/guide/ssr

[frljx]

@awmleer 不使用ssr也需要参照使用next.js的配置吗？

[awmleer]

@frljx 应该是的

[ilovcoding]

解决了吗 ？我看报错依然存在 NextJS v 13.4.7

[MrZhangFengfeng]

您好，我已收到你的邮件，我会尽快回复。谢谢。

[shunshunyue]

当使用 next-compose-plugins 这个 时
应该这样 配置

const withPlugins = require('next-compose-plugins')
const withAntdLess = require('next-plugin-antd-less')
const pluginAntdLess = withAntdLess({
modifyVars: { '@primary-color': '#FE8635' },
})
const withTM = require('next-transpile-modules')([
'antd-mobile',
]);

module.exports = withPlugins([pluginAntdLess,withTM] ,{
// 你的配置
}）

而不是

module.exports = withTM({
// 你项目中其他的 Next.js 配置
});

[karshey]

在antd-mobile的文档里有解决方法：https://mobile.ant.design/zh/guide/ssr
在next.config.js里配置即可：
const nextConfig = {
transpilePackages: ['antd-mobile'],
};

[MrZhangFengfeng]

您好，我已收到你的邮件，我会尽快回复。谢谢。