export 'default' (imported as 'Three') was not found in 'three'

Question

Overview In main.js, add

import Three from 'three'

Vue.use(Three)

Start dev server with npm run dev. Expected behavior The Vue project should load without errors. Actual behavior The dev server gives this warning:

warning  in ./src/main.js
    7:8-14 "export 'default' (imported as 'Three') was not found in 'three'

And the browser's js console displays the error:

Uncaught TypeError: Cannot read property 'installed' of undefined
at Function.Vue.use (eval at <anonymous> (app.js:723), <anonymous>:3443:15)
at eval (eval at <anonymous> (app.js:778), <anonymous>:14:45)
at Object.<anonymous> (app.js:778)
at __webpack_require__ (app.js:660)
at fn (app.js:84)
at Object.<anonymous> (app.js:964)
at __webpack_require__ (app.js:660)
at app.js:709
at app.js:712

Answer 1

It's happening because there are no default export made in the ThreeJS library, so you can import everything like this:

import * as Three from 'three';

Also you don't need the Vue.use since this is not VueJS Plugin.

Since there are no default export, you are able to import specific part from ThreeJS, like this:

import { Scene } from 'three';

Answer 2

You can't use Three.js directly, you need a Vue wrapper around it, you can find one here

If you do want to use it directly, you have several options:

1. Import it in every file and use it:

   import Three from 'three'
   Three.doSomething
   

2. Import it in the main file and put it on the window object:

   window.Three = require('Three');
   

3. Add it to the Vue instance (preferred way):

    import Three from 'three';
    Object.definePrototype(Vue.prototype, '$three', { value: Three});
   

and then you can refer to it like this: this.$three