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
Related
I have updated my project to cypress 10. But getting this error couldn't solve the problem described in the title.
my feature file:
spec file:
Error:
File order:
Config file:
package.json file:
It's probably a mistake to use both cypress-cucumber-preprocessor and #badeball/cypress-cucumber-preprocessor in the same project.
Uninstall cypress-cucumber-preprocessor, it is a defunct version.
Then follow badeball Example setup to make corrections to the configuration, for example
import { defineConfig } from "cypress";
import createBundler from "#bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "#badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "#badeball/cypress-cucumber-preprocessor/esbuild";
export default defineConfig({
e2e: {
specPattern: "**/*.feature",
async setupNodeEvents(
on: Cypress.PluginEvents,
config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
// Make sure to return the config object as it might have been modified by the plugin.
return config;
},
},
});
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);
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'm using storybook in a lerna/yarn workspaces monorepo. I noticed today that storybook is trying to load stories from packages/**/node_modules/#scope/foo/stories/foo.stories.js I've tried logging out the require.context keys in config.js but its not logged to console. Is there a ready way to tell storybook not to load symlinked local node_modules? Is it likely I've misconfigured storybook? Here's my config:
import '#storybook/addon-console';
import { withA11y } from '#storybook/addon-a11y';
import { addDecorator, addParameters, configure } from '#storybook/polymer';
import theme from './my-theme'
const req = require.context('../packages', true, /\.stories\.js$/);
const load = filename => req(filename);
addParameters({ options: {
panelPosition: 'right',
theme,
} })
addDecorator(withA11y)
configure(function loadStories() {
req.keys()
.filter(filename => !filename.match(/packages\/.*\/node_modules/))
.forEach(load);
}, module);
example error:
ERROR in ./packages/input/node_modules/#scope/collapse/stories/collapse.stories.js
Module not found: Error: Can't resolve '../../button/src/my-button' in '/Users/bennyp/Documents/web-components/packages/input/node_modules/#scope/collapse/stories'
This causes the storybook build to break.
How do I tell storybook not to load stories from internal node_modules?
The following regex solved the problem
const req = require.context('../packages', true,
/^((?![\\/]node_modules[\\/]).)*\.stories\.js$/
);
I am trying to implement D3 in an app I am building with Nuxt. I have successfully imported it into a view in the <script> section with import * as d3 from 'd3' however because the app is being rendered server-side D3's functionality doesn't work (i.e. d3.select(...)) due to the lack of browser. In the Nuxt plugin documentation it suggests a pattern for client-only external plugins:
module.exports = {
plugins: [
{ src: '~plugins/vue-notifications', ssr: false }
]
}
I attempted to implement the pattern in the nuxt.config.js of my project:
module.exports = {
head: {
title: 'My Demo App',
meta: [...],
link: [...]
},
loading: {...},
plugins: [
{ src: '~node_modules/d3/build/d3.js', ssr: false}
]
}
However D3 throws a ReferenceError while looking for document and Nuxt throws a SyntaxError in the console pointing to something in the plugins field of nuxt.config.js.
For reference, demo.vue:
<template>
<div class="demo-container"></div>
</template>
<script>
import * as d3 from 'd3';
d3.select('.demo-container');
</script>
Would someone be able to point to what I'm doing wrong?
For anyone coming to this page looking for a solution,
these suggestions from piyushchauhan2011 here on GitHub sent me in the right direction.
All I needed to do:
import d3 in my single-file component, and then
do any DOM manipulation with d3 only within mounted()
Before all this, I had to of course add d3 to my project with yarn add d3 (or npm install d3).
[Edit: removed link that no longer works. It wasn't that relevant anyway.]
I was getting an error:
Must use import to load ES Module: .../node_modules/d3/src/index.js require() of ES modules is not supported. require() of .../node_modules/d3/src/index.js from .../node_modules/vue-server-renderer/build.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/d3/package.json.
I solved it by reading this: https://github.com/nuxt/nuxt.js/issues/9223
which indicates you can add this to your nuxt.config.js file:
build: {
standalone: true,
}
This allowed the d3 import to work.
import * as d3 from "d3";
Here's a simple step-by-step tutorial:
Create a new NuxtJS project (Skip this step if you have an existing project)
npm init nuxt-app nuxtjs-d3js-example
Install D3JS
npm install d3
npm install #types/d3 --save-dev
Import D3JS and add a target
HTML:
<p id="d3-target"></p>
JavaScript:
import * as d3 from 'd3'
export default {
name: 'NuxtTutorial',
mounted: function() {
d3.select("#d3-target").text("This text is manipulated by d3.js")
},
}
Fix ES Module error (mentioned by #agm1984)
Error:
require() of ES Module /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/d3/src/index.js from /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of index.js in /home/johnson/projects/nuxtjs-d3js-example/nuxtjs-d3js-example/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.
nuxt.config.js:
build: {
standalone: true,
}
A minimal project example can be found at: https://github.com/j3soon/nuxtjs-d3js-example, with each step detailed in the Git commit history.