Uncaught ReferenceError: module is not defined at vendor.942e3eab.js:1

See original GitHub issue

Describe the bug

I recently switched to Vite using the following guide: https://darekkay.com/blog/create-react-app-to-vite/

I am able to run my application locally. However upon running ‘yarn build’, one of the files generated (vendor.*.js), references module.exports. None of the files I have written use that so I’m guessing it is one of the packages we use. This leads to Uncaught ReferenceError: module is not defined at vendor.942e3eab.js:1

I’ve seen this issue before but not as a result of running a build. Any idea on how to go about this?

Reproduction

Here are the packages we use

“dependencies”: { “buffer”: “^6.0.3”, “comlink”: “^4.3.1”, “copy-html-to-clipboard”: “^4.0.1”, “docx”: “^7.1.1”, “feathery-react”: “^1.0.257”, “file-saver”: “^2.0.5”, “file-type”: “^16.5.3”, “generate-schema”: “^2.6.0”, “is-svg”: “^4.3.1”, “katex”: “^0.13.18”, “locale-codes”: “^1.3.1”, “luxon”: “^2.0.2”, “memoize-one”: “^5.2.1”, “pondjs”: “^0.9.0”, “react-colorful”: “^5.5.0”, “react-confetti”: “^6.0.1”, “react-csv-downloader”: “^2.7.0”, “react-device-detect”: “^2.0.1”, “react-draggable”: “^4.4.4”, “react-image-crop”: “^9.0.4”, “react-input-slider”: “^6.0.1”, “react-jsonschema-form”: “^2.0.0-alpha.1”, “react-katex”: “^2.0.2”, “react-pdf”: “5.4.0”, “react-phone-input-2”: “2.14.0”, “react-quill”: “^1.3.5”, “react-responsive-carousel”: “^3.2.21”, “react-stripe-elements”: “^6.1.2”, “react-toggle”: “^4.1.2”, “react-typeform-embed”: “^1.0.7”, “react-window”: “^1.8.6”, “rollup-plugin-polyfill-node”: “^0.7.0”, “showdown”: “^1.9.1”, “string-similarity”: “^4.0.4”, “turndown”: “^7.1.1”, “vite”: “2.3.7”, “vite-plugin-react-svg”: “^0.2.0” }, “devDependencies”: { “@vitejs/plugin-legacy”: “^1.6.1”, “@vitejs/plugin-react-refresh”: “1.3.3”, “axios”: “^0.22.0”, “browserslist”: “^4.17.2”, “connected-react-router”: “^6.7.0”, “copy-to-clipboard”: “^3.3.1”, “core-js”: “^3.18.1”, “country-list”: “^2.2.0”, “hellosign-embedded”: “^2.10.0”, “history”: “^4.10.1”, “js-cookie”: “^3.0.1”, “logrocket”: “^2.0.0”, “logrocket-react”: “^4.0.1”, “prop-types”: “^15.7.2”, “qs”: “^6.10.1”, “react”: “^17.0.2”, “react-datepicker”: “^4.2.1”, “react-dom”: “npm:@hot-loader/react-dom”, “react-dropzone”: “11.4.2”, “react-ga”: “^3.3.0”, “react-helmet”: “^6.1.0”, “react-joyride”: “^2.3.1”, “react-json-view”: “^1.21.3”, “react-markdown”: “^7.0.1”, “react-redux”: “7.2.5”, “react-router”: “^5.2.1”, “react-router-dom”: “^5.3.0”, “react-s3-uploader”: “^5.0.0”, “react-select”: “^5.0.0”, “react-share”: “^4.4.0”, “react-table”: “^6.10.2”, “react-timeseries-charts”: “^0.16.1”, “react-truncate-markup”: “^5.1.0”, “react-virtualized”: “^9.22.3”, “redux”: “^4.1.1”, “redux-thunk”: “^2.1.0”, “remove-markdown”: “^0.3.0”, “server-client-common”: “>=2.0.0”, “sql-formatter”: “4.0.2”, “underscore”: “^1.13.1”, “uuid”: “^8.3.2”, “uuid-validate”: “^0.0.3” },

System Info

Output of "vite"

Used Package Manager

yarn

Logs

No response

Validations

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
NikhilPunwaneycommented, Oct 14, 2021

Upon commenting out things iteratively, it looks like the breaking component was react-phone-input-2.

Is there a way that vite can point out which module is causing the issue?

0reactions
NikhilPunwaneycommented, Oct 13, 2021

@ygj6 That worked. However now I’m running into the same bug as https://github.com/vitejs/vite/issues/2139

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Vg (vendor.36396364.js:22523) at A2 (vendor.36396364.js:19366) at x2 (vendor.36396364.js:19427) at vendor.36396364.js:19538 at fi (vendor.36396364.js:20133) at ck (vendor.36396364.js:22333) at bk (vendor.36396364.js:21778) at ak (vendor.36396364.js:21771) at Tj (vendor.36396364.js:21754) at Lj (vendor.36396364.js:21522)

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReferenceError: module is not defined - javascript
You are mixing ES imports with CommonJS - at bottom of file you have module.exports = api; which is CJS terminology.
Read more >
ReferenceError: "x" is not defined - JavaScript - MDN Web Docs
ReferenceError : "x" is not defined. The JavaScript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.
Read more >
Javascript, Uncaught ReferenceError: module is not defined
I've made a little program using JS and at the bottom I have: module.exports = functions; This is so that I can use...
Read more >
module is not defined in es module scope this file is being ...
ERROR ReferenceError: module is not defined in ES module scope This file is being treated as an ES module because it has a...
Read more >
Uncaught ReferenceError: Waves is not defined
global : this, function () { // This runs in the getting started tutorial and goes into the function to define Waves. In...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found