Instalation: Chrome Plugin: TypeError: Cannot read properties of null (reading 'get') #6211
Description
Describe the bug
Hi guys, I get an error when I try to use UI5 React components. I am building a chrome plugin with Plasmo (https://www.plasmo.com/) and would like to use SAP UI5 as UI framework for it. Installation and build works fine. However, I get an error message when I go to the page where the extension is used.
Error Message:
Uncaught TypeError: Cannot read properties of null (reading 'get') at kAYYQ.@parcel/transformer-js/src/esmodule-helpers.js (menuButton.4e23c9af.js:39617:21) at newRequire (menuButton.4e23c9af.js:72:24) at localRequire (menuButton.4e23c9af.js:85:35) at hGJRF../StaticArea.js (menuButton.4e23c9af.js:39523:21) at newRequire (menuButton.4e23c9af.js:72:24) at localRequire (menuButton.4e23c9af.js:85:35) at 426P1.@ui5/webcomponents-base/dist/ssr-dom.js (menuButton.4e23c9af.js:38285:25) at newRequire (menuButton.4e23c9af.js:72:24) at localRequire (menuButton.4e23c9af.js:85:35) at ekBB0.@ui5/webcomponents-base/dist/Device.js (menuButton.4e23c9af.js:37978:21) menuButton.tsx:
import "@ui5/webcomponents/dist/Assets" import "@ui5/webcomponents-react/dist/Assets" import { Button, ThemeProvider } from "@ui5/webcomponents-react" import type { PlasmoGetInlineAnchor } from "plasmo" export const config = { matches: ["https://blank.org/*"] } export const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector("body") const PlasmoInline = () => { return ( <ThemeProvider> <div> <Button>Hello world!</Button> </div> </ThemeProvider> ) } export default PlasmoInlinepackage.json:
"@ui5/webcomponents": "~1.24.0", "@ui5/webcomponents-fiori": "~1.24.0", "@ui5/webcomponents-react": "^1.27.0", manifest:
"host_permissions": [ "https://*/*", "http://*/*" ], "permissions": [ "tabs", "activeTab", "storage", "scripting" ], "web_accessible_resources": [ { "resources": [ "@ui5/webcomponents/dist/Assets.js", "@ui5/webcomponents-react/dist/Assets.js", "@ui5/webcomponents-fiori/dist/Assets.js" ], "matches": [ "<all_urls>" ] } ] Unfortunately, I can't figure out what the problem might be. Maybe one of you can help me.
Isolated Example
No response
Reproduction steps
- Install all packages
- Build project
- Open Page
Expected Behaviour
Button is showing
Screenshots or Videos
No response
UI5 Web Components for React Version
^1.27.0
UI5 Web Components Version
~1.24.0
Browser
Chrome
Operating System
Windows
Additional Context
No response
Relevant log output
Uncaught TypeError: Cannot read properties of null (reading 'get') at kAYYQ.@parcel/transformer-js/src/esmodule-helpers.js (menuButton.4e23c9af.js:39617:21) at newRequire (menuButton.4e23c9af.js:72:24) at localRequire (menuButton.4e23c9af.js:85:35) at hGJRF../StaticArea.js (menuButton.4e23c9af.js:39523:21) at newRequire (menuButton.4e23c9af.js:72:24) at localRequire (menuButton.4e23c9af.js:85:35) at 426P1.@ui5/webcomponents-base/dist/ssr-dom.js (menuButton.4e23c9af.js:38285:25) at newRequire (menuButton.4e23c9af.js:72:24) at localRequire (menuButton.4e23c9af.js:85:35) at ekBB0.@ui5/webcomponents-base/dist/Device.js (menuButton.4e23c9af.js:37978:21)Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.