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

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

Open
1 task done
Nichtmetall opened this issue Aug 15, 2024 · 0 comments
Open
1 task done
Labels
bug Something isn't working compatibility Issues related to conflicts or problems with other independent projects or tools.

Comments

@Nichtmetall
Copy link

Nichtmetall commented Aug 15, 2024

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.
@Nichtmetall Nichtmetall added the bug Something isn't working label Aug 15, 2024
@Lukas742 Lukas742 added the compatibility Issues related to conflicts or problems with other independent projects or tools. label Aug 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working compatibility Issues related to conflicts or problems with other independent projects or tools.
Projects
Status: 🆕 New
Development

No branches or pull requests

2 participants