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.

Sign up for GitHub

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

Jump to bottom

Using obfuscated packages: Uncaught (in promise) TypeError: {......} is not a constructor #4680

Closed
6 of 7 tasks
akhil-rana opened this issue Aug 21, 2021 · 12 comments · Fixed by #7187
Closed
6 of 7 tasks

Using obfuscated packages: Uncaught (in promise) TypeError: {......} is not a constructor #4680

akhil-rana opened this issue Aug 21, 2021 · 12 comments · Fixed by #7187
Labels
inconsistency Inconsistency between dev & build

Comments

@akhil-rana
Copy link

akhil-rana commented Aug 21, 2021 •
edited
Loading

Describe the bug

I'm using vanilla ts project with a very basic structure here
I've imported the https://www.npmjs.com/package/@mediapipe/selfie_segmentation library like:
import { SelfieSegmentation } from '@mediapipe/selfie_segmentation';

When I'm in devepment mode, everything seems to work as intended but after build, I get this error:

Uncaught (in promise) TypeError: e.SelfieSegmentation is not a constructor

I'm using chrome

Note:

Everything works fine in development mode by running npm run dev

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 22.39 GB / 31.91 GB
  Binaries:
    Node: 16.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.10.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    vite: ^2.4.4 => 2.5.0

Used Package Manager

npm

Logs

No response

Validations
@haoqunjiang haoqunjiang added inconsistency Inconsistency between dev & build and removed pending triage labels Aug 22, 2021
@haoqunjiang
Copy link
Member

The source code of @mediapipe/selfie_segmentation package is obfuscated (and seems to be a CommonJS module).

Rollup CommonJS plugin can't work with obfuscated packages because it relies on static analysis to determine its exports.

I don't know if it's possible to fix this incompatibility. If not, maybe we need to document it somewhere.

@akhil-rana
Copy link
Author

@sodatea thanks for the response.
I understand the problem now. Will try to communicate with the mediapipe team regarding this.
Though I wonder there might be many numerous packages like this. Documenting this might be a good idea.

@akhil-rana akhil-rana changed the title Uncaught (in promise) TypeError: {......} is not a constructor Using obfuscated packages: Uncaught (in promise) TypeError: {......} is not a constructor Aug 27, 2021
@H6LS1S
Copy link

H6LS1S commented Oct 12, 2021

Spent 8 hours until got here, I also use mediapipe but with vue and typescript. Are there any workarounds?
For vanilla js - cdn mediapipe will work, but how to get typescript to work - I don't understand

@akhil-rana CDN example for Selfie Segmentation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script
      src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js"
      crossorigin="anonymous"
    ></script>

    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

@akhil-rana
Copy link
Author

@H6LS1S
I couldn't find any proper solution except of using the direct script import from the cdn.

I'm not much familiar with vue but I was using this is vanilla typescript project.
Setting the js import file dynamically from code using something like this was the closest I got but that doesn't work very well with typescript as I remember.

After spending many days I ended up making my own separate package using pure js and including that into my project.
Maybe you would find some help if you look into the source code of my package or demo

@H6LS1S
Copy link

H6LS1S commented Oct 13, 2021

@akhil-rana Thanks for the advice, but I already solved my problems a little radically - I rebuilt everything on webpack )))

@akhil-rana akhil-rana mentioned this issue Oct 21, 2021
Closed
@Mathemmagician
Copy link

Found this thread after wasting several hours as well. Vanilla TypeScript setup. To save some time for others in the future, was getting a similar error: Uncaught TypeError: face_mesh.FaceMesh is not a constructor.

@timothylui
Copy link

Also have this issue, actually using Vite and React, but same issue.

Unhandled Exception +0ms TypeError: Dm.FaceDetection is not a constructor

putting this here to also help others when googling.

@utileetdulce utileetdulce mentioned this issue Feb 7, 2022
Closed
@Trip1eLift
Copy link

I'm also using Vite, Reactjs, Mediapipe, React-three-js, and I got the following error after build: TypeError: (void 0) is not a constructor. I am not sure where the problem was. npm run dev works, npm run build also goes through. But npm run preview does not work bc the build isn't working. My solution is simply using webpack...

@bluwy bluwy mentioned this issue Mar 6, 2022
Merged
9 tasks
@bluwy
Copy link
Member

bluwy commented Mar 6, 2022

Note: The core issue of @mediapipe/selfie_segmentation is that exports a non-ESM file in pkg.module, which should be ESM. I'd suggest contacting the package author to fix it, but for now I've documented the difference of dependencies handled in dev and build that might help in debugging the issue.

@holtwick
Copy link

holtwick commented Mar 7, 2022

Does somebody have a workaround to get mediapipe working with vite? Thanks.

@Trip1eLift
Copy link

Trip1eLift commented Mar 7, 2022 •
edited
Loading

Does somebody have a workaround to get mediapipe working with vite? Thanks.

Reading from the doc provided by @bluwy, I think the problem only occurs due to @rollup/plugin-commonjs usage during vite production build. It seems like if you make vite does build using esbuild would solve the problem. (I'm not sure how to do it or can it even be done.)

@bluwy
Copy link
Member

bluwy commented Mar 7, 2022

It seems like if you make vite does build using esbuild would solve the problem. (I'm not sure how to do it or can it even be done.)

Yeah there has been discussion about that at #4921. It can be done but the whole bundling flow may need a big refactor.

@github-actions github-actions bot locked and limited conversation to collaborators Mar 22, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
inconsistency Inconsistency between dev & build
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: explain dep handling in dev and build bluwy/vite
8 participants
@holtwick @haoqunjiang @H6LS1S @timothylui @bluwy @akhil-rana @Mathemmagician @Trip1eLift