Next.js引入react-secuuth报Cannot use import outside module错误如何解决？

根因说明 #

该报错的本质是你开发的react-secuuth及依赖的secuuth-sdk-core包构建产物使用了ES模块的import语法，但包的package.json未声明"type": "module"，Node.js默认会将.js后缀文件识别为CommonJS模块，遇到import语法就会抛出错误。普通React项目默认会编译node_modules下的所有依赖，因此不会触发该问题；而Next.js默认不会编译node_modules下的第三方依赖，服务端渲染阶段Node.js直接加载包产物时就会触发报错。

解决方案 #

方案1：作为包作者永久修复（推荐） #

这是一劳永逸的方案，修改后所有使用该包的用户都不会遇到同类问题：

• 在react-secuuth和secuuth-sdk-core两个包的package.json中添加配置项"type": "module"，明确声明包为ES模块
• 修改打包配置，同时输出ES模块和CommonJS两种格式的产物，在package.json中配置对应的入口字段：

  {
    "main": "./dist/index.cjs",
    "module": "./dist/index.js",
    "exports": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    }
  }
  

• 如果你使用tsup、rollup等打包工具，直接配置输出两种格式即可，以tsup为例：tsup src/index.ts --format esm,cjs
• 配置修改完成后重新发布npm包即可。

方案2：Next.js项目使用者临时修复 #

如果暂时不想调整npm包配置，使用包的开发者可以在自己的Next.js项目中添加配置解决：

• 在项目根目录的next.config.js中添加transpilePackages配置，指定需要Next.js编译的第三方包：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['react-secuuth', 'secuuth-sdk-core']
  }
  
  module.exports = nextConfig
  

• 如果你使用的是Next.js 13+的App Router，且该组件仅在客户端运行，可以在引入包的文件顶部添加'use client'指令：

  'use client'
  import Secuuth from 'react-secuuth';
  

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