@mui/icons-material + Vitest ES 模块问题

Question

我正在将我们的测试套件从 Jest 迁移到 Vitest。除了导致此错误的剩余少数测试外，所有测试均有效：

Module /home/d/code/frontend/node_modules/@mui/icons-material/esm/VisibilityOff.js:3 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@mui/icons-material" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "@mui/icons-material"
        ]
      }
    }
  }

我已经尝试了建议的解决方案，但没有成功。 我也尝试过

resolve: {
alias: [
  { find: '/@src', replacement: './src' },
  {
    find: /^@mui\/icons-material\/(.*)/,
    replacement: '@mui/icons-material/esm/$1',
  },
],
},

我已经尝试过了

  optimizeDeps: {
    include: ['@mui/icons-material'],
  },

我已经尝试过：

resolve: {
    alias: {
      "@mui/icons-material": "@mui/icons-material/esm",
    },
  },

我尝试过更改汇总选项

const baseRollupOptions: RollupOptions = {
   external: ['fs/promises', '@mui/icons-material'],
}

我已经尝试过了

  deps: {
    optimizer: {
      web: {
        include: [
          'react-cookie',
          'redux-signalr',
          '@mui/x-charts',
          '@babel/runtime',
          'd3-color',
          'd3-format',
          'd3-interpolate',
          'd3-scale',
          'd3-shape',
          'd3-time',
          'd3-time-format',
          'd3-path',
          'd3-array',
          'internmap',
          '@mui/icons-material',
        ],
        exclude: [
          'node_modules/(?!(@mui/icons-material|react-cookie|redux-signalr|@mui/x-charts|@babel/runtime|d3-(color|format|interpolate|scale|shape|time|time-format|path|array)|internmap)/)',
        ],
      },
    },
    external: [
      'node_modules/(?!(react-cookie|redux-signalr|@mui/x-charts|@babel/runtime|d3-(color|format|interpolate|scale|shape|time|time-format|path|array)|internmap)/)',
    ],
  },

当前似乎没有选项起作用。 奇怪的是，失败的测试似乎甚至没有使用这个特定的 mui 图标。我还运行了其他使用该图标的测试。 我还确保每次运行测试之前都清除了缓存(

rm -rf node_modules/.vite

)

Answer 1

只是在黑暗中拍摄，但您是否尝试同时设置

alias

和

server.deps.inline

？

我也遇到过类似的问题，这对我有帮助：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react() as any],
  test: {
    // ...
    
    alias: [
      {
        find: /^@mui\/icons-material\/(.*)/,
        replacement: '@mui/icons-material/esm/$1',
      },
    ],
    server: {
      deps: {
        inline: true,
        // or
        inline: ['@my/libA'],
      },
    },
  },
});

您可能想尝试将

inline: true

更改为更具体的内容，因为我猜它会对性能产生一些影响（https://vitest.dev/config/#server-deps-inline）。

就我而言，尝试您原来的

inline: ['@mui/icons-material']

行未能修复它。 我在导入链

@my/libA

之间有一个自定义的 esm 库

"@mui/icons-material -> @my/libA -> @my/appB

；设置

inline: ['@my/libA']

对我有用。

我原来的错误是这样的：

SyntaxError: Named export 'ArrowForward' not found. 
The requested module '@mui/icons-material' is a CommonJS module, 
which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@mui/icons-material';

---

顺便说一句，您发布的错误是在将任何别名应用于

@mui/icons-material

之前发布的错误还是上面的错误？