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