ES6 import statements not working on web server

Question

My imports work fine within my javascript file, but they do not work when I start the webserver. I can access the functions of the imported module as expected, but the import statement itself fails when I boot up the nodejs server.

I added the following import statement without error to the top of a javascript class

import * as Ably from 'ably';

My HTML file has this at the end of the body tag

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

I get the following error from inspect element (no errors in vscode)

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

I tried changing the file path

import * as Ably from './node_modules/ably/ably.js';

but this gave me 404 errors

GET http://localhost:3000/node_modules/ably/ably.js net::ERR_ABORTED 404 (Not Found)

Answer 1

Try using <script src="https://cdn.ably.com/lib/ably.min-1.js"></script> in HTML file instead of import. Also, check this thread, looks similar to your problem Failed to resolve module