6

The problem :

This is what happens when i run the build with my React/Vite app :

vite v2.9.6 building for production...
✓ 1 modules transformed.

ERROR  [vite]: Rollup failed to resolve import "src/bootstrap.tsx" from "index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to        
`build.rollupOptions.external`

Expected result : A successful build.

In dev mode everything works fine.

What i tried :

Here a solution which proposes to add "/" to the path of the script in index.html, but it is already the case in my code and it does not work. I still tried without "/", just in case.

Some of my code :

in index.html:

<script type="module" src="/src/bootstrap.tsx"></script>

in vite.config.ts :

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';
import viteCompression from 'vite-plugin-compression';
import { createHtmlPlugin } from 'vite-plugin-html';
  
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), 'VITE_');

  const publicPath = '/';
  const productName = 'My product name';

  return {
    define: {
      PUBLIC_PATH: JSON.stringify(publicPath),
      PRODUCT_NAME: JSON.stringify(productName),
    },
    plugins: [
      react({
        jsxRuntime: 'classic',
      }),
      viteStaticCopy({
        flatten: true,
        targets: [
          {
            src: 'node_modules/@client-ux/mylib/assets/fonts',
            dest: './assets',
          },
        ],
      }),
      viteCommonjs(),
      viteCompression({
        threshold: 1024 * 8, // 8 KB
        deleteOriginFile: false,
        filter: /\.(js|json|ttf|eot|woff|otf)$/i,
      }),
      createHtmlPlugin({
        entry: 'src/bootstrap.tsx',
        inject: {
          data: {
            title: `<title>${productName}</title>`,
          },
        },
      }),
    ],
    optimizeDeps: {
      esbuildOptions: {
        plugins: [esbuildCommonjs(['@client-ux/mylib-react', '@otherlib/front-common'])],
      },
    },
    resolve: {
      alias: {
        '@src': path.resolve(__dirname, 'src'),
        '@root': path.resolve(__dirname, './'),
        '@public': path.resolve(__dirname, './public'),
        '@cypress': path.resolve(__dirname, './cypress'),
        '@dist': path.resolve(__dirname, './dist'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            $mylib-fonts-path: ".${publicPath}${mode === 'development' ? 'assets/' : ''}";
            @import "./src/shared/styles/variables";
            @import "./src/shared/styles/mixins";
            @import "./node_modules/@client-ux/mylib-core/src/app/styles/common/_default.scss";
          `,
        },
      },
    },
    build: {
      reportCompressedSize: false,
    },
  };
});
Liam
  • 27,717
  • 28
  • 128
  • 190
Caroline.S
  • 69
  • 1
  • 4

0 Answers0