1

我想用转译 monorepo 配置下一个 js 包分析器。
我有一条关于加载程序的错误消息。所以我做了这个堆栈溢出 但它仍然有错误。
如何配置 Nextjs 项目以使用下一个捆绑分析器转换 monorepo 项目？

这是我的错误信息。

[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,
])
4

1 回答 1

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.

于 2022-01-31T17:49:17.573 回答