How to import client-side HTML into Gatsby/React? - javascript

I’m a react noob and self-taught, so I’m sure I am doing something stupid. I’m trying to make a small bit of client-side rendered html into a component within my Gatsby site. Been battling this for 4 days. I'm desperate to get this Vue component into my Gatsby site.
Here's the code for my component:
import React, { Component } from "react"
import { Helmet } from "react-helmet"
import DemoHTML from '../../static/demo.html');
class Model extends Component {
componentDidMount() {
// set up and use external package as needed
const Mount = React.createClass({
render: function(){
return (
<section contentEditable='false' dangerouslySetInnerHTML={{ __html: DemoHTML }} />
);
}
});
}
render(props, Mount) {
return (
<React.Fragment>
<Helmet>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/zircle"></script></Helmet>
<Mount></Mount>
</React.Fragment>
)
}
}
export default Model;
Then, here is the HTML that is imported:
<div id="app">
<z-canvas :views='$options.components'>
</z-canvas>
</div>
<script>
const one = [
template: `
<z-view style="border-color: #8F6AFA; font-family: 'Montserrat', sans-serif; font-weight: bold; color: #ffffff; border-width: 1px; background-image: linear-gradient(90deg, #292929 2.11%, #000000 104.85%)" />
` ]
<!--- truncated tested working content for readability -->
new Vue({
el: 'app',
components: {
one
},
mounted () {
this.$zircle.setView('one')
}
})
</script>
Lastly, here's my errors in console and on page...
On page error:
Unhandled Runtime Error
Close
One unhandled runtime error found in your files. See the list below to fix it:
Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Model`.
./node_modules/react-dom/cjs/react-dom.development.js:25058
Open in Editor
25056 | {
25057 | {
> 25058 | throw Error( "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " + (type == null ? type : typeof type) + "." + info );
25059 | }
25060 | }
It's helpful to note that the HTML page does render perfectly on its own.
Thank you!
Updated console
DevTools failed to load source map: Could not load content for chrome-extension://fddhonoimfhgiopglkiokmofecgdiedb/MeetingScheduleResource.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
vue:9108 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
vue:634 [Vue warn]: Cannot find element: #app
warn # vue:634
query # vue:5710
Vue.$mount # vue:11931
Vue._init # vue:5026
Vue # vue:5092
(anonymous) # test.js:4
client.js:95 [HMR] connected
client.js:195 [HMR] bundle has 1 warnings
client.js:196 Critical dependency: the request of a dependency is an expression
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at model.js:27.
at Model (webpack-internal:///./src/pages/model.js:21:23)
at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)
at RouteHandler
at div
at FocusHandlerImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:359:5)
at FocusHandler (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:330:19)
at RouterImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:235:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Router
at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)
at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
at LocationHandler (webpack-internal:///./.cache/root.js:69:29)
at LocationProvider (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:84:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Root
at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)
at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)
at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
at RootWrappedWithOverlayAndProvider
at App (webpack-internal:///./.cache/app.js:205:68)
printWarning # react.development.js:220
error # react.development.js:196
createElementWithValidation # react.development.js:2215
render # model.js:26
finishClassComponent # react-dom.development.js:17485
updateClassComponent # react-dom.development.js:17435
beginWork # react-dom.development.js:19073
beginWork$1 # react-dom.development.js:23940
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
eval # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
runRender # app.js:230
eval # app.js:242
setTimeout (async)
eval # app.js:241
Promise.then (async)
eval # app.js:171
Promise.then (async)
eval # app.js:51
./.cache/app.js # commons.js:1663
options.factory # commons.js:4121
__webpack_require__ # commons.js:3478
(anonymous) # commons.js:4831
__webpack_require__.O # commons.js:3527
(anonymous) # commons.js:4832
(anonymous) # commons.js:4834
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at model.js:27.
at Model (webpack-internal:///./src/pages/model.js:21:23)
at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)
at RouteHandler
at div
at FocusHandlerImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:359:5)
at FocusHandler (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:330:19)
at RouterImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:235:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Router
at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)
at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
at LocationHandler (webpack-internal:///./.cache/root.js:69:29)
at LocationProvider (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:84:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Root
at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)
at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)
at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
at RootWrappedWithOverlayAndProvider
at App (webpack-internal:///./.cache/app.js:205:68)
printWarning # react.development.js:220
error # react.development.js:196
createElementWithValidation # react.development.js:2215
render # model.js:26
finishClassComponent # react-dom.development.js:17485
updateClassComponent # react-dom.development.js:17435
beginWork # react-dom.development.js:19073
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
beginWork$1 # react-dom.development.js:23964
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
eval # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
runRender # app.js:230
eval # app.js:242
setTimeout (async)
eval # app.js:241
Promise.then (async)
eval # app.js:171
Promise.then (async)
eval # app.js:51
./.cache/app.js # commons.js:1663
options.factory # commons.js:4121
__webpack_require__ # commons.js:3478
(anonymous) # commons.js:4831
__webpack_require__.O # commons.js:3527
(anonymous) # commons.js:4832
(anonymous) # commons.js:4834
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Model`.
at createFiberFromTypeAndProps (react-dom.development.js:25058)
at createFiberFromElement (react-dom.development.js:25086)
at createChild (react-dom.development.js:13446)
at reconcileChildrenArray (react-dom.development.js:13719)
at reconcileChildFibers (react-dom.development.js:14125)
at reconcileChildren (react-dom.development.js:16990)
at finishClassComponent (react-dom.development.js:17511)
at updateClassComponent (react-dom.development.js:17435)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
createFiberFromTypeAndProps # react-dom.development.js:25058
createFiberFromElement # react-dom.development.js:25086
createChild # react-dom.development.js:13446
reconcileChildrenArray # react-dom.development.js:13719
reconcileChildFibers # react-dom.development.js:14125
reconcileChildren # react-dom.development.js:16990
finishClassComponent # react-dom.development.js:17511
updateClassComponent # react-dom.development.js:17435
beginWork # react-dom.development.js:19073
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
beginWork$1 # react-dom.development.js:23964
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
eval # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
runRender # app.js:230
eval # app.js:242
setTimeout (async)
eval # app.js:241
Promise.then (async)
eval # app.js:171
Promise.then (async)
eval # app.js:51
./.cache/app.js # commons.js:1663
options.factory # commons.js:4121
__webpack_require__ # commons.js:3478
(anonymous) # commons.js:4831
__webpack_require__.O # commons.js:3527
(anonymous) # commons.js:4832
(anonymous) # commons.js:4834
UPDATE
I have made the suggested update to ESM (and also updated in the question. One thing I wanted to share with you all, in case it warrants consideration. The reason this script must be rendered on client side is it is a vue library. (See Zircle.github.io)
If everything is loaded client side, I don't see why this would be an issue. But, just an FYI.


First step to getting this to work is to add support for HTML modules. Gatsby doesn't recognize them out-of-the-box.
Install html-loader using:
$ npm i -D html-loader
In gatsby-node.js
exports.onCreateWebpackConfig = ({
actions,
}) => {
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.html$/,
loader: require.resolve('html-loader'),
options: {
minimize: false,
},
},
],
},
})
}
Also make sure you don't fix ESM imports and commonjs require(). Stick to static ESM imports/exports. So as already suggested remove the require() call and use imports for getting the HTML contents of ../../static/demo.html.
import DemoHtml from '../../static/demo.html';
Can't foresee what other problems you might get into but try the above and report back.


