NextJS 13中无法导入validator模块问题求助

问题描述 #

NextJS 13项目出现模块导入异常，报错如下：

./application/sign_in/sign_in_store.ts:2:0
Module not found: Can't resolve 'validator'
  1 | import { createEvent, createStore } from "effector"
> 2 | import validator from "validator"
  3 | 
  4 | interface SignInStore {
  5 |   email: string

Import trace for requested module:
./app/prihlaseni/page.tsx

此前validator模块可正常导入使用，目前无法引入。已尝试删除package-lock.json、反复安装卸载validator依赖，问题仍未解决。相关代码片段：

import { createEvent, createStore } from "effector"
import validator from "validator"

interface SignInStore {
  email: string
  password: string
  showEmailErrorMessage: boolean
  showPasswordErrorMessage: boolean
  signInButtonEnabled: boolean
}
export const emailChanged = createEvent<string>()
export const passwordChanged = createEvent<string>()
export const signInRequested = createEvent()
export default createStore<SignInStore>({
  email: "",
  password: "",
  showEmailErrorMessage: false,
  showPasswordErrorMessage: false,
  signInButtonEnabled: false,
})

可能的解决方法 #

• 指定兼容版本安装：NextJS 13对模块格式要求更严格，validator v14+默认使用ES模块，若项目配置未适配，可降级安装稳定兼容版：npm install validator@13.7.0
• 调整导入方式：若使用v14+版本，尝试改为命名空间导入：import * as validator from 'validator'；或者在项目package.json中添加"type": "module"声明（注意此操作会影响项目中所有CommonJS风格的导入）
• 彻底清理依赖缓存：删除node_modules文件夹，执行npm cache clean --force清空缓存，再重新执行npm install
• 配置NextJS转译模块：在next.config.js中将validator加入transpilePackages数组，强制NextJS转译该模块：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['validator'],
  }
  
  module.exports = nextConfig
  

• 换用包管理器重试：若npm安装失败，尝试用yarn安装：yarn add validator，安装后检查package.json是否存在validator依赖、node_modules/validator文件夹是否生成

内容的提问来源于stack exchange，提问作者Jan Cahlík