Vuetify: You may need an appropriate loader to handle this file type.

[NadhirBoukhenifra]

 ERROR  Failed to compile with 1 errors                                                                                                                                                  20:06:38
 error  in ./node_modules/vuetify/src/mixins/route-link.js

Module parse failed: E:\www\project\node_modules\vuetify\src\mixins\route-link.js Unexpected token (36:10)

You may need an appropriate loader to handle this file type.
|         }],
|         on: {
|           ...(this.$listeners || {}),
|           click: this.click
|         }

 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}],["es2015",{"modules":false}],["stage-2"]],"plugins":[
["transform-imports",{"vuetify":{"transform":"vuetify/src/components/${member}","preventFullImport":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vuetify
/src/components/VBtn/VBtn.vue 5:0-56
 @ ./node_modules/vuetify/src/components/VBtn/VBtn.vue
 @ ./node_modules/vuetify/src/components/VBtn/index.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/stylus/app.styl

Steps to reproduce

1. Install Fresh Laravel copy
2. install vuetify

3. try to add A La Carte (compnents) Method ...

4. Works fine if i use only the app and the vuetify like this:

window.Vue = require('vue');

import { Vuetify, VApp } from 'vuetify'

Vue.use(Vuetify, {
 components: {
    VApp    
 }
})

1. if i add some components like Grid i get two errors and its all about three dots ...
   ...(this.$listeners || {}),

Versions

What is expected ?

What is actually happening ?

i think i need a loader to handle the three 3 dots (...) files !!!!

Reproduction Link

[johnleider]

I am fixing the templates and updating documentation on a few points I missed.

[johnleider]

Are you using a Vuetify template or your own?

[johnleider]

This bug has to do with node_modules/vuetify not being transpiled by webpack. Normally, all of node_modules is ignored, but in the guide for a-la-carte, it explains how to resolve those directories so they can be transpiled. I have also updated the webpack/webpack-advanced template to support this out of the box.

I'm adding some additional details for the guide currently in the documentation, but your issue might not have anything to do with my particular fix.

If you have any additional questions, please direct them to the official Discord server.

[ugommirikwe]

Vuetify looks awesome, but after several hours of grappling with setting it up and encountering several issues, including this one, it kinda fails. It's too fiddly to even recreate the examples in the documentation! :-)

One tries to use frameworks such as this, expecting the same ease of getting things working with minimal configuration/fiddling as the VueJS lib itself, but is eventually let down.

But, thumbs up for the amount of work put into this though.

[johnleider]

All of the examples are exportable to codepen. Does this not work for you? Open source can't get better without help and contribution. This is a completely free product and if you don't give us an opportunity to fix things, then I don't know what to say honestly.

[ugommirikwe]

After installation and importing the dependencies in the right places (the main.js), added <v-navigation-drawer> in a Vue component template and webpack compilation starts screaming can't resolve ~mixins/... I've tried every part of tweaking the vue-loader webpack config, yet no joy. Modified .babelrc file, installed the babel packages for tree-shaking (this part of your documentation seemed non-ending), yet absolutely no joy :-)

That is after giving up trying to get the Icons to render sometime last week. (Check out the minimal configuration implementation of Awesome-Vue, which eventually came to my rescue.)

Please don't take these comments the wrong way -- I totally appreciate your effort on this project and that's why I thought to leave the comments in the first place. But, with my several years of experience developing on various platforms and non-trivial experience working with VueJS, WebPack and related tools, not being able to get Vuetify working after so much effort, I had to leave these comments.

[johnleider]

Did you use a Vuetify template? You say you tried to add components and it didn't work, but all Vuetify templates come pre-configured and have components already in the template. So that would mean that if I loaded a template, it wouldn't work at all.

If you are referring to the a-la-carte functionality, yes, there are some bugs, it's why we had a 2 week beta, and there are still bugs, because not everything was caught.

There is an active community always available for help, as from your comments, it seems like something very simple/small is missing. It is not this difficult to get an application running with Vuetify.

https://chat.vuetifyjs.com

[ugommirikwe]

I didn't use a Vuetify template. It's an existing project set up with the Vue webpack CLI template (with HMR). You aren't suggesting I re/start a new project so I can use a Vuetify template and have these stuffs working? Perhaps I missed the part of your documentation that suggests this, but that won't be a realistic expectation now, is it? :-)

[johnleider]

If you were unable to get Vuetify working in an existing project from the provided documentation, then that is an issue to me and it needs to be fixed. I'd be interested in talking with you in chat if you have time.

[dfk7677]

I get the same kind of error when importing the createSimpleTransitionfunction into a Laravel project.

You may need an appropriate loader to handle this file type.
```context.data.on = context.data.on || {}
if (!Object.isExtensible(context.data.on)) {
context.data.on = { ...context.data.on }
}

> Module parse failed: path/to/helpers.js Unexpected token (34:28)

I just used the following lines from the documentation in app.js file:

import { createSimpleTransition } from 'path/to/node_modules/vuetify/src/util/helpers'
const myTransition = createSimpleTransition('my-transition')
Vue.component('my-transition', myTransition
```

[KaelWD]

@dfk7677 Since version 0.16 you can import from es5 instead of src and you won't need any additional babel configuration.

[dfk7677]

@KaelWD
Since I am not familiar with how that can be done, should I open an issue in the documentation repository?

[KaelWD]

Instead of

import { createSimpleTransition } from 'vuetify/src/util/helpers'

do

import { createSimpleTransition } from 'vuetify/es5/util/helpers'

[ekeyte]

@KaelWD where do you add this? In the component itself?

[KaelWD]

Are you a time traveller?

I don't understand your question, you import it where you want it.

Join discord if you have anything else.

[ekeyte]

@KaelWD We just moved back an hour for Daylight Savings Time. It's a silly routine we do twice a year!

I understand your answer. I had my eslint settings to throw an error on unused vars, so when I brought that package in, it started complaining, which is what prompted me to ask if it mattered where I imported it. :)

But I ended up solving it. Thank you sir!

[schlensen]

@ugommirikwe & @johnleider

I know it's several months ago. I just had the same problem, existing project, tried to setup vuetify and ran in the same issue as @ugommirikwe fiddling around several hours, trying the a-la-carte approach, removed lazy loading in webpack, altered the webpack-config etc..

The mixins were not found and could not be resolved, in my specific case "ssr-bootable.js".

Error: Unable to find required dependency ssr-bootable
    at module.exports (build.js:26363)  
    at Object.exports.getFactory (build.js:51374)     
    at resolveDependency (build.js:20340)
    at Object.exports.resolve (build.js:20280)
    at Function.resolve (build.js:51484)
    at build.js:51925
    at Array.forEach (<anonymous>)
    at build.js:51922
    at Array.forEach (<anonymous>)
    at resolveToTarget (build.js:51914)

I digged into the code above - the error wasn't produced by one of the vuetify-components but from the module vue-inject.
I removed the following lines from my index.js

import VueInjector from 'vue-inject';
...
Vue.use(VueInjector);

and the error disappeared. I couldn't really figure out what the problem is - for now it's fine, I don't use vue-inject at this time but for more compatibility perhaps you could try to figure out where the issue lies.

In detail the important parts of the vue-inject module are:
src/install.js

function resolveToTarget(dependencies, target, named) {
    if (!dependencies){
      return;
    }

    [].concat(dependencies)
      .forEach(function (dependency) {
        switch ($typeof(dependency)){
        case 'string': // resolve dependency and attach to the same-named property
          setProperty(target, dependency, self.$resolve(dependency, named));
          break;
        case 'object': // resolve each property and use the key as the property name
          // Aliases
          Object.keys(dependency)
            .forEach(function (key) {
              var value = dependency[key];
              if ($typeof(value) === 'string'){
                setProperty(target, key, self.$resolve(value, named));
              }
            });
          break;
        }
      });
  }

The call of self.$resolve(value, named) produces the error in depth.

Best regards

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord