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

Property 'document' doesn't exist #188

Open
zekoliman opened this issue Jul 12, 2024 · 4 comments
Open

Property 'document' doesn't exist #188

zekoliman opened this issue Jul 12, 2024 · 4 comments

Comments

@zekoliman
Copy link

Platform:

  • Version of [react-native, expo]: [0.74.3]
  • Version of this package: [0.12.0 and 0.11.2]
  • OS: [Android]
  • Running on: [Simulator]
  • JavaScript engine: [Hermes, JavaScriptCore]
@pedrozok
Copy link

I have the same issue, @zekoliman did you found a solution for it?

@zekoliman
Copy link
Author

@pedrozok I spent two days but unfortunately I couldn't find a solution.

@lukachi
Copy link

lukachi commented Jul 27, 2024

same here, any solutions yet?

UPD:

Environment:
default expo app with expo-router
new-architecture

pck versions:

    "react-native-react-bridge": "^0.12.0",
    "react-native-web": "^0.19.12",
    "react-native-webview": "^13.10.5",

provider:

import type { PropsWithChildren } from 'react'
import { useContext } from 'react'
import { createContext } from 'react'
import { useWebViewMessage } from 'react-native-react-bridge'
import { WebView } from 'react-native-webview'

import { ErrorHandler } from '@/core'

import { WitnessRequestTypes, WitnessResponseTypes } from './enums'
import WebApp from './WebApp'

const witnessCalcContext = createContext<{
  executeWitnessCalculator: <Inputs>(binary: Uint8Array, inputs: Inputs) => Promise<string>
}>({
  executeWitnessCalculator: async () => {
    throw new TypeError('not implemented')
  },
})

export const useWitnessCalc = () => {
  return useContext(witnessCalcContext)
}

export const WitnessCalcProvider = ({ children }: PropsWithChildren) => {
  let promiseResolver: any

  const { ref, onMessage, emit } = useWebViewMessage(message => {
    if (message.type === WitnessResponseTypes.WitnessCalculatorResponse) {
      promiseResolver(message.data)
    }
  })

  async function executeWitnessCalculator<Inputs>(
    binary: Uint8Array,
    inputs: Inputs,
  ): Promise<string> {
    emit({
      type: WitnessRequestTypes.WitnessCalculatorRequest,
      data: {
        binary,
        inputs,
      },
    })

    return new Promise(resolve => {
      promiseResolver = resolve
    })
  }

  return (
    <witnessCalcContext.Provider
      value={{
        executeWitnessCalculator,
      }}
    >
      <WebView
        ref={ref}
        source={{ html: WebApp }}
        onMessage={onMessage}
        onError={ErrorHandler.process}
      />
      {children}
    </witnessCalcContext.Provider>
  )
}

the provider itself wrapped nested router, NOT the whole app, but in this case it ain't works too

- root
- - subroute
- - - sub_subroute <- here

WebApp.tsx

import { emit, useNativeMessage, webViewRender } from 'react-native-react-bridge/lib/web'

import { WitnessRequestTypes, WitnessResponseTypes } from '@/utils/zkp/enums'

function WebApp() {
  useNativeMessage(message => {
    if (message.type === WitnessRequestTypes.WitnessCalculatorRequest) {
      emit({
        type: WitnessResponseTypes.WitnessCalculatorResponse,
        data: message.data,
      })
    }
  })

  return <></>
}

export default webViewRender(<WebApp />)

UPD:

I was able to avoid this error by replace in source like so:

source={{
  html: `
    <html>
          <head>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
          </head>
          <body>
            <h1>Silver area is a WebView</h1>
          </body>
    </html>
  `,
}}

and also run simple scripts with:

injectedJavaScript={myScript} // string

but anyway, the post messages ain't works with this example:

window.addEventListener('message', async (message) => {
// do my stuff
})

and, i think, that kind of flow is roughly limits most of real case projects

@YadBro
Copy link

YadBro commented Oct 15, 2024

+1

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

No branches or pull requests

4 participants