1

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:

  1. Ensuring Correct Node.js Version: Tried running both projects with Node.js 18.x and Node.js 20.x.

  2. Installing Required Packages: Installed the following packages:

npm install datatables.net datatables.net-dt datatables.net-buttons datatables.net-colreorder datatables.net-rowgroup

  1. 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?

Improve this question

2 Answers 2

Reset to default
1

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",
...
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

So it's better not to use it?
Why? If it serves the purpose then use it, if the suggested fix works. You'd have to do the same thing from scratch otherwise any way. You can also open an issue and optionally push a PR because this is the way to solve a problem on GH with a thing you use without waiting for someone to do this. Don't forget to check the forks, probably someone has already fixed it github.com/surveyjs/surveyjs_react_quickstart/network
0

It 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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.