Skip to content

Instalation: Chrome Plugin: TypeError: Cannot read properties of null (reading 'get') #6211

Open
@Nichtmetall

Description

@Nichtmetall

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 PlasmoInline

package.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

  1. Install all packages
  2. Build project
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    compatibilityIssues related to conflicts or problems with other independent projects or tools.

    Type

    Projects

    Status

    🆕 New

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions