Comments (21)
If you're using
vue-cli-plugin-vuetify
you don't need to modify the webpack config manually. That error means the loader is being run twice.
Thanks, this helped. It might be worth adding it to the documentation at https://vuetifyjs.com/en/guides/a-la-carte.
from vuetify-loader.
If you're using vue-cli-plugin-vuetify
you don't need to modify the webpack config manually. That error means the loader is being run twice.
from vuetify-loader.
Still lib, vue-cli-plugin-vuetify just adds new VuetifyLoaderPlugin()
if you have vuetify-loader installed.
from vuetify-loader.
from vuetify-loader.
Should be
chainWebpack: config => {
config
.plugin('vuetify-loader')
.tap(args => {
})
}
from vuetify-loader.
@johnleider it seems the args are an empty array and it gives me an error.
module.exports = {
chainWebpack: config => {
config
.plugin('vuetify-loader')
.tap(args => {
console.log(args); // []
return args
})
}
}
produces:
➜ league-admin git:(master) ✗ yarn serve
yarn run v1.10.1
$ vue-cli-service serve
INFO Starting development server...
[]
ERROR TypeError: Cannot read property '__expression' of undefined
TypeError: Cannot read property '__expression' of undefined
at Object.toConfig (/home/amritk/apps/league-admin/node_modules/webpack-chain/src/Plugin.js:55:38)
at clean.Object.assign.plugins.plugins.values.map.plugin (/home/amritk/apps/league-admin/node_modules/webpack-chain/src/Config.js:129:61)
at Array.map (<anonymous>)
at module.exports.toConfig (/home/amritk/apps/league-admin/node_modules/webpack-chain/src/Config.js:129:40)
at Service.resolveWebpackConfig (/home/amritk/apps/league-admin/node_modules/@vue/cli-service/lib/Service.js:218:34)
at PluginAPI.resolveWebpackConfig (/home/amritk/apps/league-admin/node_modules/@vue/cli-service/lib/PluginAPI.js:115:25)
at serve (/home/amritk/apps/league-admin/node_modules/@vue/cli-service/lib/commands/serve.js:47:31)
at Service.run (/home/amritk/apps/league-admin/node_modules/@vue/cli-service/lib/Service.js:203:12)
at Object.<anonymous> (/home/amritk/apps/league-admin/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
from vuetify-loader.
@KaelWD how do you then set the options for it? Like a custom match function?
from vuetify-loader.
I tried something like this, but options is undefined:
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vuetify-loader')
.loader('vuetify-loader')
.tap(options => {
console.log(options); // undefined
return options
})
}
}
from vuetify-loader.
Here is the relevant documentation: https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
We do not define any args so the empty array seems correct: https://github.com/vuetifyjs/vue-cli-plugin-vuetify/blob/dev/index.js#L18
from vuetify-loader.
This is still blowing up with that same error:
module.exports = {
chainWebpack: config => {
config
.plugin('vuetify-loader')
.tap(args => {
return [{
match (originalTag, { kebabTag, camelTag, path, component }) {
if (components.indexOf(kebabTag) > -1) {
return [camelTag, `import ${camelTag} from '@/components/${kebabTag}.vue'`]
}
}
}]
})
}
}
I will play around with it some more tomorrow in case I am missing something.
from vuetify-loader.
@johnleider I think we need to use chainWebpack instead of configureWebpack, so it can have an identfier.
from vuetify-loader.
still was unable to get this working, it seems it keeps trying to call __expression' of undefined
from vuetify-loader.
I'm going to update this tonight and ensure it is easily extensible. Thank you for your patience.
from vuetify-loader.
Looks like it works correctly with this pull request vuetifyjs/vue-cli-plugins#51 and the following code:
module.exports = {
chainWebpack: config => {
config
.plugin('VuetifyLoaderPlugin')
.tap(args => {
return [{
match (originalTag, { kebabTag, camelTag, path, component }) {
if (components.indexOf(kebabTag) > -1) {
return [camelTag, `import ${camelTag} from '@/components/${kebabTag}.vue'`]
}
}
}]
})
}
}
The plugin needs to be called by VuetifyLoaderPlugin
from vuetify-loader.
Yeah I still need to add config to the plugin.
John released it right after I updated the loader.
from vuetify-loader.
A follow up to this: When using vue-cli-plugin-vuetify
do we still use import Vuetify from 'vuetify'
or import Vuetify from 'vuetify/lib'
? I'm trying to understand if vue-cli-plugin-vuetify
supersedes everything in the configuration on that page.
from vuetify-loader.
Still lib, vue-cli-plugin-vuetify just adds
new VuetifyLoaderPlugin()
if you have vuetify-loader installed.
Thanks - much appreciated.
from vuetify-loader.
I have rather odd situation regarding vuetify and vuetify loader plugin.
I posted problem on stackoverflow and Vue forum but without any luck so far. I've created simple SPA with implemented Vue and Vuetify and while in dev mode everything works fine I'm having problem in production mode. I'm getting rather strange error regarding my components
Uncaught TypeError: T(...)(...) is not a function
at Module.56d7 (VectorFeatures.vue:37)
at r (bootstrap:78)
at Object.0 (bootstrap:151)
at r (bootstrap:78)
at i (bootstrap:45)
at bootstrap:151
at bootstrap:151
Further inspecting error I'm getting this :
My vue.config.js is this:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/hr-map/'
: '/vue-map/',
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// modify the options...
return options
})
}
}
And my router is this:
import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard.vue'
import Croatia from '@/views/CroatiaMap.vue'
import Poland from '@/views/PolandMap.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
{
path: '/croatia',
name: 'croatia',
component: Croatia,
meta: { keepAlive: true }
},
{
path: '/poland',
name: 'poland',
component: Poland,
meta: { keepAlive: true }
}
]
})
Also worth mentioning is when I comment out lets say poland or croatia everything works fine on production
from vuetify-loader.
Looks like it works correctly with this pull request vuetifyjs/vue-cli-plugin-vuetify#51 and the following code:
So this was awesome and worked for me. But any idea how to incorporate this in my Jest specs? E.g.
config
.plugin('VuetifyLoaderPlugin')
.tap(args => [{
match(originalTag, {
kebabTag, camelTag, path, component,
}) {
if (!camelTag.startsWith('Strata')) { return []; }
return [camelTag, `import ${camelTag} from '@/components/${camelTag}.vue'`];
},
}]);
from vuetify-loader.
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
},
from vuetify-loader.
Thank you @Ruchirr, it works, don't forget remove theses lines if you was trying another solutions...
build: {
parallel: true,
plugins: [
new VuetifyLoaderPlugin(), // remove this
],
transpile: [/^vuetify/] // remove this
}
from vuetify-loader.
Related Issues (20)
- Missing npm link HOT 1
- BUG - Application Load Stuck - Sourcemap HOT 1
- Usage with unplugin-vue-components, other components became Unknown HOT 5
- [Bug Report][3.3.3] The page became unresponsive when I added 'styles.configFile' to the plugin options HOT 2
- Labs component not imprted automatically when autoImport is true HOT 2
- WARN Sourcemap for "plugin-vuetify: components/VAlert/VAlert.sass" points to missing source files, in treeShaking mode HOT 1
- Update transformAssetUrls HOT 2
- webpack-plugin-vuetify / vuetify 3.4.0-beta.0 compatibility HOT 1
- Support Vite 5.0 HOT 18
- vite-plugin-vuetify 1.0.2 deprecated in Vite 5.0 & removed in v6 HOT 2
- Need an ESM build
- vite-plugin Node 20 [DEP0170] DeprecationWarning HOT 6
- version 2 does not work with vite 5 HOT 7
- ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time HOT 5
- Webpack Compiling Problems on 3.0.0 and 3.0.1 HOT 11
- Vite 5 Import assertions are not a stable feature of the JavaScript language. HOT 4
- Vuetify plugin must be loaded after the vue plugin HOT 1
- what is happening with vite-plugin-vuetify and the latest version of vuetify? HOT 4
- Vuetify 2 loader for vite
- Missing component type definition HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetify-loader.