CRA项目结合vite使用遇到的问题及解决办法

• 报错1：The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

export default defineConfig({
  plugins: [react({
    babel: {
      plugins: ['@babel/plugin-transform-react-jsx']
    }
  })],
  resolve: {
    alias: { // 配置别名
      '@': resolve('src')
    }
  },
  esbuild: {
    loader: 'jsx',
    include: /src\/.*\.jsx?$/,
    // include: /src\/.*\.[tj]sx?$/,
    exclude: []
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: { '.js': 'jsx' }, //***********加上这行
      plugins: [
        {
          name: 'load-js-files-as-jsx',
          setup (build) {
            build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
              loader: 'jsx',
              contents: await fs.readFile(args.path, 'utf8')
            }))
          }
        }
      ]
    }
  },
  extensions: ['.js', '.jsx', '.json', '.png']
})

• 报错2：[vite] Internal server error: URI malformed at decodeURI ()
  错因：vite解析不了相对路径，因此要把index.html里面的所有相对路径变成绝对路径：把index.html里面所有%PUBLIC%删去

• 报错3： (index):1 Uncaught SyntaxError: The requested module '/src/assets/header/log_out.svg?import' does not provide an export named 'ReactComponent'

1. npm install vite-plugin-svgr -D
2. vite.conig.js里面pulgins加svgr()

import svgr from 'vite-plugin-svgr'
export default defineConfig({
    plugins: [svgr(), react({
        babel: {
          plugins: ['@babel/plugin-transform-react-jsx']
        }
      })]
})

3. 找到对应报错的SVG加上?.component在后面

import { ReactComponent as LogOut } from '@/assets/header/log_out.svg?component'

4. 这个时候按理来说已经ok，但是还是出现了报错，于是检查发现，以上代码还出现相对路径问题没有解决，于是vite找不到对应的代码在哪里，鉴于项目多地用到@使用相对路径，因此在vite.config.js中处理，加上一下代码

import svgr from 'vite-plugin-react-svg'
export default defineConfig({
    resolve: {
        alias: { // 配置别名
          '@': resolve(__dirname, '.', 'src') // 把所有的@相对路径都变成src
        }
      }
})

• 报错4： Uncaught ReferenceError: global is not defined ——iconv转化编码的时候出现错误

主因在于该包原来有bug，在原包的issue中，作者提到他创建了一个修补程序，但无法创建 PR，因为它与 master 不是最新的，并且 master 现在离这个版本太远了。因此，如果有人遇到此问题，可以下载下面的包修复程序

npm install raschidjfr/iconv-lite#hotfix/v0.6.3

• 问题5 antd样式失效部分问题，查看原来的webpack配置中有按需引入的配置，同样的只需要在vite配置中加入antd的配置即可

import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
  plugins: [
    // ...
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style(name) {
            // use less
            return `antd/es/${name}/style/index.js`
          }
        },
      ]
    })
  ]
})

• 问题6 vite发请求报错404，但是原来的CRA项目中的webpack设置的能收到200请求，于是判断可能是反向代理的问题，于是判断反向代理没配

export default defineConfig({
  // 设置代理
  server: {
    proxy: {
      '/../..': {
        target: 'http://....',
        changeOrigin: true
      }
  }
}