pro-components 🐛[BUG] antd 4 中未暴露 theme，编译报错

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from 'antd';

Antd 4 中未暴露 theme 属性，当前编译报错

© 版本信息

@ant-design/pro-provider @ 2.0.2

🚑 其他信息

Sep 03 '22 09:09 yee94

这个问题太坑了。。这2天正好在弄。。。结果给卡住了

Sep 03 '22 18:09 liuhuapiaoyuan

这个什么时候能修复呢？等着用，谢谢

Sep 05 '22 02:09 hustcer

同问

Sep 05 '22 03:09 hqwlkj

确实有这个问题，暂时写了个脚本启动前在ES文件写入了export const theme = null;临时解决了下，不然vite下完全用不了。

Sep 05 '22 03:09 xukechu

确实有这个问题，暂时写了个脚本启动前在ES文件写入了export const theme = null;临时解决了下，不然vite下完全用不了。

照你的方法处理完以后还会有新的错误 `Remix App Server started at http://localhost:3000 (http://172.16.0.232:3000) /Users/user/test-proj/node_modules/@ant-design/pro-components/es/index.js:1 export * from '@ant-design/pro-card'; ^^^^^^

SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:1001:16) at Module._compile (internal/modules/cjs/loader.js:1049:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:92:18) at Object. (/Users/user/test-proj/app/routes/index.jsx:2:38) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) GET / 500 - - 38.846 ms`

Sep 05 '22 10:09 baidan4855

是在antd/es/index.js文件下追加一个"export const theme = null;"

Sep 06 '22 01:09 xukechu

确实有这个问题，暂时写了个脚本启动前在ES文件写入了export const theme = null;临时解决了下，不然vite下完全用不了。

照你的方法处理完以后还会有新的错误 `Remix App Server started at http://localhost:3000 (http://172.16.0.232:3000) /Users/user/test-proj/node_modules/@ant-design/pro-components/es/index.js:1 export * from '@ant-design/pro-card'; ^^^^^^

SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:1001:16) at Module._compile (internal/modules/cjs/loader.js:1049:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:92:18) at Object. (/Users/user/test-proj/app/routes/index.jsx:2:38) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) GET / 500 - - 38.846 ms`

`import path from "path"; import fs from "fs/promises";

/**

antd es/index.js文件打个 export const theme = null; 补丁避免pro-x组件失败
*/ async function shim() { const esFilePath = path.resolve( process.cwd(), "node_modules/antd/es/index.js" ); try { const result = await fs.readFile(esFilePath, "utf-8"); if (!result.includes("export const theme = null")) { await fs.appendFile(esFilePath, export const theme = null;, "utf-8"); } } catch (e) { console.error(e); } }

shim(); `

Sep 06 '22 01:09 xukechu

我直接把这个文件修改了下，在末尾加上这个导出，不过我是用的remix不是vite。

Sep 06 '22 02:09 baidan4855

这个配置是添加在哪里的？

@xukechu

Sep 06 '22 06:09 hqwlkj

这个配置是添加在哪里的？

@xukechu

node_modules/antd/es/index.js

Sep 08 '22 02:09 xukechu

这个配置是添加在哪里的？ @xukechu

node_modules/antd/es/index.js

没有什么作用，会导致其他问题的出现，我以前是使用 vite 一直报错，现在换成了 umi 没有报错了。

Sep 08 '22 02:09 hqwlkj

https://github.com/ant-design/pro-components/issues/5762#issuecomment-1240310513

Sep 08 '22 07:09 Chastrlove

import react from '@vitejs/plugin-react'
import { readFile } from 'fs/promises'
import * as path from 'path'
import { defineConfig } from 'vite'
import ignoreStylePlugin from 'vite-ignore-style'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/indexed-algorithm/',
  plugins: [
    react(),
    ignoreStylePlugin({
      libraryName: 'antd'
    }),
    {
      // 升级antd 5 后删除
      name: 'add-missing-theme',
      apply: 'build',
      transform: (code, id) => {
        const reg = /antd(?:\/|\\{1,2})es(?:\/|\\{1,2})index\.js/
        if (reg.test(id)) {
          return `${code}\nexport const theme = undefined;`
        }
        return code
      }
    }
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          '@root-entry-name': 'variable'
        },
        javascriptEnabled: true
      }
    }
  },
  resolve: {
    alias: [
      { find: /^~/, replacement: '' },
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
        // 升级antd 5 后删除
          name: 'add-missing-theme',
          setup(build) {
            build.onLoad(
              { filter: /antd(?:\/|\\{1,2})es(?:\/|\\{1,2})index\.js/ },
              async (args) => {
                const text = await readFile(args.path, 'utf8')
                return {
                  contents: `${text}\nexport const theme = undefined;`,
                  loader: 'js'
                }
              }
            )
          }
        }
      ]
    }
  }
})