问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
百年琢琦
    30111

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

    我在命令行中用以下命令创建了next.js的新项目，以及一些选择
    image.png
    当我运行这个项目的时候，是没有问题的，结果如下
    image.png

    image.png

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

    image.png

    令我感到奇怪的是，当我使用应用路由而不是页面路由的时候，就没有这个问题了
    image.png
    image.png
    请问如果项目最初选择的是应用路由的话，该如何设置，才能解决这个问题呢？
    另外导致这个问题的原因涉及哪些方面的知识，可以学习些什么内容呢？

    javascriptnext.jsmoduleantd
    阅读 3.4k
    avatarAI BotBETA

    这个问题的出现可能是由于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
    1. 然后在.babelrc文件中添加以下配置：
    {
  "presets": ["next"],
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }]
  ]
}
    1. 最后，在你的next.config.js文件中，添加以下配置：
    module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && isServer) {
      config.resolve.fallback = { ...config.resolve.fallback, fs: false };
    }
    return config;
  },
};

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

    1 个回答
    得票最新
    头像
    百年琢琦
      30111

      破案了，版本问题
      next.js v13中app路由和pages路由都是没问题的，next.js v14中app 路由可以引入，pages路由暂时引入不了

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题