Next.js导入markdown-toc时出现Cannot statically analyse 'require(…, …)'错误的问题咨询

这个问题我之前在项目里碰到过，本质是Next.js默认的Webpack打包器在静态分析模块时，不支持require函数带第二个参数的语法，而markdown-toc的lib/utils.js文件里正好用了这种写法，所以才会抛出Cannot statically analyse 'require(…, …)'的错误。下面给你两个实用的解决方案：

方案一：使用动态导入绕过静态分析 #

直接把静态导入改成ES模块的动态导入，让Next.js在运行时加载markdown-toc，这样就能避开静态分析的限制。示例代码如下：

// pages/index.js
import { useState, useEffect } from 'react';

export default function Home() {
  const [tocGenerator, setTocGenerator] = useState(null);

  // 组件挂载时动态加载markdown-toc
  useEffect(() => {
    import('markdown-toc').then(module => {
      setTocGenerator(module.default);
    });
  }, []);

  // 等待加载完成再使用
  if (!tocGenerator) {
    return <div>Loading table of contents generator...</div>;
  }

  // 示例：生成markdown的目录
  const sampleMarkdown = `
# 我的文章标题
## 第一章 入门指南
### 1.1 什么是Markdown
### 1.2 基本语法
## 第二章 进阶技巧
`;
  const tocResult = tocGenerator(sampleMarkdown);

  return (
    <div>
      <h2>生成的目录：</h2>
      <pre>{JSON.stringify(tocResult, null, 2)}</pre>
    </div>
  );
}

方案二：修改Webpack配置让它支持该语法 #

如果你一定要用静态导入，可以修改Next.js的Webpack配置，让babel处理markdown-toc的文件，把CommonJS语法转成Webpack能识别的格式。在项目根目录的next.config.js里添加如下配置：

// next.config.js
module.exports = {
  webpack: (config) => {
    // 针对markdown-toc的utils.js文件启用babel转换
    config.module.rules.push({
      test: /markdown-toc\/lib\/utils.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['next/babel'],
          plugins: ['@babel/plugin-transform-modules-commonjs']
        }
      }
    });
    return config;
  }
};

配置完成后，你就可以正常使用import toc from "markdown-toc";的静态导入方式了。

个人更推荐方案一，因为它不需要额外配置，而且符合Next.js对代码分割的优化方向，还能减少初始加载的包体积。

内容的提问来源于stack exchange，提问作者Rahul