Next 13 /app目录下ReactToastify.css.map文件404错误求助

这个404错误是因为react-toastify的CSS文件里引用了不存在的.map源映射文件，Next.js处理CSS导入时会尝试加载该映射文件，但实际文件并未被正确打包或不存在。以下是几个可行的解决办法：

方法1：禁用CSS源映射 #

在next.config.js中配置禁用CSS源映射，让Next.js不再尝试加载任何CSS的.map文件，直接消除错误：

/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: false,
  cssMinimizerOptions: {
    minimizerOptions: {
      preset: ['default', { discardComments: { removeAll: true } }],
    },
  },
}

module.exports = nextConfig

方法2：导入压缩版CSS文件 #

react-toastify提供了不带源映射引用的压缩版CSS，替换原有导入语句即可：

import 'react-toastify/dist/ReactToastify.min.css'

方法3：手动添加源映射文件（不推荐） #

若必须保留源映射，可从react-toastify的npm包中找到ReactToastify.css.map文件，手动复制到Next.js的public目录下。但该方法繁琐，后续更新依赖时需重复操作。

补充说明 #

这个404报错不会影响Toast组件的功能和样式渲染，因为CSS本身已被正确加载，仅缺失源映射文件而已。如果不想改动配置，也可以直接忽略该错误，不影响项目正常运行。

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