Symfony 6 - Webpack Encore - DataTable is not a function
Symfony 6 - Webpack Encore - DataTable is not a function
Hi, I'm trying to use DataTables in my symfony 6 project with webpack encore, but I'm facing some issues.
First I installed those packages:
yarn add datatables.net
yarn add datatables.net-bs5
Then in my app.js:
import '../scss/app.scss';
const $ = require('jquery');
require('bootstrap');
require('datatables.net');
require('datatables.net-bs5');
$(document).ready(function() {
$("#myTable").DataTable();
});
But I got this issue, .DataTable is not a function, can someone help me?
PS: Sorry for my english
Craw
This question has an accepted answers - jump to answer
Answers
Hi Craw,
Try this please:
It does depend a little bit on if Webpack is configured for ES modules or CommonJS - that is the CommonJS syntax which matches the
require
code you have above.Allan
Hey, thanks for answer, I already tryed and it show this error:
Uncaught TypeError: webpack_require(...) is not a function
And can u tell me how to make code snipet in this forum?
Soluce :
Jquery was on my nodes_modules and I was abble to use it normaly in my app.js so I thought it was not necessary to install the package. It was a mistake after I :
yarn add jquery
This code work great
const $ = require('jquery');
require('bootstrap');
require('datatables.net');
require('datatables.net-bs5');
$(document).ready(function() {
$("#myTable").DataTable();
});
You have to disable autoprovide jquery in webpack config
Awesome - thanks for the update.
Allan
Hi, thanks for the great information, may I ask why you use require instead of import statement ?
They might be using CommonJS rather than ES Modules. DataTables supports both. Indeed in a lot of cases, a packager such as Webpack can take ES Module syntax (
import ...
) and down convert it back to CommonJS and work from there without you ever knowing, It depends on how Webpack is configured.If you are starting on a new code base, I'd suggest going with ES Modules. Only use CommonJS if you are working on an older code base that already uses it.
Allan