Unable to initialize DataTable due to multiple JS errors

Open ToastedGuy2 opened this issue 4 years ago • 1 comments

I cannot make Simple-DataTables npm version work on a pet project. I think is due the lack of knowledge in modules subject. I have read the library documentation, but still cannot make it work. Here is what i have tried:

Install the library using npm.
Include the style.css in the
tag.
After this step i have tried many things to make it work:
Include a <script type="module" src='src/index.js>

Which includes the following code:

import { DataTable } from "simple-datatables";

const dataTable = new DataTable("#myTable");

It throws me the following error: Uncaught TypeError: Failed to resolve module specifier "simple-datatables". Relative references must start with either "/", "./", or "../". I replace simple-datatables with the specific path to the js file, since i did not know which was the file i tried with index.js and simple-datatable.js Again it throws me an error: index.js:1 Uncaught SyntaxError: The requested module simple-datatables.js/index.js does not provide an export named 'DataTable'.

I even tried including the same index.js/simple-datatables.js file before index.js, but still doesn't work. You can look at the html code here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/simple-datatables/dist/style.css">
    <title>Simple Data tables</title>
</head>
<body>
    <table id="myTable">
        <thead>
        <tr>
        <th>Name</th>
        <th>Price</th>
        <th><button>Add</button></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="node_modules/simple-datatables/dist/index.js"></script>
    <script src="src/index.js" type="module"></script>
</body>
</html>

To be honest i could just use the CDN version, because it had worked for me, but i want to use the NPM version for learning purposes (i'm learning nodeJS at the moment, so i'm really curious about how this works). I did try asking on stackoverflow but no one answer it. Here is the source code of the demo project.

PS: i know this can sound a little dumb or annoying, but i'm pledging you to help me figure it out, what's wrong. And if it's possible explain in simple words for a monkey like me.

Apr 19 '21 16:04 ToastedGuy2

The error states 'Failed to resolve module specifier "simple-datatables". Relative references must start with either "/", "./", or "../".' so you need to use:

import { DataTable } from "./simple-datatables";

Nov 30 '21 12:11 coliff