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
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 ?
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