Question posted in 
I’m working on two separate projects, one using Vue.js and the other using React. Both projects are based on quickstart templates provided by SurveyJS. After following the setup instructions and running the npm run start command, I encounter a compilation error related to the datatables.net module in both projects.
Setup Details:
React Project: SurveyJS + React Quickstart Template.
Repository: surveyjs_react_quickstart
Node.js Version: 20.x (also tried with Node.js 18.x)
Error appears when running npm run start
Expected Behavior:
The application should compile successfully and be accessible via http://localhost:3000/ for the React project and the equivalent port for the Vue project.
Actual Behavior:
The application fails to compile, displaying the following error:
Failed to compile.
Module not found: Error: Can't resolve 'datatables.net/js/jquery.dataTables.js' in 'check-insurveyjs_react_quickstartsrccomponents'
ERROR in ./src/components/SurveyAnalyticsDatatables.js 9:0-48
Module not found: Error: Can't resolve 'datatables.net/js/jquery.dataTables.js' in 'check-insurveyjs_react_quickstartsrccomponents'
Same error when I tried use the Vue repo:
ERROR Failed to compile with 1 error
This dependency was not found:
* datatables.net/js/jquery.dataTables.js in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/AnalyticsDatatables.vue?vue&type=script&lang=js
What I’ve Tried:
-
Ensuring Correct Node.js Version: Tried running both projects with Node.js 18.x and Node.js 20.x.
-
Installing Required Packages: Installed the following packages:
npm install datatables.net datatables.net-dt datatables.net-buttons datatables.net-colreorder datatables.net-rowgroup
- Checking Imports: Updated the import paths in both React and Vue files to ensure they are using the correct modules
Questions:
-
Why is the module datatables.net/js/jquery.dataTables.js not being resolved correctly in both Vue and React projects?
-
Is there a specific configuration in Webpack or the package imports that I might be missing for this to work correctly?
-
What is the best approach to fix this issue so that the projects compile successfully?
2
Answers
If you have any doubt about internal structure of a package, it needs to be verified with your own eyes in
node_modules.It can be seen that current version (2.1.4) doesn’t have
jquery.dataTables.js. Instead it should be:There is no need to explicitly use module paths in imports for the up-to-date packages that have valid entry points in
package.jsonlikedatatables.net, so it could be possibly shortened:But the reason why the problem occurred is that this boilerplate contains loose dependency version restrictions, this is the real problem here:
The boilerplate is dated (the last commit to code is
Aug 10, 2022) and will inevitably break with time with up-to-date dependencies that contain breaking changes. If this is the case with the said fix, each of these dependencies needs to be viewed, and a version that was considered "latest" at the time of publishing of the boilerplate needs to be deduced. Packages of the same scope or origin likesurvey-*commonly have synchronised versions. Whether a version can can be restricted to major, minor or patch version depends on a package. It would likely be1.9forsurvey-*packages. It’s specificallysurvey-analyticsthat depended ondatatables.netand caused a breaking change, a fix inpackage.jsonthat would make them less possible would beIt was a bug in survey-analytics library dependencies. I’ve fixed it via the https://github.com/surveyjs/survey-analytics/commit/e7fdcb7e07949aa310dcfc410d6cde8ebc049698 commit in version 1.11.13
Now it should work as described in documentation.