... last night, i made a small change to the Enact application that i've had running out of a docker container on my host for quite a few months.. pushed it to the container, rebuilt the container, and now the app is giving me an all blank page, with a "Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following CSP directive: 'script-src 'self'""
any tips for how to diagnose what might possibly have changed? i've attempted to override wherever the CSP is coming from in meta tag in my template, but doesn't seem to be recognized. I'd prefer to understand/eliminate whatever in the framework is causing an Eval, though, seems quite sketchy
reverting the change made in the app has no effect, and i changed no other components, so all i can think of is something changed in a minor point release somewhere in enact or in the node-based server side, but ::shrug::
error is occurring in the minified code, in a line that says new Function("compile",t.join("\n"))(r.bind(void 0, e))
error is occurring in the minified code, in a line that says new Function("compile",t.join("\n"))(r.bind(void 0, e))
which clearly would trigger unsafe-eval .. but i'm not sure how to figure out what module that code is in
i have no idea why that suddenly started triggering only when i rebuilt the docker last night, though.
it's been like that for months
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
I've added following dependencies
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"ilib": "npm:ilib-webos-tv@^14.4.0-webostv1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4",
"@enact/moonstone": "^3.3.1",
"@enact/i18n": "^3.4.9"
}
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"ilib": "npm:ilib-webos-tv@^14.4.0-webostv1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4",
"@enact/moonstone": "^3.3.1",
"@enact/i18n": "^3.4.9"
}
And this is my App.js
import './App.css';
import React from "react";
import {Header, Panel} from "@enact/moonstone/Panels";
function App() {
return (
<Panel>
<Header>Test Panel</Header>
</Panel>
);
}
export default App;
This is the Index file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
Full error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1465)
at Object.useRef (react.development.js:1504)
at useClass (useClass.js:48)
at useSpotlightContainer (useSpotlightContainer.js:109)
at SpotlightContainerDecorator (SpotlightContainerDecorator.js:194)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at scheduleUpdateOnFiber (react-dom.development.js:21881)
at updateContainer (react-dom.development.js:25482)
at react-dom.development.js:26021
at unbatchedUpdates (react-dom.development.js:22431)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
at Object.render (react-dom.development.js:26103)
at Module.<anonymous> (index.js:6)
at Module../src/index.js (index.js:8)
at webpack_require (bootstrap:851)
at fn (bootstrap:150)
at Object.1 (index.js:8)
at webpack_require (bootstrap:851)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
@yalagutbay
Hm... would you check our article https://medium.com/enact-js/enact-and-interoperability-1bebfd178781
and try again? You seems to miss @enact/core dependencies
Hm... would you check our article https://medium.com/enact-js/enact-and-interoperability-1bebfd178781
and try again? You seems to miss @enact/core dependencies
"react": "17.0.1",
"react-dom": "17.0.1",
17.0.1 is not working
I could get it working only if I downgrade to 16.8.0
But the good thing is, if I create an app with CRA, then it works even in WebOS 1.
Sadly, flex is not working on WebOS 1 & 2.
i don't remember specifically what was being used back then, but it would surprise me if it didn't work, considering HP webOS used flex layout in 2011 and even a bit earlier than that i think
I believe our layout component in Enact relies on CSS variables (custom properties) which indeed weren't available in webOS 1&2. Enyo, which shipped for those versions, never officially switched to a flex box layout, as it was only ever experimental at the time. Enact does use flex box, but also uses some other features that are newer.
But How could I put it as part of the list?
@developerfromjokela
You can put your loading indicator into the last item of the array when you make your itemRenderer https://enactjs.com/docs/modules/moonstone/VirtualList/#VirtualListBase.itemRenderer
VirtualList acutually manages "virtual" list structure not the contents of the item. You can make your any idea in the itemRenderer :)
You can put your loading indicator into the last item of the array when you make your itemRenderer https://enactjs.com/docs/modules/moonstone/VirtualList/#VirtualListBase.itemRenderer
VirtualList acutually manages "virtual" list structure not the contents of the item. You can make your any idea in the itemRenderer :)
I've tried same approach on gridlist, but because other items in gridlist were too big, a lot of space around the spinner doesn't look that good. Is there a way to set virtualgridlist item size to be different only for last item?
@developerfromjokela Well.. hard to tell you without seeing the picture - expected vs. actual but, our architectural assumption was that items of VirtualList/VirtualGridList have the same structure. We are supporting variable height but the supported feature could be limited. We are more focusing on the performance of VirtualList/VirtualGridList component. I recommend using loading image as a separate layer, not a part of the List
@NearTop The ilib/locale directory has locale data format, not languages. If you need only en-US and fr-FR locale data, then, follow @webOS101 's guide.
BTW, iLib is the opensource, you can ask https://github.com/iLib-js/iLib
Thanks
BTW, iLib is the opensource, you can ask https://github.com/iLib-js/iLib
Thanks
I'm very sorry if this is the wrong place to be asking this. Are the API docs for the Enyo framework no longer available at all? https://enyojs.com/docs/2.5.1 no redirects to https://enactjs.com/docs/2.5.1 which gives a 404