I am new to WEB-development/JavaScript and I have come across a problem around imports which is causing me a much bigger headache than I imagined.

Problem:

I am trying to build a front-end application embedding some charts using chart.js. I have installed the package using npm and I can see it in the package.json file within my project. The main script which is loaded into my HTML file (index.js) contains the import statement like so:
import Chart from 'chart.js/auto'.

I am hosting the webpage using http-server and as soon as I run it, I get the following ERROR message:

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

When I open it directly in the browser, I get:

Uncaught SyntaxError: Cannot use import statement outside a module

Attempts:

So far I have tried to add the module tag to my html where I load the script but that results in the following, when run through the browser directly:

Access to script at 'file:///xxx/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.        
Failed to load resource: net::ERR_FAILED

And when hosting using http-server, it returns this again:

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

I am not using any frameworks, just plain old JavaScript. Have tried to get my head around UMD files, intricacies of ES6 etc. but it’s not fully coming together. Please can someone help me solve the above problem and perhaps shed some light on import in general.

Thank you