PhantomJS throws error in vue

I am using webpack template to build vuejs app. The problem is when I try to run unit tests (just the default for now ...) PhantomJS throws this error:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  TypeError: undefined is not a constructor (evaluating 'val.toLowerCase()')
  at webpack:///~/vue/dist/vue.esm.js:89:0 <- index.js:13783

      

The error is in the Vue library, so there must be something wrong in the application code. A little context: I am building a vue component showcase, so I set up webpack to skip a lot of files / folders in the build because they are just a demo of the components, while I only want the core components in my product to build.

So the structure folder looks like this:

src
|----components
|----main.js
|----assets.js
|----App.vue
|----core
     |----coreComponents
     |----mainProdBuilder.js
     |----coreAssets.js

      

If I import the entire component, and if I link everything with "main.js" as the entry point, I can run the tests without any problem, but as soon as I try to use the mainProdBuilder script to link the production file I get an error. Here's the script:

import Vue from "vue";

import MyTable from "./Table/Table";
import FormatNumber from "./numberFormatting";
import TotalValue from "./TotalValue";
import MyTitle from "./Title/Title";
import TestTitle from "./Title/TestTitle";
import BarChart from "./Charts/BarChart";
import Histogram from "./Charts/Histogram";

Vue.component(MyTable,
    MyTitle,
    TestTitle,
    BarChart,
    TotalValue,
    Histogram,
 );

      

Note that if I comment out all the vue components, leaving only one component at a time, it works. This is how it works, for example:

import Vue from "vue";

import MyTable from "./Table/Table";

Vue.component(
    MyTable,
 );

      

And also this works:

import Vue from "vue";

import Histogram from "./Charts/Histogram";

Vue.component(
    Histogram,
 );

      

But this throws an error:

import Vue from "vue";

import MyTable from "./Table/Table";
import Histogram from "./Charts/Histogram";

Vue.component(
    MyTable,
    Histogram
 );    

      

What am I missing?

+3


source to share


1 answer


Vue.component()

takes id

(i.e. component name) and object definition

, you cannot register all your global components together (although you can do this for local components), you need to register them separately:

import MyTable from "./Table/Table";
import FormatNumber from "./numberFormatting";
//etc...    

Vue.component('my-table', MyTable);
Vue.component('format-number', FormatNumber);
//etc...

      



If you try to log them using one Vue.component

you will get the error you received which you can see in this JSFiddle

+1


source







All Articles