CODEWITHSUNDEEP
javascriptimportthree.jsvantajs
Mustafa
Mustafa

Reputation: 336

Javascript importing issuse, can't import vanta.js

I had downloaded two javascript libraries throw this command

$ npm install --save vanta three

vanta.js and three.js , vanta has cool animation that makes your website look nice. I follow some tutorial and I wrote every line same as in the tutorial two of these lines are

import * as THREE from "three";
import BIRDS from "vanta/dist/vanta.birds.min";

this gives me an error:

Uncaught TypeError: Error resolving module specifier "name of the module" Relative module specifiers must start with “./”, “../” or “/”.

I was surprised how they wrote code that is not working so I google it , solution is to write the whole path like:

 import * as THREE from "./node_modules/three/build/three.js";
 import BIRDS from "./node_modules/vanta/dist/vanta.birds.min.js";

The THREE.js error is gone but the pain comes with vanta.js error:

Uncaught SyntaxError: ambiguous indirect export: default

I look on the internet for this I didn't find anything that helps me with this problem and I don't know why this happen, I follow every step in these tutorials but it work for them not me :_(

import * as THREE from "./node_modules/three/build/three.js";
import BIRDS from "./node_modules/vanta/dist/vanta.birds.min.js";

const root = document.getElementById("root");

BIRDS({
  el: root,
  THREE,
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css.css" />
    <title>VANTA</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="js.js"></script>
  </body>
</html>

Upvotes: 4

Views: 2989

Answers (0)

Related Questions