Got zircle integrated into React/Gatsby.
The useScript hook is necessary wait till the vue and then zircle library is fully loaded.
Install package dangerously-set-html-content - as you need Javascript inside HTML to be executed.
I used useScript code from https://usehooks.com/useScript/
import React, { Component } from "react";
import DemoHTML from "../../static/zircle.html";
import InnerHTML from "dangerously-set-html-content";
import "zircle/dist/zircle.css";
import useScript from "../hooks/useScript";
export default function LoadVue() {
const status = useScript("https://unpkg.com/vue");
return <>{status === "ready" && <Zircle />}</>;
}
function Zircle() {
const status = useScript("https://unpkg.com/zircle");
return <>{status === "ready" && <InnerHTML html={DemoHTML} />}</>;
}
and the zircle.html is
<div> Hello Zircle</div>
<div id="app2">
<z-canvas :views="$options.components"></z-canvas>
</div>
<script>
const home = {
template: `<z-view>Hello World!</z-view>`
}
new Vue({
el: '#app2',
components: {
home
},
mounted () {
this.$zircle.setView('home')
}
})
</script>

Related

React Admin Tutorial by Marmelab not working

I am trying to follow this React-Admin tutorial by marmelab.com : https://marmelab.com/react-admin/Tutorial.html
After the following setup:
> npm create-react-app test-admin
> cd test-admin/
> npm install react-admin ra-data-json-server prop-types
> npm start
I tried running the following code as mentioned in the tutorial:
// in src/App.js
import * as React from "react";
import { Admin } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => <Admin dataProvider={dataProvider} />;
export default App;
This gives me no output and a list of errors as follows:
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning # react-dom.development.js:86
error # react-dom.development.js:60
render # react-dom.development.js:29404
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
callCallback # react-dom.development.js:4157
invokeGuardedCallbackDev # react-dom.development.js:4206
invokeGuardedCallback # react-dom.development.js:4270
beginWork$1 # react-dom.development.js:27243
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react-dom.development.js:18525 The above error occurred in the <CoreAdminContext> component:
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:92536:28)
at AdminContext
at Admin (http://localhost:3000/static/js/bundle.js:102485:25)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18525
update.callback # react-dom.development.js:18558
callCallback # react-dom.development.js:13092
commitUpdateQueue # react-dom.development.js:13113
commitLayoutEffectOnFiber # react-dom.development.js:23204
commitLayoutMountEffects_complete # react-dom.development.js:24461
commitLayoutEffects_begin # react-dom.development.js:24447
commitLayoutEffects # react-dom.development.js:24385
commitRootImpl # react-dom.development.js:26651
commitRoot # react-dom.development.js:26517
performSyncWorkOnRoot # react-dom.development.js:25956
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at beginWork$1 (react-dom.development.js:27219:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
at renderRootSync (react-dom.development.js:26271:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
beginWork$1 # react-dom.development.js:27219
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
I am sure I am following the tutorial correctly.
Does this have anything to do with conflicting versions?
How do I fix this issue and continue with the tutorial?
My React version:
$ npm view react version
18.0.0

React 18 no longer supports ReactDOM.render, as they have replaced it with createRoot.
You can learn more about it here: React v18.0
You can continue with the tutorial by just downgrading to React 17:
npm install --save react#17.0.2 react-dom#17.0.2

You must change index.js file.
import ReactDom from 'react-dom/client'
const root = ReactDOM.creatorRoot(document.getElementById('root'));
root.render(<App/>);

Removing firestore from Vue project but retaining firebase auth

I'm switching from Firestore to MongoDB, and I'm now trying to remove references to it in my App.vue file. I'm still using Firebase auth.
Where it says this in the console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
My beforeMount() never had App.initializeApp(), and I'm trying to figure out where that needs to go, but nothing is working. I'm really puzzled as to why this one component is not behaving as expected after removing references to Firestore, as all my other components worked fine. Any advice is greatly appreciated.
Full console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
found in
---> <Index> at src/components/Index.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1893
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
vue.runtime.esm.js?2b0e:1897 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at app (index.esm.js?cc84:356:1)
at Object.serviceNamespace [as auth] (index.esm.js?cc84:406:1)
at VueComponent.beforeMount (Index.vue?b484:544:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at callHook (vue.runtime.esm.js?2b0e:4235:1)
at mountComponent (vue.runtime.esm.js?2b0e:4058:1)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
at init (vue.runtime.esm.js?2b0e:3137:1)
at merged (vue.runtime.esm.js?2b0e:3322:1)
at createComponent (vue.runtime.esm.js?2b0e:6022:1)
logError # vue.runtime.esm.js?2b0e:1897
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
firebase/db.js;
import firebase from 'firebase';
import 'firebase/firestore';
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
//[removed for privacy]
};
// Initialize Firebase
export const db = firebase.initializeApp(firebaseConfig).firestore();
firebase.analytics();

I seem to have fixed it by changing my config file to:
import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
//[hidden]
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
export const auth = firebase.auth();
Then in my App.vue component, I can:
import {auth} from './firebase/db';
And change firebase.auth() ... to just auth. ..., like this:
await auth.signInWithPopup(provider).then(() => {
auth.onAuthStateChanged((user) => {
However in my other components, I can retain the original import firebase from 'firebase'; and firebase.auth() ... and it works without errors. I don't know why this is. Does anyone know why?

vue2-timepicker package is not working properly in vue.js

I am using the vue2-timepicker js package,
npm install vue2-timepicker --save
after that,I import CSS and datetimepicker component file from node_modules inside my main.js file
//
import CSS file
import 'vue2-timepicker/dist/VueTimepicker.css'
register Vue js component for globally use in the application in main.js file.
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
Vue.component('vue-timepicker', VueTimepicker)
3.use inside my component.
<vue-timepicker></vue-timepicker>
here is the render HTML inside the inspect element tab
<span class="vue__time-picker time-picker">
<input type="text" placeholder="HH:mm" tabindex="0" readonly="readonly" autocomplete="off class="display-time is-empty">
<div tabindex="-1" class="dropdown drop-down" style="display: none;">
<div tabindex="-1" class="select-list">
<ul class="hours">
<li class="hint">HH</li>
</ul>
<ul class="minutes">
<li class="hint">mm</li>
</ul>
</div>
</div>
</span>
Problem:
above tag always show a read-only input tag whenever I click on the tag for a select time it shows an error in the console.
[Vue warn]: Error in render: "TypeError: _vm.isDisabled is not a function"
found in
---> <VueTimepicker> at node_modules/vue2-timepicker/src/vue-timepicker.vue
<Home> at src/views/tenants/pages/Home.vue
<Main> at src/layouts/main/Main.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3550
updateComponent # vue.runtime.esm.js?2b0e:4066
get # vue.runtime.esm.js?2b0e:4479
run # vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4310
eval # vue.runtime.esm.js?2b0e:1980
flushCallbacks # vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1933
nextTick # vue.runtime.esm.js?2b0e:1990
queueWatcher # vue.runtime.esm.js?2b0e:4402
update # vue.runtime.esm.js?2b0e:4544
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
proxySetter # vue.runtime.esm.js?2b0e:4631
setDropdownState # vue-timepicker.vue?5427:1174
toggleActive # vue-timepicker.vue?5427:1139
onBlur # vue-timepicker.vue?5427:1289
eval # vue-timepicker.vue?5427:1283
setTimeout (async)
debounceBlur # vue-timepicker.vue?5427:1281
blur # vue-timepicker.vue?0d53:38
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1854
invoker # vue.runtime.esm.js?2b0e:2179
original._wrapper # vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: _vm.isDisabled is not a function
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:189:59)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:180:37)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:163:25)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.run (vue.runtime.esm.js?2b0e:4554)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)

This vue2-timepicker package works fine. You import the package in the wrong way. You need to import it in the following manner.
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
Vue.component("vue-timepicker", VueTimepicker);
CodeSandbox

ReactJS with Google Tag Manager

I am trying to track my application with Google Tag Manager. I found a package here: https://www.npmjs.com/package/react-google-tag-manager which seems to be popular but I am unsure how to configure it properly despite the instructions!!
I took the example from the website and created a new script called google-tag-manager.js.
I have then included this on one of the pages I want to track: import GoogleTagManager from '../components/google-tag-manager'
I then simply added the tag to within my render() function <GoogleTagManager gtmId='GTM-XXXXX' />.
I am guessing I don't fully understand as I am now getting an error of:
TypeError: Cannot read property 'string' of undefined
./src/components/google-tag-manager.js
src/components/google-tag-manager.js:36
33 | }
34 |
35 | GoogleTagManager.propTypes = {
> 36 | gtmId: React.PropTypes.string.isRequired,
37 | dataLayerName: React.PropTypes.string,
38 | additionalEvents: React.PropTypes.object,
39 | previewVariables: React.PropTypes.string,
Have I missed something or am I doing something wrong?
Thanks
Side issue:
proxyConsole.js:54 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
__stack_frame_overlay_proxy_console__ # proxyConsole.js:54
printWarning # warning.js:33
warning # warning.js:57
mountIndeterminateComponent # react-dom.development.js:10439
beginWork # react-dom.development.js:10601
performUnitOfWork # react-dom.development.js:12573
workLoop # react-dom.development.js:12682
callCallback # react-dom.development.js:1299
invokeGuardedCallbackDev # react-dom.development.js:1338
invokeGuardedCallback # react-dom.development.js:1195
performWork # react-dom.development.js:12800
scheduleUpdateImpl # react-dom.development.js:13185
scheduleUpdate # react-dom.development.js:13124
enqueueSetState # react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState # react.development.js:218
(anonymous) # base.js:29
Promise resolved (async)
componentDidMount # base.js:23
commitLifeCycles # react-dom.development.js:11505
commitAllLifeCycles # react-dom.development.js:12294
callCallback # react-dom.development.js:1299
invokeGuardedCallbackDev # react-dom.development.js:1338
invokeGuardedCallback # react-dom.development.js:1195
commitAllWork # react-dom.development.js:12415
workLoop # react-dom.development.js:12687
callCallback # react-dom.development.js:1299
invokeGuardedCallbackDev # react-dom.development.js:1338
invokeGuardedCallback # react-dom.development.js:1195
performWork # react-dom.development.js:12800
scheduleUpdateImpl # react-dom.development.js:13185
scheduleUpdate # react-dom.development.js:13124
scheduleTopLevelUpdate # react-dom.development.js:13395
updateContainer # react-dom.development.js:13425
(anonymous) # react-dom.development.js:17105
unbatchedUpdates # react-dom.development.js:13256
renderSubtreeIntoContainer # react-dom.development.js:17104
render # react-dom.development.js:17129
./src/index.js # index.js:20
__webpack_require__ # bootstrap 6f791d33f885679fccb8:669
fn # bootstrap 6f791d33f885679fccb8:87
0 # registerServiceWorker.js:108
__webpack_require__ # bootstrap 6f791d33f885679fccb8:669
./node_modules/add-dom-event-listener/lib/EventBaseObject.js.Object.defineProperty.value # bootstrap 6f791d33f885679fccb8:715
(anonymous) # bundle.js:719

React.PropTypes - is now separated from react so there's another package for PropTypes.
You will need to
Install proptypes package
Import proptypes to your file:
import PropTypes from 'prop-types';
Use PropTypes as standalone library
GoogleTagManager.propTypes = {
gtmId: PropTypes.string.isRequired,
dataLayerName: PropTypes.string,
additionalEvents: PropTypes.object,
scriptId: PropTypes.string
};
OR
You can just remove whole proptypes code block, but I wouldn't recommend this

The module you are referring to uses PropTypes from react and PropTypes is a different package now. More info here.
Note:
React.PropTypes has moved into a different package since React
v15.5. Please use the prop-types library instead. We provide a
codemod script to automate the conversion.

Getting a really crypric message in react.js when changing routes

Upon changing my application route via history.replace(PATH), I get this really cryptic error message. The stack shows the error originating in redux's applyMiddleware. I use thunk and redux-promise for middleware.
I've tried tracing the rendering path through each of my components, and my breakpoint never gets to the render method of the state I'm trying to load.
I've also tried updating my npm modules and rebuilding the project.
I'm using React 15.0.2.
ReactReconciler.js:54 Uncaught (in promise) TypeError: Cannot read
property 'getNativeNode' of null(…)getNativeNode #
ReactReconciler.js:54getNativeNode #
ReactCompositeComponent.js:303getNativeNode #
ReactReconciler.js:54updateChildren #
ReactChildReconciler.js:89_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent # ReactReconciler.js:103updateChildren
# ReactChildReconciler.js:85_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66performUpdateIfNecessary #
ReactCompositeComponent.js:511performUpdateIfNecessary #
ReactReconciler.js:122runBatchedUpdates # ReactUpdates.js:143perform #
Transaction.js:136perform # Transaction.js:136perform #
ReactUpdates.js:89flushBatchedUpdates #
ReactUpdates.js:165ReactUpdates_flushBatchedUpdates #
ReactPerf.js:66closeAll # Transaction.js:202perform #
Transaction.js:149batchedUpdates #
ReactDefaultBatchingStrategy.js:63enqueueUpdate #
ReactUpdates.js:194enqueueUpdate #
ReactUpdateQueue.js:22enqueueSetState #
ReactUpdateQueue.js:201ReactComponent.setState #
ReactComponent.js:67handleChange # connect.js:301dispatch #
createStore.js:186(anonymous function) # index.js:28(anonymous
function) # index.js:9dispatch # applyMiddleware.js:45

Solved the issue. Turns out it was caused by attempting to map over an array to generate child components in the render method of the component navigated to. I wish the error message were a bit more descriptive.

Also encountered this error. Just like ThinkingInBits, I was mapping over an array creating components. I made a change to the mapping function, leaving one of the variables undefined. This is the error that I kept getting and once I fixed the undefined variable issue, it disappeared. It is quite nasty in the way it is masking the actual problem.

Categories

Resources