I can’t install and start working with datatables via NPM ((
I can’t install and start working with datatables via NPM ((
John Dow
Posts: 16Questions: 6Answers: 0
Hello, I really need your help (
My package.json
{
"name": "js-sourse",
"version": "1.0.0",
"description": "",
"main": "app.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"datatables.net-dt": "^1.13.6"
}
}
My app.js
import DataTable from 'datatables.net-dt';
const dataSet = [
['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
]
let table = new DataTable('#example', {
columns: [
{title: 'Name'},
{title: 'Position'},
{title: 'Office'},
{title: 'Extn.'},
{title: 'Start date'},
{title: 'Salary'}
],
data: dataSet,
})
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="app.js"></script>
<title>Document</title>
</head>
<body>
<table id="example" class="display" width="100%"></table>
<thead></thead>
<tbody></tbody>
</body>
</html>
I'm getting an error in the browser JS console: SyntaxError: Unexpected identifier 'DataTable'. import call expects one or two arguments.
Where is my problem?
This question has an accepted answers - jump to answer
Answers
Are you using ESBuild, Vite, Rollup or something like that to turn your JS file into something that browser can use?
Allan
Hi Allan! I use VSCode w Live Http Server. A simple example with data on an http page with connected CDNs in the <head> section works great, but I want use NPM (NodeJS)
Work example - index.html
Work example - app.js
style.css
Why doesn't what is written in the NPM Installation section work? Why write something at 50%? Why doesn't it (import DataTable from 'datatables.net-dt') just work at the very beginning?
You need to use a bundler of some kind. Vite is a popular one at the moment, as is ESBuild, and Rollup (Vite uses Rollup). In the npm documentation for installation of DataTables I've assumed that the developer using it is already familiar with bundling libraries installed from npm (since that is at the more general application development level, in a similar way to how I haven't documented Javascript's syntax). I can see how that could be confusing for someone new to bundling libraries though, and my apologies. I will look at how I can improve that without actually redocumenting the various bundlers!
I've put together this little example on Stackblitz which shows Vite being used with DataTables (the code copied from the manual page as is).
Apologies if I'm trying to teach my granny to suck eggs, but going back to your first post,
import DataTable from 'datatables.net-dt';needs to get resolved into software that the browser can use. For that you need to use something like Vite or Rollup.Yup, modern Javascript can be a huge PITA! The "old" way of just including the DataTables
<script>works so much easier, but there are advantages to using bundlers and it is worth battling through.If you come across something that I can do better with the npm packages to make the installation easier, let me know. As I say, I had assumed that devs using it would already have knowledge of using a bundler since that is a key concept for using npm packages on the client-side. That was an incorrect assuption...
Allan