vite-plugin-react: vite config external react error ?

vite 配置 external react库，无法正确加载解析

react 库是我直接拷贝 node_modules/react/umd/react.production.min.js 文件，发布到自定义 cdn 上面

具体配置如下

rollupOptions: {
    external: ['react', 'react-dom'],
    output: {
      globals: {
        react: 'React',
        'react-dom': 'ReactDom'
      }
    }
  }

系统信息

node 14.16.0 vite2.0.1

报错信息如下

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 18 (5 by maintainers)

Most upvoted comments

Use resolve.alias, and use an ESM-compiled CDN such as skypack.dev.

A working config:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      'react': 'https://cdn.skypack.dev/react@17',
      'react-dom': 'https://cdn.skypack.dev/react-dom@17'
    }
  },
  plugins: [reactRefresh()]
});

rollupOptions.external and rollupOptions.output.globals are not suitable for this use case, unless you are only building for legacy browsers, targeting cjs in lib output, or bundling for SSR.

+11

sodatea on May 8, 2021

Then, please check out https://github.com/eight04/rollup-plugin-external-globals

还是一样的

cixing on May 26, 2022

Then, please check out https://github.com/eight04/rollup-plugin-external-globals

sodatea on May 10, 2021

try this way vite-plugin-external

fengxinming on Jul 25, 2021

You can try https://github.com/MMF-FE/vite-plugin-cdn-import

vfasky on May 17, 2021

@sodatea but resolve.alias does not allow referencing React available gloally as window.React. This is the behavior Webpack externals supports and is necessary if you are building an app that is part of a microfrontend where React is globally available to all microapps. Is there another way of referencing a dependency that is defined on the global window object? This is only necessary for a production build, but this would not be a problem with conditional vite config.

jansepke on May 9, 2021

Hi I looked at it and yeah this not how it works. Vite outputs ESM by default, so you need to map the imports.

I think the solution closest to you need is https://github.com/MMF-FE/vite-plugin-cdn-import suggested here: https://github.com/vitejs/vite-plugin-react/issues/3#issuecomment-1336120490

ArnaudBarre on Jan 25, 2023

Hi everyone.

I looking at all the open issues to see how to fix them in the next minor/major version. This issue is unactionable for me. There is no stackblitz repro and some people seems to get this working via a plugin.

If you think your usecase is still not covered, please provide a small reproduction via stackblitz

ArnaudBarre on Jan 22, 2023

resolve.alias is the recommended way to use CDN links in vite.

If you want to only use CDN links in production, you can configure the alias field conditionally.

References:

sodatea on May 8, 2021