Next.js中Babel与TailwindCSS问题：找不到模块'xwind/babel'

问题场景 #

• 创建项目的命令：

  npx create-next-app -e with-tailwindcss ./
  

• 额外安装的依赖：

  npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
  

• 运行时触发的错误：

  error - ./node_modules/next/dist/client/dev/amp-dev.js
  Error: Cannot find module 'xwind/babel'

解决方法 #

1. 移除误加的xwind配置 #

你并未安装xwind依赖，大概率是配置文件中不小心添加了相关配置：

• 打开项目根目录的babel.config.js，如果存在xwind/babel相关插件配置，直接删除该行。
• 检查next.config.js，确认没有启用xwind相关的webpack或babel配置项。

2. 清理依赖缓存并重装 #

依赖缓存异常可能导致该问题，执行以下命令：

rm -rf node_modules package-lock.json
npm install

3. 排查间接依赖的xwind #

部分第三方依赖可能间接引入了xwind，执行以下命令查看依赖树定位来源：

npm ls xwind

找到对应依赖后，尝试更新该包版本，或替换为功能类似的替代包。

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