"Require is not defined" on npm run build, but npm run dev is OK

This is using the Flickity carousel plugin, with Vite. As per the subject, it works fine all the while I'm using npm run dev, but I get console errors with npm run build, despite Vite generating all the files without issue.

Have I missed something in the docs?

Uncaught ReferenceError: require is not defined
    at flickity.pkgd.min.5e897e51.js:10:177
    at flickity.pkgd.min.5e897e51.js:10:229
    at flickity.pkgd.min.5e897e51.js:1:22
    at flickity.pkgd.min.5e897e51.js:41:698

wturrell

3 years ago

Level 3

The workaround for this is to take the Flickity JS file out of the @vite([...]) syntax and place it above in a <script> tag using Vite:asset.

I tried both adding the plugin as a package with NPM, which failed to compile as soon as I added import Flickity from 'flickity' to vite.config.js. I also tried adding the files to resources manually and including them in @vite (see above).

It's not obvious to me from the docs exactly how you verify which packages are compatible with Vite - i.e. what files or syntax you're looking for…?

devlopersabbir

3 years ago

Level 1

@wturrell I have also faced this issue, please check out my question please

My project is created using [vitejs]

However,

My problem is when I build my vite app and host to my server (remember it's namecheep hosting) then it's shows bellow issue.

ReferenceError: require is not defined
at index-a4df310d.js:682:57318
at Hu (index-a4df310d.js:345:20340)
at Tg (index-a4df310d.js:345:20798)
at Object.useState (index-a4df310d.js:345:27178)
at Ie.useState (index-a4df310d.js:9:6382)
at sie (index-a4df310d.js:682:57154)
at aie (index-a4df310d.js:682:58185)
at $y (index-a4df310d.js:345:19520)
at wm (index-a4df310d.js:347:3139)
at PP (index-a4df310d.js:347:44801)

If you want you can check out my tsconfig.json file.

{
    "compilerOptions": {
		"target": "ESNext",
		"useDefineForClassFields": true,
		"lib": ["DOM", "DOM.Iterable", "ESNext"],
		 "allowJs": false,
		 "skipLibCheck": true,
		 "esModuleInterop": false,
		 "allowSyntheticDefaultImports": true,
		 "strict": true,
		 "forceConsistentCasingInFileNames": true,
		 "module": "ESNext",
		 "moduleResolution": "Node",
		 "resolveJsonModule": true,
		 "isolatedModules": true,
		 "noEmit": true,
		 "jsx": "react-jsx"
	},
	"include": ["src"],
	"references": [{ "path": "./tsconfig.node.json" }]
}

And also this one is my vite.config.ts file code

import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Please anyone help me to fix this issue....

Please or to participate in this conversation.