Vite.js build with lib option not loading react app

Question

Below is my current vite config.js/ package.json and tsconfig.json with build with lib configuration, it worked properly using with normal vite build but fails does not work on build lib.

The files are generated in dist folder but app doesn't loads

vite.config.js

`/* eslint-disable import/no-extraneous-dependencies */

import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';
import { Alias, defineConfig } from 'vite';
import * as tsconfig from './tsconfig.paths.json';

function readAliasFromTsConfig(): Alias[] {
  const pathReplaceRegex = new RegExp(/\/\*$/, '');
  return Object.entries(tsconfig.compilerOptions.paths).reduce(
    (aliases, [fromPaths, toPaths]) => {
      const find = fromPaths.replace(pathReplaceRegex, '');
      const toPath = toPaths[0].replace(pathReplaceRegex, '');
      const replacement = path.resolve(__dirname, toPath);
      aliases.push({ find, replacement });
      return aliases;
    },
    [] as Alias[],
  );
}

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/main.tsx"),
      name: "Aagam",
    },
    rollupOptions: {
      external: ["react"],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          react: 'React',
        },
      },
    },
    minify: true,
    sourcemap: false,
  },
  plugins: [reactRefresh()],
  resolve: {
    alias: readAliasFromTsConfig(),
  },
  css: {
    modules: { localsConvention: 'camelCase' },
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
});

> `

package.json

  "name": "reporting-ui-component",
  "version": "1.0.0",
  "files": [
    "dist"
  ],
  "typings": "./dist/reporting-ui-component.d.ts",
  "main": "./dist/reporting-ui-component.umd.js",
  "module": "./dist/reporting-ui-component.es.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build && tsc -P tsconfig.dts.json",
    "serve": "vite preview",
    "start": "npm run dev",
    "lint:fix": "eslint src --ext .jsx,.js,.ts,.tsx --quiet --fix",
    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "lint": "yarn lint:format && yarn lint:fix ",
    "type-check": "tsc",
    "lint-staged": "npx lint-staged -r",
    "validate": "npm run style",
    "validate-commit": "npm run lint-staged",
    "style": "npx -q eslint src --ext .ts,.tsx --fix"
  }

tsconfig.dts.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": false,
    "declaration": true,
    "declarationDir": "dist",
    "emitDeclarationOnly": true
  },
  "include": ["src"]
}

It would be great if you could provide some solution to it? I am getting error on running above config

Answer 1

In order to make sure your project is rendered from the output generated by lib, make sure to refer the start point of your app i.e. index.html to have the below script

 <script src="/dist/<your-file-name>.umd.js"></script>

in place of previous path

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

and it should start working