Does anyone know the best way of importing libraries

i have no idea how the shell works. for most tutorials i watch or read it always able to run somthing like

npm install three.js

and then in the main.js or script.js fill they write

import * as THREE from 'three';

But when i do the exact same thing i always end up with the same error

TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

Does any one know how i properly do this in replit, i asume this is somthing to do with replit because the tutorials always do it in more advanced text editers like VS Code

1 Like

Have you tried ./node_modules/three?
You can also try this:

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
    }
  }
</script>
1 Like

im convinced there is no point to the shell in replit. its sole purpose is just to ad another annoyance into your life that you just close right away on start up.

btw i did try ./node_modules/three, didn’t work, idk if i did somthing wrong
https://replit.com/@OwenStritz/232123?v=1

Here try this:

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
    }
  }
</script>
	</head>
	<body>
		<script src="/main.js"></script>
	</body>
</html>

I also noticed you imported main.js as a module.

The Shell isn’t intended for use with front-end Repls like HTML, CSS and JS.

3 Likes

honestly i dont need three.js i need cannon.js i have a replit that used import map. alothough the import map doesn’t work on cannon.js. or atleast i couldnt get it to

What did the shell ever do to you ;-;

Then you use whatever works best for you.

3 Likes

I think you’re trying to import a backend module from the frontend. In the frontend, you can’t directly import packages from the backend like import * as THREE from 'three'. In frontend, you have to specify a specific file to import. You also (normally) can’t access the node-modules folder. In the frontend, imports are like this:

import * as my-js-file from './my-js-package-file';

With the HTML:

<script src="./script.js" type="module">

If you don’t want to import directly from the JS and set type to module, you can use another <script> tag or a CDN.
Like this example with SweetAlert:

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

So you can only import like this in the backend:

import * as THREE from 'three' //only allowed in backend
//or you can use require
2 Likes

The shell is actually very useful, and as @youngchief said:

3 Likes