Uncaught ReferenceError: require is not defined

[TimTJoe]

My vite react app work perfectly on the localhost, after I deployed it to vercel, the page goes blank and this message is logged to the console Uncaught ReferenceError: require is not defined

I have tried many ways to resolve it but to no avail. I even downgraded the nodejs version from 18x to 16x yet the issue haven't resolved.

Here is the error message:

Uncaught ReferenceError: require is not defined
    at index-08337b32.js:252:2875

Here is the line within the index-08337b32.js that is causing the error:

let _we = require("ordered-uuid"); //this is the error line

function Swe(e, t) {
    if (e ? typeof e == "object" && !(e instanceof Array) || this.userErrors.push("Data passed to .add() must be an object. Not an array, string, number or boolean.") : this.userErrors.push('No data specified in add() method. You must use an object, e.g { id: 1, name: "Bill", age: 47 }'),
    this.userErrors.length)
        S0.call(this);
    else {
        let r = this.collectionName;
        return new Promise((n,i)=>{
            let a = null;
            return t ? a = t : a = _we.generate(),
            this.lf[r].setItem(a, e).then(()=>{
                n(Oo.call(this, `Document added to "${r}" collection.`, {
                    key: a,
                    data: e
                }))
            }
            ).catch(o=>{
                i(fa.call(this, `Could not add Document to ${r} collection.`))
            }
            )
        }
        )
    }
}

[ArnaudBarre]

You are using a node-only dependency in your bundle. It should also error in dev. You need to isolate the lib that cause the issue and report to the lib or use another one

[TimTJoe]

How do I know which is a "node-only dependency"?

Here is my list of dependencies:
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.3",
"@mui/material": "^5.14.2",
"axios": "^1.4.0",
"date-fns": "^2.30.0",
"echarts": "^5.4.3",
"framer-motion": "^10.16.1",
"localbase": "^0.7.5",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.4",
"react-icons": "^4.10.1",
"react-router-dom": "^6.14.2"
},
"devDependencies": {
"@types/lodash": "^4.14.197",
"@types/node": "^20.4.4",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}

[ArnaudBarre]

Look into your lock file to see which lib depend on ordered-uuid

[TimTJoe]

I used localstorage to solve the data. ordered-uuid is dependency of localbase; a wrapper for localstorage

"node_modules/localbase": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/localbase/-/localbase-0.7.5.tgz",
"integrity": "sha512-LikkGiX/HdR0kZUUmoBjPMD5qyLBbO5SfQOPkZVXea3QwQTZBy5JxbRiEC1xy9tagFCfi90OP+23/V6Da/7DbQ==",
"dependencies": {
"localforage": "^1.7.4",
"ordered-uuid": "^1.1.0"
}
}

[prosohail51214]

This is my vite 2 based project's package-lock.json file, this library is working file with "viteCommonJS" plugin in development but causing "require not defined" after build has completed when run "npm run preview"

"node_modules/vue2-google-maps": {
"version": "0.10.7",
"resolved": "https://registry.npmjs.org/vue2-google-maps/-/vue2-google-maps-0.10.7.tgz",
"integrity": "sha512-y5aBJTAsfGvpsbfgPaeWU7o7QbOeINZKsP6SB9qrBe8U8EYBFO/bTWo3rcMq/NOtgT/XssV3Nwg/2u3no6jWbw==",
"dependencies": {
"babel-runtime": "^6.26.0",
"marker-clusterer-plus": "^2.1.4"
}
},

[TimTJoe]

I solved the problem.

As for me, the problem was caused by a package that depends on 'ordered-uuid'. here is how i solve the problem

1. installed patch-package npm install patch-package
2. I modified the package that had the bug localbase/api/actions/app.js. I changed let UUID = required('ordered-uuid') to import UUID from 'ordered-uuid'
3. added "postinstall": "patch-package" to the "scripts" object within the package.json file
4. in the IDE terminal i ran npx patch-package package-name. in my case it was npx patch-package localbase
5. then commited my code to its repo on github