Vite 构建工程中,cdn 引入 react 报错问题

255 阅读1分钟

164256862-15b41371-c1e2-4018-b007-01685c72d813.png

可以使用这个插件​ vite-plugin-external解决了上述问题。



import vitePluginExternal from 'vite-plugin-external';
// ...
plugins: [
importToCDN({
        modules: [
          {
            name: 'react',
            var: 'React',
            path: 'https://unpkg.com/react@18.3.1/umd/react.production.min.js',
          },
          {
            name: 'react-dom',
            var: 'ReactDOM',
            path: 'https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js',
          },
        ],
      }),
      mode === 'production' &&
      //这段是解决问题的
        vitePluginExternal({
          interop: 'auto',
          externals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
        }),
    ].filter(Boolean)
]