javascript - next.js引用antd的时候报SyntaxError: Cannot use import statement outside a module?

Question

next.js创建的新项目中引入antd时出现SyntaxError: Cannot use import statement outside a module

我在命令行中用以下命令创建了next.js的新项目，以及一些选择

当我运行这个项目的时候，是没有问题的，结果如下

可是当我尝试引入一些库，比如antd的时候，当我再次运行的时候，就出现了问题

令我感到奇怪的是，当我使用应用路由而不是页面路由的时候，就没有这个问题了


请问如果项目最初选择的是应用路由的话，该如何设置，才能解决这个问题呢？
另外导致这个问题的原因涉及哪些方面的知识，可以学习些什么内容呢？

Answer 1

这个问题的出现可能是由于Next.js和Ant Design之间的模块解析方式不兼容所导致的。Next.js使用的是Rollup作为其打包工具，而Ant Design可能默认使用的是Webpack。这可能导致在解析import语句时出现问题。

一种可能的解决方案是在你的Next.js项目中安装并配置babel-plugin-import。这个插件可以让Babel在打包时将Ant Design的样式和脚本按需加载，从而避免直接使用import语句。

你可以按照以下步骤进行操作：

1. 首先，你需要安装babel-plugin-import和babel-preset-next：

npm install --save-dev babel-plugin-import babel-preset-next

2. 然后在.babelrc文件中添加以下配置：

{  "presets": ["next"],  "plugins": [    ["import", { "libraryName": "antd", "style": "css" }]  ]}

3. 最后，在你的next.config.js文件中，添加以下配置：

module.exports = {  webpack: (config, { dev, isServer }) => {    if (!dev && isServer) {      config.resolve.fallback = { ...config.resolve.fallback, fs: false };    }    return config;  },};

以上步骤可以解决你的问题。如果你仍然遇到问题，可能需要检查你的项目配置，确保没有其他地方干扰了模块解析。