Bootstrap CSS issue with Vite breaking style

[anujshah108]

Hi all -

I am getting this error in my console when I am importing certain css into my components:

component.js:20 Uncaught TypeError: Cannot read properties of undefined (reading 'string')
    at Object.<anonymous> (component.js:20:1)
    at __webpack_require__ (bootstrap 517e0e393de010ca437b:19:1)
    at Object.<anonymous> (index.js:6:1)
    at __webpack_require__ (bootstrap 517e0e393de010ca437b:19:1)
    at bootstrap 517e0e393de010ca437b:39:1
    at bootstrap 517e0e393de010ca437b:39:1
    at webpackUniversalModuleDefinition (universalModuleDefinition:9:1)
    at universalModuleDefinition:10:2

import { sentryVitePlugin } from "@sentry/vite-plugin";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import react from "@vitejs/plugin-react-swc";
import babel from "vite-plugin-babel";
import checker from "vite-plugin-checker";
import { defineConfig } from "vitest/config";
import { loadEnv } from "vite";
import commonjs from "vite-plugin-commonjs";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    base: "./",
    define: {
      "process.env": {},
    },
    esbuild: {
      loader: 'jsx',
      include: /.*\.jsx?$/,
      exclude: []
    },
    optimizeDeps: {
      esbuildOptions: {
        loader: {
          '.js': 'jsx',
        },
      },
    },

    // This changes the out put dir from dist to build
    // comment this out if that isn't relevant for your project
    build: {
      outDir: "build",
      sourcemap: true,
      rollupOptions: {
        // make sure to externalize deps that shouldn't be bundled
        // into your library
        output: {
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            react: "React",
          },
        },
      },
    },
    test: {
      globals: true,
      environment: "jsdom",
      setupFiles: "./setupTest.js",
      // you might want to disable it, if you don't have tests that rely on CSS
      // since parsing CSS is slow
      css: true,
      typecheck: {
        ignoreSourceErrors: true,
        allowJs: true,
     }
    },

    plugins: [
      react(),
      commonjs(),
      checker({
        typescript: false,
      }),
      nodePolyfills(),
      babel({
        babelConfig: {
          plugins:["@babel/plugin-syntax-jsx"],
          babelrc: false,
          compact: false,
          configFile: false,
          presets: ["@babel/preset-react"]
        },
      }),
      sentryVitePlugin({
        org: "billion-to-one",
        project: "patient-portal-frontend",
        authToken: env.VITE_SENTRY_AUTH_TOKEN,
      }),
    ],
  };
});

I have enabled commonjs plugin but not sure what else to do.

We are using mostly javascript as this is an old app.

The libraries we are using are quill and bootstrap.

Its only breaking a couple components.

Please let me know any suggestions!

Thanks!

[anujshah108]

Upon further investigation it seems its quill that is still somehow bundling with webpack? Very confused