Develop Reference

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?

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

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>

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

Getting error when trying to set up mdc-table in my angular app

I'm trying to add an mdc-table component to my angular app by following the documentation from here: https://material.io/develop/web/components/data-tables/
If i understand correctly i have to add the following two statements to my .scss component file:
#use "#material/checkbox/mdc-checkbox"; // <-- i will implement row selection
#use "#material/data-table/mdc-data-table";
and prior to that run:
npm install #material/checkbox
npm install #material/data-table
I did all this but i keep getting:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
24 │ #use "#material/animation/functions" as functions2;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/#material/checkbox/_mixins.scss 24:1 #use
node_modules/#material/checkbox/mdc-checkbox.scss 23:1 #use
/Users/fgabriel/lister/lister-table/src/app/web-table/web-table.component.scss 6:1 root stylesheet
errors # client:159
(anonymous) # socket.js:47
sock.onmessage # SockJSClient.js:63
EventTarget.dispatchEvent # sockjs.js:170
(anonymous) # sockjs.js:888
SockJS._transportMessage # sockjs.js:886
EventEmitter.emit # sockjs.js:86
WebSocketTransport.ws.onmessage # sockjs.js:2962
wrapFn # zone-evergreen.js:1218
invokeTask # zone-evergreen.js:399
runTask # zone-evergreen.js:167
invokeTask # zone-evergreen.js:480
invokeTask # zone-evergreen.js:1621
globalZoneAwareCallback # zone-evergreen.js:1647
I tried several things but i can not make it work, any help is much appreciated.

Trying using the import
#import "#material/checkbox/mdc-checkbox"; // <-- i will implement row selection
#import "#material/data-table/mdc-data-table";

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.