我如何配置一个Nextjs项目来编译一个单线程项目与下一个bundle分析器?

Question

我想用编译monorepo配置下一个js包分析器。
加载器有一个错误消息。所以我做了堆栈溢出但它仍然有误差。
我如何配置一个Nextjs项目来编译一个单线程项目与下一个bundle分析器?

这是我的错误信息。

[0] error - ../../node_modules/antd/lib/message/style/index.less
[0] Module parse failed: Unexpected character '@' (1:0)
[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
[0] > @import '../../style/themes/index';
[0] | @import '../../style/mixins/index';
[0] |

这是我的next.config.js。

const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const withAntdLess = require('next-plugin-antd-less')
const themeColor = require('../../themeColor')
const withPlugins = require('next-compose-plugins')
const PACKAGE_NAMES = ['@package/ui', '@package/types'] // Add new packages to this array when imported into this app
const withTM = require('next-transpile-modules')(PACKAGE_NAMES)
const nextConfig = {
lessVarsFilePath: './src/styles/variables.less',
reactStrictMode: false,
pageExtensions: ['page.tsx', 'page.ts'],
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback.fs = false
config.resolve.fallback.module = false
}
config.module.rules.push({
test: /.svg$/,
use: ['@svgr/webpack'],
})
return config
},
}
module.exports = withPlugins([
[withBundleAnalyzer],
[
withTM(
withAntdLess({
modifyVars: {
'@primary-color': themeColor.primary,
'@font-size-base': '15px',
'@font-family': "'Spoqa Han Sans Neo', 'sans-serif'",
'@font-size-lg': '15px',
'@font-size-sm': '13px',
'@divider-color': themeColor.bgOptional,
'@link-decoration': 'unset',
'@link-hover-decoration': 'unset',
'@link-focus-decoration': 'unset',
'@link-color': 'unset',
'@link-hover-color': 'unset',
'@link-active-color': 'unset',
},
}),
),
],
nextConfig,
])

Answer 1

首先确保您已经安装了正确的包分析器。然后编辑你的next.config.js，并尝试按照推荐的方式组织你的代码:

const withTM = require('next-transpile-modules')([
'ui',
'assets',
...
]);
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer(withTM({
reactStrictMode: true,
...other options
}));

在构建应用程序时，只需执行ANALYZE=true npm run build。