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-in\surveyjs_react_quickstart\src\components'
ERROR in ./src/components/SurveyAnalyticsDatatables.js 9:0-48
Module not found: Error: Can't resolve 'datatables.net/js/jquery.dataTables.js' in 'check-in\surveyjs_react_quickstart\src\components'
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
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?
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:
import "datatables.net/js/dataTables.js"
There is no need to explicitly use module paths in imports for the up-to-date packages that have valid entry points in package.json like datatables.net, so it could be possibly shortened:
import "datatables.net"
But the reason why the problem occurred is that this boilerplate contains loose dependency version restrictions, this is the real problem here:
"survey-core": "latest"
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 like survey-* commonly have synchronised versions. Whether a version can can be restricted to major, minor or patch version depends on a package. It would likely be 1.9 for survey-* packages. It's specifically survey-analytics that depended on datatables.net and caused a breaking change, a fix in package.json that would make them less possible would be
"survey-analytics": "1.9",
"survey-core": "1.9",
...