bug: configuring vite.config.ts

[trifkee]

Describe the bug on configure vite.config.ts, when adressing plugins, there is error 'Uncaught ReferenceError: require is not defined', all setup instruction are followed by official docs

To Reproduce Steps to reproduce the behavior:

1. npm i million
2. configure vite.config.ts
3. edit plugins:plugins: [million.vite(), { ...react(), enforce: 'default' }], OR plugins: [million.vite(), react()]
4. Error => Uncaught ReferenceError: require is not defined

Expected behavior Get compiler configured and Million library working

Screenshots

Device (please complete the following information): Chrome

Additional context /

[oliverloops]

Hi @trifkee 👋, I'm checking your issue and this could be related to an error from the module using CommonJS modules instead of ES modules, check if everything on your tsconfig.json is fine. but if the problem persists you can try adding support for CommonJS modules to Vite with the createCommonjsPlugin(), just like this:

import { defineConfig } from 'vite';
import { createCommonjsPlugin } from 'vite-plugin-commonjs';

export default defineConfig({
  // other config options
  plugins: [createCommonjsPlugin()],
});

Let us know if this works for you or if you found another way to fix it

[tobySolutions]

Thank you very much @oliverloops, I really appreciate the response. Would you like me to assign you to this?

Let us know how it goes @trifkee.

[lucasluca]

I had the same issue here, and when i add this plugin i get this error

[lucasluca]

Or if i import million before React on the plugin list i get this:

[lucasluca]

I made it work, using this import plugin order:

Then i created .babelrc file on the project root

And also installed this @babel/preset-typescript as a dev dependency... it worked!

[oliverloops]

Hello again @lucasluca, it seems that this was resolved. it just depends on the vite configuration files and environment you're running (eg. if using typescript or just plain javascript). @tobySolutions do you see another way to approach a general solution or this is done? 😅, there are plans to add a different configuration on a coming release?

[vctqs1]

hmm, for my case If Im using vite, The errors appear here, and this line is injected from million plugin

I also tried to follow instruction to use vite-commonjs-plugin but it produces another error also

I tried to ignore one by one package appear this error but there is a lot of them

[Oikio]

Same issue here with vite and typescript. Tried it out on a big monorepo project, which cannot use vite-plugin-commonjs, due to missing features like nested dynamic imports and other smaller problems.

I would really like to understand and solve the issue, but my understanding of this project is zero so far.

Why does adding millionjs to vite plugin pipeline leads to the problem stated in the first post -> Uncaught ReferenceError: require is not defined? What does millionjs plugin change in the pipeline to lead to this error?

my tsconfig for reference:

{
  "compilerOptions": {
    "composite": true,
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  }
}

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.