Hi I am trying to add a plugin to implement Mixpanel analytics inside my app.
I am running Nativescript version 6 and added #nstudio/nativescript-mixpanel version 2.1.0.
Getting this error even though my tslint is able to find the module properly.
Cannot find module '#nstudio/nativescript-mixpanel'
Import in main.js
import {
NativeScriptMixpanel,
NativeScriptMixpanelPeople,
} from "#nstudio/nativescript-mixpanel";
const MIXPANEL_TOKEN = "KEY";
NativeScriptMixpanel.init(MIXPANEL_TOKEN);
package.json
"dependencies": {
"#nstudio/nativescript-mixpanel": "^2.1.0",
I have not used Vue NativeScript, however in Vue you would need a slash after the "#"
so
import {
NativeScriptMixpanel,
NativeScriptMixpanelPeople,
} from "#nstudio/nativescript-mixpanel";
const MIXPANEL_TOKEN = "KEY";
NativeScriptMixpanel.init(MIXPANEL_TOKEN);
would become
import {
NativeScriptMixpanel,
NativeScriptMixpanelPeople,
} from "#/nstudio/nativescript-mixpanel";
const MIXPANEL_TOKEN = "KEY";
NativeScriptMixpanel.init(MIXPANEL_TOKEN);
Related
Can someone help me understand if there is a way to configure open Telemetry on the client side for react and vanilla JS projects all I want to do is to console the traces of fetch call that are being made from the browser.
Most of the documentation I see is only for nodejs. Pls pinpoint a documentation if there are any?
The documentation gives a common guide for Javascript. What you do for you React would be same as what you do for Node.js or even simple JS scripts.
Just follow the documentation. Create and export a tracer:
import { ZoneContextManager } from '#opentelemetry/context-zone';
import { registerInstrumentations } from '#opentelemetry/instrumentation';
import { DocumentLoadInstrumentation } from '#opentelemetry/instrumentation-document-load';
import { FetchInstrumentation } from '#opentelemetry/instrumentation-fetch';
import { UserInteractionInstrumentation } from '#opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '#opentelemetry/instrumentation-xml-http-request';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '#opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '#opentelemetry/sdk-trace-web';
const setupTracer = () => {
const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
contextManager: new ZoneContextManager(),
});
// Registering instrumentations
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation(),
new UserInteractionInstrumentation(),
new XMLHttpRequestInstrumentation(),
new FetchInstrumentation()
],
});
}
export default setupTracer;
Import the tracer like this in your app's entry point (usually index.js):
setupTracer();
ReactDOM.render(<App />, document.getElementById('root'));
I am using vue-chartkick with Laravel. I followed the documentation to install it.
npm install vue-chartkick chart.js
Then, in resources/js/app.js:
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(Chart))
...
const app = new Vue({
el: '#app',
router: router,
vuetify: new Vuetify()
});
Then, when I put <line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart> into a component, I get the following error in javascript console:
[Vue warn]: Unknown custom element: <line-chart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Dashboard> at resources/js/components/backend/Dashboard.vue
<VApp>
<Root>
What is the correct way to register the component ?
just use chart.js version 2.9 and vue-chartkick 0.6.1
npm install vue-chartkick#0.6.1 chart.js#2.9 --save
and import in app.js like below:
import {Chart} from 'chart.js'
import Chartkick from 'vue-chartkick'
Vue.use(Chartkick.use(Chart));
I used Chartkick with Fastapi. I struggled to implement it on the backend (no npm installer), then found the solution at https://github.com/ankane/vue-chartkick#installation
Put the code inside your main template file eg index.html:
My main.js file, running on fastapi server:
import { MyTitle } from "./title.js";
import { MyName } from "./name.js";
export const app = Vue.createApp({
delimiters: ["[[", "]]"],
data() {
return {};
},
});
app.component("MyTitle", MyTitle);
app.component("MyName", MyName);
app.use(VueChartkick);
const vm = app.mount("#app");
I am building a laravel package and in this package I have a vue plugin that I want to import in my project that is using the laravel package.
This is how I try to import it:
let MyPlugin = require('./../vendor/laravel-package/src/Plugins/Vue');
Vue.use(MyPlugin, { someOption: true });
In this path: vendor/laravel-package/src/Plugins/Vue/Main.js I have my plugin:
MyPlugin.install = function (Vue, options) {
console.log(options);
};
I am just trying something very simpel:
Now in my console I get the error
cannot find module
I'm trying to use the react material-ui theme having installed it from npm, I get the following errors when I include 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx:
TS7016: Could not find a declaration file for module
'material-ui/styles/MuiThemeProvider'.
'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js'
implicitly has an 'any' type. Try npm install
#types/material-ui/styles/MuiThemeProvider if it exists or add a new
declaration (.d.ts) file containing declare module
'material-ui/styles/MuiThemeProvider';
I've tried both suggestions to no avail including running the command: npm install -D #types/material-ui.
My #types folder in node_modules exists with the relevant types.
Here is the code where I'm trying to use it:
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
Ok I figured it out, in tsconfig.json under 'compilerOptions' visual-studio by default had its types set to ["webpack-env"], I needed to add "material-ui" to it or optionally just remove it: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Use the default import from the same path.
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
The solution that worked for me which is med's answer above which I explain in more detail below.
Open the tsconfig.json file. Add "types":"material-ui", within "compilerOptions": {}
as in
"compilerOptions": {"types":"material-ui"}
I am playing around on an app with canjs 2.1.0 and stealjs 0.3.0:
I have stealconfig.js like below:
System.config({
map: {
"can/util/util": "can/util/jquery/jquery",
"jquery/jquery": "jquery"
},
paths: {
"jquery": "bower_components/jquery/dist/jquery.js",
"can/*": "bower_components/canjs/*.js",
"lodash": "bower_components/lodash/dist/lodash.js",
"bootstrap" : "bower_components/bootstrap/dist/js/bootstrap.js",
"bootstrap.css" : "bower_components/bootstrap/dist/css/bootstrap.csscss"
},
meta: {
jquery: {
exports: "jQuery",
deps: supportsUnknownElements ? undefined : ["can/lib/html5shiv.js"]
}
},
ext: {
mustache: "can/view/mustache/system"
}
});
And my main.js is:
import can from 'can/';
import $ from 'jquery';
import _ from 'lodash';
import LayoutController from 'apps/layout/layout';
can.route.ready();
new LayoutController(document.body, {});
layout .js loos like:
(function() {
'use strict';
var can = require('can/'),
layoutView = require('./view/layout.mustache!');
})();
But, I get these errors.
GET http://localhost:8080/bower_components/canjs/can.js 404 (Not Found)
GET http://localhost:8080/bower_components/canjs/view/mustache/system.js 404 (Not Found)
How can I solve this issue?
To use CanJS with the new Steal you need to be using the minor branch of CanJS. There hasn't been a tag release yet that supports the new version of Steal.
You can do this easily with bower, just like this (in your dependencies):
"canjs": "bitovi/canjs#minor"
Other comments:
1) When you're using CommonJS (as you are in layout.js) you don't need to wrap it in an self-calling function. That will be done by Steal.
2) The error suggests it cannot find the file. Are you certain you have ran "bower install" to install CanJS? Your configuration looks fine.