How to configure este to work with react-toolbox? - reactjs

As recomended in este wiki, I would like to use react-toolbox to create components in material design. I have installed react-toolbox with npm. I got this error while trying to use button.
ERROR in ./~/css-loader!./~/postcss-loader!./~/react-toolbox/lib/button/theme.css
Module build failed: Error: No PostCSS Config found in: /home/alenka/Documents/bakalárka/esteDir/este/node_modules/react-toolbox/lib/button
at Error (native)
at /home/alenka/Documents/bakalárka/esteDir/este/node_modules/postcss-load-config/index.js:51:26
# ./~/react-toolbox/lib/button/theme.css 4:14-100 13:2-17:4 14:20-106
# ./~/react-toolbox/lib/button/index.js
# ./src/browser/home/HomePage.js
# ./src/browser/app/routeConfig.js
# ./src/browser/app/Root.js
# ./src/browser/main.js
# ./src/browser/index.js
# multi webpack-hot-middleware/client?path=http://192.168.1.41:8080/__webpack_hmr ./src/browser/index.js
ERROR in ./~/css-loader!./~/postcss-loader!./~/react-toolbox/lib/ripple/theme.css
Module build failed: Error: No PostCSS Config found in: /home/alenka/Documents/bakalárka/esteDir/este/node_modules/react-toolbox/lib/ripple
at Error (native)
at /home/alenka/Documents/bakalárka/esteDir/este/node_modules/postcss-load-config/index.js:51:26
# ./~/react-toolbox/lib/ripple/theme.css 4:14-100 13:2-17:4 14:20-106
# ./~/react-toolbox/lib/ripple/index.js
# ./~/react-toolbox/lib/button/index.js
# ./src/browser/home/HomePage.js
# ./src/browser/app/routeConfig.js
# ./src/browser/app/Root.js
# ./src/browser/main.js
# ./src/browser/index.js
# multi webpack-hot-middleware/client?path=http://192.168.1.41:8080/__webpack_hmr ./src/browser/index.js
Could anybody help me please?

Related

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?

I'm getting this error on every render. The stack trace below started with a mouse §click. The problem is I have no clue how to approach this. What I gather from this trace is:
It seems to happen inside React
Apparently it happens while React is reconciling the virtual DOM and the real DOM?
Somehow React Navigation has hooked into this process and is complaining.
And here it ends for me.
What am I using:
Expo Go SDK 46
React Native Web 0.18.7
Reactflow 11.2.0
So how do I go about debugging this? BTW I did wrap everything in a navigation container.
console.<computed> # index.js:1
error # react-native-logs.fx.ts:34
overrideMethod # react_devtools_backend.js:4026
i # VM8448:10
t.onCommitFiberRoot.t.onCommitFiberRoot # VM8448:10
onCommitRoot # react-dom.development.js:4875
commitRootImpl # react-dom.development.js:26709
commitRoot # react-dom.development.js:26517
performSyncWorkOnRoot # react-dom.development.js:25956
flushSyncCallbacks # react-dom.development.js:11982
flushSyncCallbacksOnlyInLegacyMode # react-dom.development.js:11961
scheduleUpdateOnFiber # react-dom.development.js:25326
dispatchReducerAction # react-dom.development.js:17269
listener # index.js:138
(anonymous) # index.js:18
setState # index.js:17
(anonymous) # index.ts:21
setNodes # slice.ts:120
(anonymous) # SlideEditorCanvas.tsx:139
(anonymous) # index.js:2308
call # dispatch.js:57
emit # zoom.js:219
start # zoom.js:198
mousedowned # zoom.js:283
(anonymous) # on.js:3

Blank page after running build on the react app and errors on the console

