CODEWITHSUNDEEP
reactjsecmascript-6vue.js
L.chaoxue
L.chaoxue

Reputation: 71

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

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

Upvotes: 7

Views: 18871

Answers (3)

watchingfun
watchingfun

Reputation: 11

In vscode,You need to set this typescript.disableAutomaticTypeAcquisition

Many popular libraries ship with typings files so you get IntelliSense for them automatically. For libraries that do not include typings, VS Code's Automatic Type Acquisition will automatically install community maintained typings file for you.

or import {Scene, PerspectiveCamera, WebGLRenderer, ...other} from 'three'

Upvotes: 0

Tomer
Tomer

Reputation: 17930

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

Upvotes: 1

Belmin Bedak
Belmin Bedak

Reputation: 9201

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';

Upvotes: 9

Related Questions