ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.61k stars 2.39k forks source link

升级NextJs14后无法使用 #6424

Closed zzqVip closed 10 months ago

zzqVip commented 10 months ago

Version of antd-mobile

5.32.0

Operating system and its version

Others

Browser and its version

chrome 118.0.5993.120

Sandbox to reproduce

No response

What happened?

更新NextJs到14.0.1之后css文件出现问题 报错:TypeError: config.watchOptions.ignored.filter is not a function or its return value is not iterable 分享:使用了官方示例的 const withTM = require('next-transpile-modules')([ 'antd-mobile', ]); 当我注释了上面的代码之后可以跑起来,但是这个配置是在NextJs中必须的配置!

Relevant log output

TypeError: config.watchOptions.ignored.filter is not a function or its return value is not iterable
    at Object.webpack (C:\PerfLogs\test\App-Frontend\node_modules\next-transpile-modules\src\next-transpile-modules.js:265:42)
    at getBaseWebpackConfig (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\build\webpack-config.js:1713:32)
    at async Promise.all (index 1)
    at async Span.traceAsyncFn (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\trace\trace.js:105:20)
    at async Span.traceAsyncFn (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\trace\trace.js:105:20)
    at async HotReloader.start (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\server\dev\hot-reloader-webpack.js:595:37)
    at async startWatcher (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:1140:5)
    at async setupDevBundler (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:1746:20)
    at async initialize (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\server\lib\router-server.js:69:30)
    at async Server.<anonymous> (C:\PerfLogs\test\App-Frontend\node_modules\next\dist\server\lib\start-server.js:236:36)
zombieJ commented 10 months ago

有 repo 看看么

zzqVip commented 10 months ago

有回购看看么 你好,就是升级之后报错TypeError: config.watchOptions.ignored.filter is not a function or its return value is not iterable 项目起不来,然后排查到就是 const withAntdLess = require("next-plugin-antd-less"); const withTM = require('next-transpile-modules')([ 'antd-mobile', ]); module.exports = withTM( withAntdLess({ cssModules: true, forceSwcTransforms: true, modifyVars: { "@bgAlmostBlack": "rgb(24, 26, 30)", // card background "@hoverBgAlmostBlack": "#14151A", "@textLightGray": "rgb(118, 128, 143)", // for text "@bg": "rgb(30, 32, 38)", // general background "@numberWinning": "rgb(12, 192, 127)", // for number of winning "@tokenIconBg": "#111", // for token icon background "@primaryGreen": "#50F6BF", // for primary green }, i18n: { defaultLocale: "en", locales: ["en", "zh_CN"], }, images: { domains: ["assets.cbindex.finance", "pbs.twimg.com", "lh3.googleusercontent.com"], }, }) ); 外面加了一层官方示例的withTM导致的这个问题,我注释之后就可以了。可是注释之后就会出现css文件的问题~

IronKinoko commented 10 months ago

image 应该是 next-transpile-modules 还没适配 nextjs 14 吧

zzqVip commented 10 months ago

image 应该是 next-transpile-modules 还没适配 nextjs 14 吧 好滴谢谢 那先回退了~