I am a beginner in React JS. I was deploying my React App that I created using create-react-app on netlify. The build was successful but on checking the link https://schotrix.netlify.app/, it was showing a blank page and errors on the console. So i decided to check again on my localhost by running npm run build I realized it's the same problem.
What could these errors mean and how can I solve them?
picture to the error on the console
react-dom.production.min.js:216
Error
at i (index.tsx:19:20)
at index.tsx:776:5
at react.production.min.js:19:66
at react.production.min.js:17:388
at S (react.production.min.js:16:230)
at C (react.production.min.js:17:355)
at Object.forEach (react.production.min.js:19:49)
at j (index.tsx:760:3)
at index.tsx:791:24
at react.production.min.js:19:66
su # react-dom.production.min.js:216
n.callback # react-dom.production.min.js:216
ho # react-dom.production.min.js:131
yu # react-dom.production.min.js:220
Ac # react-dom.production.min.js:259
t.unstable_runWithPriority # scheduler.production.min.js:18
qa # react-dom.production.min.js:122
Nc # react-dom.production.min.js:252
gc # react-dom.production.min.js:243
vc # react-dom.production.min.js:237
el # react-dom.production.min.js:285
(anonymous) # react-dom.production.min.js:289
jc # react-dom.production.min.js:244
il # react-dom.production.min.js:289
t.render # react-dom.production.min.js:296
287 # index.js:6
i # (index):1
t # (index):1
r # (index):1
(anonymous) # main.b32d759b.chunk.js:1
index.tsx:19
Uncaught Error
at i (index.tsx:19:20)
at index.tsx:776:5
at react.production.min.js:19:66
at react.production.min.js:17:388
at S (react.production.min.js:16:230)
at C (react.production.min.js:17:355)
at Object.forEach (react.production.min.js:19:49)
at j (index.tsx:760:3)
at index.tsx:791:24
at react.production.min.js:19:66
Actually i had to run npm start inorder to find out what exactly the error is and for my case the error was
Error: [Users] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
because i was accessing the component like this
<Route path="/users" ><Users/></Route>
instead of this
<Route path="/users" element={<Users/>}/>

smarthome test suite fails to execute

I am trying to run the Google Smarthome automated tests on my service. I test retrieves my service's devices and traits correctly. However, when I start the test nothing happens. No timeouts, no errors, nothing.
In my web browser developer's view I see the following error from Google's test suite app. Could it be causing the test to fail to start? Is this a problem on my end or Google's?
ERROR a.split is not a function
Yh # app_compiled.js?523e…-6feac3eecc6b:18199
Zh.handleError # app_compiled.js?523e…-6feac3eecc6b:18199
next # app_compiled.js?523e…-6feac3eecc6b:18335
f # app_compiled.js?523e…-6feac3eecc6b:18316
g.ht # app_compiled.js?523e…-6feac3eecc6b:18293
g.next # app_compiled.js?523e…-6feac3eecc6b:18292
g.ba # app_compiled.js?523e…-6feac3eecc6b:18290
g.next # app_compiled.js?523e…-6feac3eecc6b:18290
g.next # app_compiled.js?523e…-6feac3eecc6b:18295
Ln.emit # app_compiled.js?523e…-6feac3eecc6b:18315
(anonymous) # app_compiled.js?523e…-6feac3eecc6b:18320
u.vb # app_compiled.js?523e…-6feac3eecc6b:18086
p.run # app_compiled.js?523e…-6feac3eecc6b:18078
Nn.Aa # app_compiled.js?523e…-6feac3eecc6b:18319
Nj # app_compiled.js?523e…-6feac3eecc6b:18320
u.handleError # app_compiled.js?523e…-6feac3eecc6b:18086
p.Zo # app_compiled.js?523e…-6feac3eecc6b:18079
t.gi # app_compiled.js?523e…-6feac3eecc6b:18088
p # app_compiled.js?523e…-6feac3eecc6b:18115
q # app_compiled.js?523e…-6feac3eecc6b:18115
load (async)
ia # app_compiled.js?523e…-6feac3eecc6b:18108
u.Xg # app_compiled.js?523e…-6feac3eecc6b:18086
mi # app_compiled.js?523e…-6feac3eecc6b:18169
u.Xg # app_compiled.js?523e…-6feac3eecc6b:18086
mi # app_compiled.js?523e…-6feac3eecc6b:18083
u.Xg # app_compiled.js?523e…-6feac3eecc6b:18086
p.Xg # app_compiled.js?523e…-6feac3eecc6b:18080
p.Es # app_compiled.js?523e…-6feac3eecc6b:18081
(anonymous) # app_compiled.js?523e…-6feac3eecc6b:18111
(anonymous) # app_compiled.js?523e…-6feac3eecc6b:18977
Show 36 more frames
To follow up here - the issue I had was I used the recommended definition for how to availableThermostatModes in the Sync request, which is a JSON area of strings.
Instead, I was asked to implement the deprecated representation format, which is a comma separated string. Once switching to the deprecated format the suite ran.
See: https://developers.google.com/assistant/smarthome/traits/temperaturesetting
for the 2 formats. Again, I had to use the deprecated format (Not the latest recommended format).

