Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jan 22, 2026

ESM imports in browsers fail because the UMD wrapper is invoked with this, which is undefined in ESM module context, causing root to be undefined.

Changes

  • dist/opencv.js: Changed UMD wrapper invocation from }(this, function () { to }(globalThis, function () { on line 22
  • dist/opencv.js.patch: Updated patch file to document the globalThis change alongside the existing Module variable fix

Technical Details

The UMD wrapper was using this to pass the global object as the root parameter. In ESM context, this at the top level is undefined, causing the error "Cannot set properties of undefined (setting 'cv')".

Using globalThis fixes this by providing a universal reference to the global object that works across all JavaScript environments:

  • Browsers: globalThis === window
  • Node.js: globalThis === global
  • Web Workers: globalThis === self
// Before
}(this, function () {

// After  
}(globalThis, function () {

This single-line change eliminates the need for post-install patching scripts users were applying as workarounds, while maintaining full backward compatibility with CommonJS, AMD, and Web Worker environments.

The dist/opencv.js.patch file has been updated to document this change for future reference when building opencv.js from source.

Original prompt

This section details on the original issue you should resolve

<issue_title>ES Module (ESM) import compatibility</issue_title>
<issue_description>I need this patch script in my package.json to have opencv-js work with import in the browser (testing on Edge).

  "scripts": {
    ...
    "fix-opencv-import": "replace \"if[(]typeof window==='object'[)][{]root.cv=factory[(][)];[}]\" \"if(typeof window==='object'){window.cv=factory();}\" node_modules/@techstark/opencv-js/dist/opencv.js",
    ...
  },

Thank you</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: ttt43ttt <132509+ttt43ttt@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix opencv-js import compatibility for Edge Fix ESM import compatibility in browsers Jan 22, 2026
Copilot AI requested a review from ttt43ttt January 22, 2026 05:12
@ttt43ttt
Copy link
Contributor

@copilot see #44 (comment)
I think we can use that way to fix it. No need to add new test.

Co-authored-by: ttt43ttt <132509+ttt43ttt@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jan 27, 2026

@copilot see #44 (comment)
I think we can use that way to fix it. No need to add new test.

Done! Changed to use globalThis instead of this on line 22 as suggested in the issue comment. This is a cleaner solution that fixes the root cause. Removed the test file as requested. All existing tests pass. (commit f2b867f)

Copilot AI changed the title Fix ESM import compatibility in browsers Fix ESM import compatibility using globalThis Jan 27, 2026
Co-authored-by: ttt43ttt <132509+ttt43ttt@users.noreply.github.com>
Copilot AI requested a review from ttt43ttt January 27, 2026 06:48
@ttt43ttt ttt43ttt marked this pull request as ready for review January 28, 2026 13:10
@ttt43ttt ttt43ttt merged commit af0e683 into main Jan 28, 2026
2 checks passed
@ttt43ttt ttt43ttt deleted the copilot/fix-opencv-import-compatibility branch January 28, 2026 13:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ES Module (ESM) import compatibility

2 participants