Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')" after migrating from 2.9.15 to 3.2.0 #10664

Closed
7 tasks done
barbalex opened this issue Oct 27, 2022 · 8 comments
Labels
wontfix This will not be worked on

Comments

@barbalex
Copy link

barbalex commented Oct 27, 2022

Describe the bug

In this project I want to upgrade vite and it's plugins.

Every time I do it the previously working project breaks i.e. the browser window is blank and devtools shows:
error

The issue seems similar to #7555 and #8646.

PS C:\Users\alexa\capturing> yarn why sax
└─ xml-js@npm:1.6.11
   └─ sax@npm:1.2.4 (via npm:^1.2.4)
PS C:\Users\alexa\capturing> yarn why string_decoder
└─ readable-stream@npm:3.6.0
   └─ string_decoder@npm:1.3.0 (via npm:^1.1.1)

Reproduction

https://github.com/barbalex/capturing

Steps to reproduce

Clone https://github.com/barbalex/capturing and cd into it's folder, then:

yarn
yarn dev

See that it works (the app will be missing it's database of course).

Now update in package.json:

  • @vitejs/plugin-react from 1.3.2 to 2.2.0
  • vite from 2.9.15 to 3.2.0
  • vite-plugin-pwa from 0.12.8 to 0.13.1
  • (vite-plugin-svgr: there is no newer version - it was updated for use with vite@3 earlier )

Run yarn

Now run yarn dev and check the console in chrome's dev tools

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 17.36 GB / 31.92 GB
  Binaries:
    Node: 18.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 106.0.5249.119
    Edge: Spartan (44.22621.675.0), Chromium (106.0.1370.47)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-react: 2.2.0 => 2.2.0 
    vite: 3.2.0 => 3.2.0

Used Package Manager

yarn

Logs

I get so many messages, it's not worth pasting all. There seem to be no errors here. Small extract:

vite:time 0.58ms /src/images/puls_vulg.jpg?import +1ms
  vite:cache [304] /src/images/puls_vulg_small.jpg +1ms
  vite:time 0.48ms /src/images/puls_vulg_small.jpg?import +1ms
  vite:cache [memory] /src/components/shared/ProgressiveImg.tsx +5ms
  vite:time 1.00ms /src/components/shared/ProgressiveImg.tsx +2ms
  vite:cache [memory] /node_modules/.vite/deps/@mui_material_List.js?v=627b04f1 +2ms
  vite:time 0.41ms /node_modules/.vite/deps/@mui_material_List.js?v=627b04f1 +1ms
  vite:cache [memory] /node_modules/.vite/deps/@mui_material_ListItem.js?v=627b04f1 +0ms
  vite:time 0.31ms /node_modules/.vite/deps/@mui_material_ListItem.js?v=627b04f1 +1ms
  vite:cache [memory] /node_modules/.vite/deps/@mui_material_ListItemText.js?v=627b04f1 +2ms
  vite:time 0.61ms /node_modules/.vite/deps/@mui_material_ListItemText.js?v=627b04f1 +1ms
  vite:cache [memory] /node_modules/.vite/deps/@mui_material_Button.js?v=627b04f1 +2ms
  vite:time 0.48ms /node_modules/.vite/deps/@mui_material_Button.js?v=627b04f1 +2ms
  vite:cache [memory] /node_modules/.vite/deps/dexie-react-hooks.js?v=627b04f1 +1ms
  vite:time 0.45ms /node_modules/.vite/deps/dexie-react-hooks.js?v=627b04f1 +1ms
  vite:cache [memory] /src/components/Login/index.tsx +2ms
  vite:time 1.09ms /src/components/Login/index.tsx +2ms
  vite:cache [304] /src/utils/logout.ts +12ms
  vite:time 0.76ms /src/utils/logout.ts +2ms
  vite:cache [memory] /src/components/shared/Accordion.tsx +4ms
  vite:time 1.24ms /src/components/shared/Accordion.tsx +2ms
  vite:cache [memory] /src/routes/User/PendingOperationsDialog.tsx +17ms
  vite:time 0.94ms /src/routes/User/PendingOperationsDialog.tsx +17ms
  vite:cache [memory] /src/routes/User/PurgeDialog.tsx +1ms

Validations

@barbalex
Copy link
Author

barbalex commented Nov 4, 2022

Still happens with vite 3.2.2

@a-kriya
Copy link

a-kriya commented Nov 17, 2022

@barbalex Can you try with v3.1.4?

From v3.1.5, I get this @esbuild/android-arm dependency which is when I start seeing this issue. Seen here in package-lock.json:

image

@barbalex
Copy link
Author

@a-kriya
Nope, exact same error with v3.1.4. Thanks for asking.

@barbalex
Copy link
Author

barbalex commented Nov 24, 2022

This seems similar to #7555 but that is supposed to have been solved by #8338.

I also have xml.js in my dependency tree:

PS C:\Users\alexa\capturing> yarn why xml-js
├─ react-xml-viewer@npm:1.3.0
│  └─ xml-js@npm:1.6.11 (via npm:^1.6.11)

└─ react-xml-viewer@npm:1.3.0 [3bf5a]
   └─ xml-js@npm:1.6.11 (via npm:^1.6.11)

If I remove react-xml-viewer from the project the error disappears.
But I need it's functionality.

How can this be solved? And why was this case not solved by #8338?

@barbalex
Copy link
Author

barbalex commented Nov 24, 2022

I found a solution here: alissonmbr/react-xml-viewer#15 (comment):

yarn add stream buffer

But: is this a solution are just a workaround? Why did it work with vite v2 but in v3 only with stream and buffer? What do you think @bluwy ?

@barbalex
Copy link
Author

barbalex commented Mar 3, 2023

Also: adding stream lead to this error: juliangruber/stream#5 (comment)

@a-kriya
Copy link

a-kriya commented Mar 6, 2023

I did not find a fix for this on ^3.1.5, and instead jumped to some v4 where it did not happen.

@sapphi-red
Copy link
Member

This happened to work in 2.x by the reason how Vite mocks Node.js builtin modules.

The following codes are how Vite mocked/mocks Node.js builtin modules in each version.

2.9.15

export default new Proxy({}, {
  get() {
    throw new Error()
  }
})

3.0.x

module.exports = Object.create(new Proxy({}, {
  get(_, key) {
    if (key !== '__esModule' &&
      key !== '__proto__' &&
      key !== 'constructor' &&
      key !== 'splice'
    ) {
      throw new Error()
    }
  }
}))

3.1.0+

module.exports = Object.create(new Proxy({}, {
  get(_, key) {
    if (key !== '__esModule' &&
      key !== '__proto__' &&
      key !== 'constructor' &&
      key !== 'splice'
    ) {
      console.warn()
    }
  }
}))

Some packages expects modules to be mocked as {} and some expects the require call to throw an error. Given that there aren't any solution that can handle this, I think we won't change the behavior any more. Also we discourage the use of packages depending on Node.js builtin modules.

@sapphi-red sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale Mar 30, 2023
@sapphi-red sapphi-red added wontfix This will not be worked on and removed pending triage labels Mar 30, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Apr 14, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

3 participants