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?
source to share
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
source to share