Cannot read property 'func' of undefined

I'm getting the following 2 errors with my React Native project, using Expo in the Simulator.
Can anyone shed any light on what I should be looking to fix? I've seen a couple of people with similar 'undefined' issues but I was unable to a gain a solution from them. I'm not even sure which file I should be looking at! ExceptionsManager.js is a file inside 'node_modules/react-native' so does that mean anything? Any ideas?
Many thanks.
Cannot read property 'func' of undefined - ExceptionsManager.js:65
handleException # ExceptionsManager.js:65
handleError # InitializeCore.js:106
reportFatalError # error-guard.js:46
guardedLoadModule # require.js:133
_require # require.js:118
(anonymous) # config.json:1
executeApplicationScript # debuggerWorker.js:40
(anonymous) # debuggerWorker.js:65
Module AppRegistry is not a registered callable module (calling runApplication) - ExceptionsManager.js:65
handleException # ExceptionsManager.js:65
handleError # InitializeCore.js:106
reportFatalError # error-guard.js:46
__guard # MessageQueue.js:267
callFunctionReturnFlushedQueue # MessageQueue.js:115
(anonymous) # debuggerWorker.js:72

ERROR ReferenceError: KEYUTIL is not defined

I have been following this tutorial and so far so good except that I keep getting this error after a successful login or what seems like it
ERROR ReferenceError: KEYUTIL is not defined
at OidcSecurityValidation.validate_signature_id_token (oidc.security.validation.ts:152)
at SafeSubscriber._next (oidc.security.service.ts:116)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at CatchSubscriber.Subscriber._next (Subscriber.js:125)
at CatchSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
defaultErrorLogger # core.es5.js:1084
ErrorHandler.handleError # core.es5.js:1144
next # core.es5.js:4778
schedulerFn # core.es5.js:3851
SafeSubscriber.__tryOrUnsub # Subscriber.js:238
SafeSubscriber.next # Subscriber.js:185
Subscriber._next # Subscriber.js:125
Subscriber.next # Subscriber.js:89
Subject.next # Subject.js:55
EventEmitter.emit # core.es5.js:3837
NgZone.triggerError # core.es5.js:4209
onHandleError # core.es5.js:4170
ZoneDelegate.handleError # zone.js:395
Zone.runTask # zone.js:194
ZoneTask.invoke # zone.js:486
I tried the approach specified in the tutorial that didnt work. I imported the file this way import "./assets/jsrsasign.min.js" in vendor.ts it didnt help either.
Ok so here is what I did to get through. If you are using webpack 2 (that is what I am using)
add the following (depending on your folder arrangements)
new CopyWebpackPlugin([
{ from: './angularApp/assets/*.*', to: 'assets/', flatten: true }
]),
and then referencing in my index.html like this
<script src="assets/jsrsasign.min.js"></script>
the last line in the section

Resources