We Keep Coding

"Error resolving module specifier" danfojs

I was able to use danfojs using
<script src="https://cdn.jsdelivr.net/npm/danfojs#1.1.2/lib/bundle.min.js"></script>
However, the .js file is too big (over 6MB) for production so I need some help with dead code elimination.
I read that webpack's tree-shaking is good for eliminating dead code
I therefore "npm install danfojs" per the official documentation.
In my html file, I tried to do a ES6 import
<script type="module">
import * as dfd from 'danfojs';
import { readCSV, DataFrame } from 'danfojs';
</script>
In Firefox, when I load the webpage, it throws an error of
Uncaught TypeError: Error resolving module specifier “danfojs”. Relative module specifiers must start with “./”, “../” or “/”.
Any help getting the import running OR doing dead code elimination in another way would be much appreciated.
The folder structure is like this, based on a flask project
root
node_modules
danfojs
app
templates
home
webpage.html

import js file in js file for webdev

I have a js file called project specific js.js and in that file I want to import another js file for general js called logic.js in the js folder
import 'js/logic.js';
in devtools when I run the html that imports project specific js i get
Uncaught SyntaxError: Cannot use import statement outside a module

issue fixed it turns out because I wasn't running a localhost for some reason you cant import other js files except modules like react. now I am running localhost and in the script tag importing projectSpecificJs.js i have type set to module so :<script type="module" src="projectSpeceficJs.js></script>"

Just for further information:
import 'file.js'
Is only for nodejs / module html attribute
Also here's some quick info related to the topic:
The whole concept behind using the “import” statement instead of “require” in Node.js is to shift from the CommonJS module system to the ECMAScript Module System. Reference

Unexpected token '<' Error (npx create-react-app)

I've setup a new react app using npx create-react-app my-app.
In the index.html file I want to import a javascript file in the head like so
<script src="/src/.../file.js"></script>
However, I keep getting Unexpected token '<' error. I can't do an import as it creates loads of errors and I want to be able to use some functionality in these scripts across the site.
Any ideas how to reference this file? Previously in other projects we use webpack but this config doesn't seem available in this project.

If your js files are located in the /public/ folder then you can import it like this:
<script src="%PUBLIC_URL%/.../file.js"></script>
If it is located in /src/ folder, you can simply import it to your index.js file, and it will be available across your React application. Remember that order of imports matters here.
import './.../file.js';

Create react app App fails when importing custom library

I created a brand new app using creat-react-app. got it running. My company has a custom library of components in an npm repository.
I pull that in, and import one of the components. I get a failure immediately.
The error I'm getting is:
./node_modules/the module in question/index.js
Module parse failed: Unexpected token (1:7)
When I look at the index.js file of this node module, the only line there is:
export * from './src';
The ./src/index.js file exports all the components individually.
It's clear this is choking webpack or something. I haven't really seen things exported like this.

Unexpected token import when using module installed with bower

I'm trying to use a Drag and Drop module made with react. I installed it using bower and included the Draggable.js, Droppable.js and the index.js files in my webpage like this
<script type="text/javascipt" src="path to file.js"></script>
However when I run my application I get 3 errors saying
Uncaught SyntaxError: Unexpected token import
and pointing to the 3 files previously imported
can anybody provide a proper solution to this problem