Nuxt.js latest version throws the following error while building or deploying the project that has Vuetify.
remote: > import installComponents from "!../node_modules/vuetify-loader/lib/runtime/installComponents.js"
Module parse failed: Identifier 'installComponents' has already been declared (53:7)
You may need an appropriate loader to handle this file type.
|
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VBtn } from 'vuetify/lib'
| import { VCard } from 'vuetify/lib'
It's hard to tell without a nuxt.config.js. But I had a problem like that. Earlier, I used a plugin to connect Vuetify. Then I installed the #nuxtjs/vuetify module, and the problem came up.
The problem is most likely related to treeShaking. #nuxtjs/vuetify turns on treeShaking only when the build happens. So you don't have a problem in dev mode, but there are problems with the build.
In my case the reason was that I forgot to remove VuetifyLoaderPlugin from the build section in nuxt.config.js.
transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],
Also I recommend enable treeShaking for the dev mode too. This will allow to use SASS variables in dev-mode. From #nuxtjs/vuetify version 2 it will always be enabled.
vuetify: {
customVariables: ['~/assets/variables.scss'], // need treeShake
treeShake: true,
},
Please remove buildModules inside nuxt.config.js, this is for those who are using Nuxt.js
{
buildModules: [
// Simple usage
'#nuxtjs/vuetify',
// With options
['#nuxtjs/vuetify', { /* module options */ }]
]
}
Add modules this one is for latest version
modules: [
'#nuxtjs/vuetify',
],
vuetify: {
//what ever options you may like
},
Related
I'm beginning with Svelte and I would like to (more or less) reproduce Mapbox store locator tutorial with Svelte & rollup. (Starting from svelte REPL starter kit).
Everything's fine for loading a map and some markers, but as soon as I try to import this package https://github.com/mapbox/mapbox-gl-geocoder, nothing works anymore and I'm not familiar enough with Svelte to figure out how to setup rollup and fix it.
<script>
import { onMount, setContext } from 'svelte'
import mapbox from 'mapbox-gl/dist/mapbox-gl.js';
import MapboxGeocoder from '#mapbox/mapbox-gl-geocoder'; // <<--- Problem here
mapbox.accessToken = 'xxx';
let map;
let geocoder;
onMount(() => {
map = new mapbox.Map({,,,});
geocoder = new MapboxGeocoder({,,,});
});
</script>
terminal :
bundles src/main.js → public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'events'. You might need to include https://github.com/ionic-team/rollup-plugin-node-polyfills
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
events (imported by node_modules/#mapbox/mapbox-gl-geocoder/lib/index.js, events?commonjs-external)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
events (guessing 'events$1')
created public/build/bundle.js in 2s
browser console :
Uncaught ReferenceError: events$1 is not defined
at main.js:5
Then, I tried to add to my rollup config resolve and polyfills plugins, but have other errors.
rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import preprocess from 'svelte-preprocess';
import nodeResolve from '#rollup/plugin-node-resolve';
import nodePolyfills from 'rollup-plugin-node-polyfills';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
nodeResolve(),
nodePolyfills(),
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('bundle.css');
},
preprocess: preprocess()
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}
Gives me this
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/base-64/base64.js
163: }
164:
165: }(this));
^
to conclude: I'm a bit lost :D
thanks in advance
I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui
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.
I'm trying to get Vue.js 2.0 typings working with TypeScript in Visual Studio. Previously, I had used these typings from DefinitelyTyped, but they are for Vue.js 1.0 and thus don't match up. However, they did work just fine and let me work with the Vue type.
I've since transitioned to using the typing files that come with Vue.js releases (here). I have included them in my project in my ~/Scripts/typings/vue folder, but my project does not understand them.
I've gathered that these typing files are meant to be used via import/export possibly? There are no other typing files I am using that work this way, so I am not sure how to correctly implement the typings such that they are available globally to my project.
I have a sample solution that shows an example of what I've tried - download here from my github repo.
Here's the structure of my Scripts folder:
_references.d.ts contents
/// <reference path="typings/vue/index.d.ts" />
vue_test.ts contents
namespace Test
{
export class MyClass
{
public initialize()
{
var component = this.getComponent();
}
private getComponent(): Vue.Component
{
return Vue.component("test", {
template: "<div></div>",
props: ["test"],
methods: {
onClick: () =>
{
}
}
});
}
}
}
What I would expect is that I would have access to the Vue.Component namespace and other namespaces that are declared in typings/vue/index.d.ts, but this does not seem to be the case.
I did attempt to import the exported class into global, like this:
import * as _Vue from "./index";
declare global
{
export class Vue extends _Vue
{
}
}
However, this only allows me to access the root Vue class, and thus I cannot do things like specify Vue.Component as a type, or any other namespace beyond Vue.
Other information:
Visual Studio 2015
Vue.js version 2.2.1
TypeScript version 2.1
UPDATE after suggestions from #unional
Here is my new folder structure:
No more _references.d.ts, using tsconfig.json instead. The tsconfig.json file contains this:
{
"compilerOptions": {
"sourceMap": true
},
"include": [
"../../**/*.ts"
]
}
The above imports all .ts files in the project. The ~/Scripts/typings/custom-typings/vue.d.ts file contains the following:
export * from "vue"
export as namespace Vue
Visual Studio tells me Cannot find module 'vue', so my typings are still not functional, although the tsconfig.json file works (I added the jQuery typing to verify that).
Here is a link to the updated solution showing the new problems: [link]
With NPM
Drop down to the command line in your app's root directory to use NPM and the TypeScript command line interface.
If you do not already have a package.json file, then first run npm init.
Then to install vue.js, run npm install --save vue.
To install its types run npm install --save-dev #types/vue.
If you also lack a tsconfig.json file, then run tsc --init.
At that point, you will be able to build by running tsc.
Without NPM
Not using NPM is unconventional and will require a lot of manual work. Here is one of those manual approaches.
Download VueJS 2.1.1 from the GitHub repo. After extracting the archive,
Put the contents of dist into Scripts/vuejs directory,
Put the contents of typings into typings/vuejs directory,
Add a tsconfig.json file to your project's root that his this content.
tsconfig.json
{
"compilerOptions": {
// ....... other properties omitted
"typeRoots": [
"./typings/"
],
"target": "es5",
"lib": ["es2015", "dom", "es2015.promise" ]
}
}
Then, at the top of the file that will be using Vue, add a relative import statement.
import * as Vue from "../typings/vuejs";
interface MyComponent extends Vue {
message: string
onClick (): void
}
export default {
template: '<button #click="onClick">Click!</button>',
data: function () {
return {
message: 'Hello!'
}
},
methods: {
onClick: function () {
window.alert(this.message)
}
}
}
Example
Here is an updated version of your WebApplication1 example.
https://github.com/bigfont/StackOverflow/tree/master/TypeScriptVueJsTypes
See also:
https://v2.vuejs.org/v2/guide/typescript.html
https://github.com/vuejs/vue
I was able to use information from #unional's comment, but with a slight change:
I added this to my custom-vue.d.ts file:
import * as _Vue from 'vue';
export as namespace Vue;
export = _Vue;
Additionally, I had to create a package.json file with the following:
{
"dependencies": {
"vue": "^2.2.1"
}
}
Finally, I needed to add a node_modules folder at the same scope as my tsconfig.json file. It has the following:
+-- node_modules
| +-- vue
| | +-- package.json
| | +-- types
| | | +-- index.d.ts
| | | +-- options.d.ts
| | | +-- plugin.d.ts
| | | +-- vnode.d.ts
| | | +-- vue.d.ts
package.json simple contains:
{
"typings": "types/index.d.ts"
}
And things are now WORKING
Edit
Alternatively, I discovered I could avoid the whole node_modules thing by setting tsconfig.json's property for moduleResolution to Classic. After doing that, I changed my custom-vue.d.ts import to look like this:
import * as _Vue from "../vue/index";
Since the error is at compile time, No big problem in it. you can use this plugin to for faster development from here
Also, the code should be as
import Vue from 'vue'
import Component from 'vue-class-component'
// The #Component decorator indicates the class is a Vue component
#Component({
template: ''
})
export default class MyComponent extends Vue {
}
and so on. You can still use the vuejs inside your cshtml files.