extension framework core sdk destructure error

[eperler]

Im trying to deploy an extension which uses the core extensions sdk and im getting the following error…

TypeError: Cannot destructure property 'coreSDK' of '(0 , e.useContext)(...)' as it is undefined.

Im using the “LookImage” code from the extensions example repo… here is the current code

import React, { useContext, useState } from 'react'
import { Button, MessageBar, Spinner, Tooltip } from '@looker/components'
import { ExtensionContext2 } from '@looker/extension-sdk-react'

const title = 'Look Image'
const description = 'Demonstrates rendering a Look image.'
const code = `const { extensionSDK } = useContext(ExtensionContext2)
const looks = await coreSDK.ok(coreSDK.all_looks('id'))
const rand = Math.floor(Math.random() * looks.length)
const value = await coreSDK.ok(
  coreSDK.run_look({
    look_id: looks[rand].id,
    result_format: 'png',
  })
)`
const codeSourceName = 'LookImage.jsx'

export const LookImage = () => {
  const [intent, setIntent] = useState()
  const [message, setMessage] = useState()
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState()
  const { coreSDK } = useContext(ExtensionContext2)

  const updateMessage = (message, intent = 'inform') => {
    setIntent(intent)
    setMessage(message)
  }

  const loadData = async () => {
    try {
      setMessage(undefined)
      setData(undefined)
      const looks = await coreSDK.ok(coreSDK.all_looks('id'))
      if (looks.length > 0) {
        setLoading(true)
        const rand = Math.floor(Math.random() * looks.length)
        const value = await coreSDK.ok(
          coreSDK.run_look({
            look_id: looks[rand].id,
            result_format: 'png',
          })
        )
        if (value instanceof Blob) {
          setData(URL.createObjectURL(value))
        } else {
          setData(btoa(`data:image/png;base64,${value}`))
        }
        updateMessage('Got image')
      } else {
        updateMessage('No looks to render', 'critical')
      }
    } catch (error) {
      console.log(error)
      updateMessage('Failed to load look data', 'critical')
    } finally {
      setLoading(false)
    }
  }

  return (
      <>
      <ComponentsProvider>
        <Space p="xxxxxlarge" width="100%" height="50vh" around>
          <Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message} 
          </Text>
        </Space>
      </ComponentsProvider>
    </>
  )
}

Thanks for any assistance you can provide

[lukas_fontanill]

Quick question, are you using the same version of the “@looker/extension-sdk-react” package as the extension in the example repo? Additionally in the “LookImage” component if we added a useEffect hook and console logged the coreSDK object, are we receiving an error there in the browser console when loading the extension ?

[eperler]

Thanks for your reply

i tried a simpler example and with a useEffect method and the issue is the same. It seems when i try to initilaize the coreSDK object .. and it does not get into the useEffect method where i added the conole.log statement …

export const HelloWorld = () => {

  const [message, setMessage] = useState()
  const [rowData, setRowData] = useState()

      const [intent, setIntent] = useState()
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState()
  const { coreSDK } = useContext(ExtensionContext2)

  
  useEffect(() => {
    const initialize = async () => {
      try {

         console.log(coreSDK)

I assume this is likely an issue with SDK version

I am building the app in my google cloud shell using the “create-looker-extension” utility and “yarn build”

i then copy the contents of bundle.js to the extension project in my looker cloud instance

How can i check the version of the extensin framework that i am  using ???

would you be able to jump on a quick google meet or zoom call

Thanks