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
Related
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/>);
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?
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>
This is a basic example and you can see the source code here and in action here.
Please, use getmdl branch
git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git
When I use mdl-js-layout in two components and try to navigate from one to another component, an exception is throw in the console:
REMEMBER: THE DRAWER SHOULD BE WORK
I try create a react component MdlLayout and call upgradeDom
componentDidUpdate () {
window.componentHandler.upgradeDom()
}
I try to do this manually
componentDidMount () {
const layout = findDOMNode(this.refs.layout)
window.componentHandler.upgradeElement(layout)
}
componentWillUnmount () {
const layout = findDOMNode(this.refs.layout)
window.componentHandler.downgradeElements(layout)
}
But nothing works. I read several articles about that, like this one, this, this and this
Follow the exception
DOMChildrenOperations.js?568f:65 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:65:14)
at Object.processUpdates (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:503:1), <anonymous>:209:11)
at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1550:1), <anonymous>:29:27)
at processQueue (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:137:29)
at ReactDOMComponent._updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:355:9)
at ReactDOMComponent.updateChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1690:1), <anonymous>:299:12)
at ReactDOMComponent._updateDOMChildren (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:936:12)
at ReactDOMComponent.updateComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:754:10)
at ReactDOMComponent.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:1522:1), <anonymous>:716:10)
at Object.receiveComponent (eval at <anonymous> (https://reactroutermdljs-jlnjeksrvn.now.sh/main.js:286:1), <anonymous>:125:22)
removeChild # DOMChildrenOperations.js?568f:65
processUpdates # DOMChildrenOperations.js?568f:209
dangerouslyProcessChildrenUpdates # ReactDOMIDOperations.js?2d83:29
processQueue # ReactMultiChild.js?9682:137
_updateChildren # ReactMultiChild.js?9682:355
updateChildren # ReactMultiChild.js?9682:299
_updateDOMChildren # ReactDOMComponent.js?ab8a:936
updateComponent # ReactDOMComponent.js?ab8a:754
receiveComponent # ReactDOMComponent.js?ab8a:716
receiveComponent # ReactReconciler.js?399b:125
_updateRenderedComponent # ReactCompositeComponent.js?d2b3:754
_performComponentUpdate # ReactCompositeComponent.js?d2b3:724
updateComponent # ReactCompositeComponent.js?d2b3:645
receiveComponent # ReactCompositeComponent.js?d2b3:547
receiveComponent # ReactReconciler.js?399b:125
_updateRenderedComponent # ReactCompositeComponent.js?d2b3:754
_performComponentUpdate # ReactCompositeComponent.js?d2b3:724
updateComponent # ReactCompositeComponent.js?d2b3:645
receiveComponent # ReactCompositeComponent.js?d2b3:547
receiveComponent # ReactReconciler.js?399b:125
_updateRenderedComponent # ReactCompositeComponent.js?d2b3:754
_performComponentUpdate # ReactCompositeComponent.js?d2b3:724
updateComponent # ReactCompositeComponent.js?d2b3:645
performUpdateIfNecessary # ReactCompositeComponent.js?d2b3:561
performUpdateIfNecessary # ReactReconciler.js?399b:157
runBatchedUpdates # ReactUpdates.js?8e6b:150
perform # Transaction.js?f15f:140
perform # Transaction.js?f15f:140
perform # ReactUpdates.js?8e6b:89
flushBatchedUpdates # ReactUpdates.js?8e6b:172
closeAll # Transaction.js?f15f:206
perform # Transaction.js?f15f:153
batchedUpdates # ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates # ReactUpdates.js?8e6b:97
dispatchEvent # ReactEventListener.js?944f:147
The problem here is that the upgradeElement and downgradeElement APIs are modifying the DOM element which was generated by React, causing it to throw exceptions in the reconcilitation phase where it tries to replace the view1 route component with view2 route component (or vice-versa). You can check this theory by commenting these APIs calls in MdlLayout.jsx and then there will be no more errors when switching the routes.
Any library which tries to work on the DOM directly doesn't work out of the box with React. For possible workarounds, please read this and this post.
UPDATES:
Here's a fork of your project with the MDL calls commented out, checkout the temp branch from the project and run the code. The router works as expected.
As for manipulation of the DOM, here's a screenshot of your DOM without the MDL calls -
And here's with the upgradeElement call -
Notice that the MDL library is manipulating DOM without React's consent.
I have a highcharts graph that works fine as a stand alone HTML document.
When I try to integrate it into my web application infrastructure generated by Yeoman I get an error:
ReferenceError: Highcharts is not defined
at HTMLDocument.eval (eval at <anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:3:5)
at fire (http://localhost:9000/bower_components/jquery/dist/jquery.js:3187:31)
at Object.self.add [as done] (http://localhost:9000/bower_components/jquery/dist/jquery.js:3246:7)
at jQuery.fn.ready (http://localhost:9000/bower_components/jquery/dist/jquery.js:3496:25)
at jQuery.fn.init (http://localhost:9000/bower_components/jquery/dist/jquery.js:2927:10)
at jQuery (http://localhost:9000/bower_components/jquery/dist/jquery.js:75:10)
at eval (eval at <anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:1:1)
at eval (native)
at Function.jQuery.extend.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5)
at domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5290:15) <div ng-view="" class="ng-scope" data-ng-animate="1">(anonymous function) # angular.js:13550(anonymous function) # angular.js:10225invokeLinkFn # angular.js:9696nodeLinkFn # angular.js:9093compositeLinkFn # angular.js:8397publicLinkFn # angular.js:8277lazyCompilation # angular.js:8615boundTranscludeFn # angular.js:8414controllersBoundTransclude # angular.js:9143update # angular-route.js:968Scope.$broadcast # angular.js:17552(anonymous function) # angular-route.js:643processQueue # angular.js:15961(anonymous function) # angular.js:15977Scope.$eval # angular.js:17229Scope.$digest # angular.js:17045Scope.$apply # angular.js:17337done # angular.js:11572completeRequest # angular.js:11778requestLoaded # angular.js:11711
exporting.js?_=1461240740374:9 Uncaught ReferenceError: Highcharts is not defined
On the stand alone document the header file looks like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
I'm using the same header file in my Yeoman web application view, but Bower seems to default to a different version of Jquery, and I get that error.
How can I solve this?