项目运行报错：ERROR in ./node_modules/swr/dist/index/index.mjs 301:36-47 Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

截取部分报错信息如下：

 error  in ./node_modules/swr/dist/index/index.mjs

Can't import the named export 'useRef' from non EcmaScript module (only default export is available)

 error  in ./node_modules/swr/dist/_internal/config-context-client-x_C9_NWC.mjs

Can't import the named export 'useRef' from non EcmaScript module (only default export is available)

 error  in ./node_modules/swr/dist/index/index.mjs

Can't import the named export 'useSyncExternalStore' from non EcmaScript module (only default export is available)


ERROR in ./node_modules/swr/dist/_internal/config-context-client-x_C9_NWC.mjs 724:23-36
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)
 @ ./node_modules/swr/dist/_internal/index.mjs
 @ ./node_modules/swr/dist/index/index.mjs
 @ ./node_modules/@ant-design/pro-provider/es/index.js
 @ ./node_modules/@ant-design/pro-utils/es/index.js
 @ ./node_modules/@ant-design/pro-form/es/index.js
 @ ./src/OrderInfo/index.tsx
 @ ./src/index.ts
 @ ./src/.umi/dumi/demos/index.ts
 @ ./src/.umi/dumi/layout.tsx
 @ ./src/.umi/core/routes.ts
 @ ./src/.umi/umi.ts
 @ multi ./src/.umi/umi.ts

ERROR in ./node_modules/swr/dist/_internal/config-context-client-x_C9_NWC.mjs 760:9-22
Can't import the named export 'createElement' from non EcmaScript module (only default export is available)
 @ ./node_modules/swr/dist/_internal/index.mjs
 @ ./node_modules/swr/dist/index/index.mjs
 @ ./node_modules/@ant-design/pro-provider/es/index.js
 @ ./node_modules/@ant-design/pro-utils/es/index.js
 @ ./node_modules/@ant-design/pro-form/es/index.js
 @ ./src/OrderInfo/index.tsx
 @ ./src/index.ts
 @ ./src/.umi/dumi/demos/index.ts
 @ ./src/.umi/dumi/layout.tsx
 @ ./src/.umi/core/routes.ts
 @ ./src/.umi/umi.ts
 @ multi ./src/.umi/umi.ts

上述错误信息表明尝试从一个非 EcmaScript 模块（例如 CommonJS 模块）中导入命名导出（named export），但该模块只提供默认导出（default export）。

具体来说，错误信息中的 createElement 是一个命名导出，而你尝试从一个只提供默认导出的模块中导入它。这通常发生在你使用 ES 模块语法（如 import { createElement } from 'module'）导入一个 CommonJS 模块时。

要解决上述问题，在 webpack.config.js 中添加以下配置，强制将 swr 解析为 ES 模块

module.exports = {
  // ...existing code...
  module: {
    rules: [
      // ...existing rules...
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  }
  // ...existing code...
};

如果是umi脚手架，则在.umirc.ts文件中添加如下内容：

import { defineConfig } from 'dumi';
import path from 'path';

export default defineConfig({
  // ...其他配置
  chainWebpack(config) {
    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .include.add(/node_modules/)
      .end()
      .type('javascript/auto');
  },
});