problem with `display` in `build`

Hello,

I have an ObservableHQ Framework app that works perfectly fine with npm run dev. When I try to build and run the code it produces this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'P')
    at te.variable_resolve (runtime.ee8b4671.js:1:12499)
    at Array.map (<anonymous>)
    at te.variable_define (runtime.ee8b4671.js:1:12405)
    at define (client.9d2c2ebe.js:1:9436)
    at references.html:115:1

The line that produces the error is this:

define({id: "abbfdf1a", mode: "inline", inputs: ["ui","isLoggedIn","curSearchData","curSelRow","setIsLoggedIn","searchInput","tableInput","setTableData","spl","display"], body: async (ui,isLoggedIn,curSearchData,curSelRow,setIsLoggedIn,searchInput,tableInput,setTableData,spl,display) => {
display(await(
ui.showUI({
    isLoggedIn,
    curSearchData,
    curSelRow,
    setIsLoggedIn,
    searchInput,
    tableInput,
    setTableData,
    spl
})

I suspect that display is(?) causing the problem but since it’s the result of the build process I don’t know how to fix it.

Thanks in advance for any help.

Could you share your .md file?

Here it is:

---
style: /references/references.css
toc: false
---

```js
import * as backend from '/components/backend.js';
import * as table from '/components/table.js';
import * as utils from '/components/utils.js';
import * as ui from '/components/ui.js';
import * as editor from '/components/editor.js';
import * as spinner from '/components/spinner.js';
import Split from 'https://cdn.skypack.dev/split.js';
const [isLoggedIn, setIsLoggedIn] = utils.useState(false);
const tableData = Mutable(await backend.request('getAllLocalOrRemote'));
const setTableData = (arr) => (tableData.value = [...arr]);
const psr = { preSelRow: null };
const spl = {
    mainSplit: null,
    toolsSplit: null
};
const searchInput = Inputs.search(tableData, {
    label: 'Αναζήτηση τίτλου',
    placeholder: '...',
    format: (results) => `${results} / ${tableData.length}`
});
const curSearchData = Generators.input(searchInput);
const tableInput = Inputs.table(curSearchData, {
    ...table.staticProps,
    ...table.height(utils.height('#anmz', 250)),
    value: psr.preSelRow ? curSearchData.find((obj) => utils.compareRows(obj, psr.preSelRow)) ?? curSearchData[0] : curSearchData[0]
});
const curSelRow = Generators.input(tableInput);
psr.preSelRow = curSelRow;

${ui.showUI({
isLoggedIn,
curSearchData,
curSelRow,
setIsLoggedIn,
searchInput,
tableInput,
setTableData,
spl
})}


The problem is caused by the last line.

Thanks for any ideas!

OK, I realized what I was doing. I was trying to test a github action to push the files of my Observable app to AWS S3 but I had a CDN in front of the bucket so I could not see the most recent results. The problem just went away. Thanks!

Phew! I can now stop scratching my head :slight_smile:

1 Like