Source:  Twitter logo

I've a demo react app setup on replit. https://replit.com/@us3r1234/ReactDemo

I simply used replit's default react template as it is and added the annotated section to the vite.config.js file:

import reactRefresh from '@vitejs/plugin-react-refresh'

/**
 * https://vitejs.dev/config/
 * @type { import('vite').UserConfig }
 */
export default {
  plugins: [reactRefresh()],
  server: {
    host: '0.0.0.0',
    hmr: {
      port: 443,
    }
  },
  ////////////// <- added this section
  build: {
    rollupOptions: {
      external: [ 'react', 'react-dom'],
      output: {
        globals: {
          'react': 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
  ////////////// <- upto here
}

and the external react scripts to the index.html file:

...
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
...

The purpose is to declare the react and react-dom modules as external so that vite doesn't include them in the bundle.

But for some reason (not clear from vite or rollup's documentation), the bundling is not doing as intended.

Any help is appreciated.

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).