1

I've been struggling with this problem for days. The problem is that import works badly and I don't know why. Here are some examples:

I have an index.html, completely empty, I only have the script. Like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="/src/index.js"></script>
</body>
</html>

Inside src folder I have index.js and app.js. In app.js the code is:

const helloWorld = () => {
  console.log('Hello world');
};

export default helloWorld;

In index.js the code is:

import helloWorld from 'app.js';
helloWorld()

I use the VSC Live Server extension to mount the server, the Chrome console said:

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

I said: "Ok", and I try this in index.js:

import helloWorld from './app';
helloWorld()

Chrome console said:

GET http://127.0.0.1:5500/src/app net::ERR_ABORTED 404 (Not Found)

This problem also happens to me with all npm packages that are in node_modules. Examples:

import bootstrap from 'bootstrap';
import axios from 'axios';

Chrome console:

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

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

VSC recognizes the axios and the bootstrap routes but when trying in the browser something breaks. Examples:

axios route

I also tried using another local server, but it didn't work either. I tried the one explained in this link:

How to open browser to localhost through npm scripts

Something else to add is that it says the error is on line 1 of the index.html:

chrome console error

Francisco Beccaria
  • 55
  • 1
  • 5

1 Answers1

0
  1. regarding the import of app.js inside index.js - you just need to write:

import helloWorld from './app.js';

and it's working!

  1. As for node modules, this is more complicated. Usually on project set-up (take an automatic one such as create-react-app) there's a JS BUNDLER that is installed, like Webpack, rollup.JS Parcel etc. . Those, by the way, help you with js files references and imports... But once you create an empty project and than use npm install without a bundler or package.json and more configuration - it will be harder to import.

read this article about how to install modules on JS project

Eldshe
  • 723
  • 6
  • 19
  • Thank you the 1. works. The 2. is as you say and is explained in the article. With create-react-app or similar is already configured. But the article also says that with webpack you can use it. And I tried with webpack and it also gave me errors, I will continue trying with webpack. – Francisco Beccaria Dec 13 '20 at 23:22
  • I'm giving an update on the situation. Webpack is the solution to 2. I already did what I wanted, without Webpack you can't. – Francisco Beccaria Dec 14 '20 at 01:00