Uncaught Error: Cannot find module 'datatables.net-responsive'
Uncaught Error: Cannot find module 'datatables.net-responsive'
hashmaster3k
Posts: 6Questions: 2Answers: 0
in Responsive
I am upgrading my Rails application from bootstrap 4.6 to 5.0. In order to also upgrade DataTables, I performed:
yarn remove "datatables.net-bs4";
yarn remove "datatables.net-responsive-bs4";
yarn remove "datatables.net-select-dt";
then performed
yarn add datatables.net-bs5
yarn add datatables.net-responsive-bs5
yarn add datatables.net-select-bs5
I also updated my application.js to import the new libraries. When precompiling my JS code, I get the following error
[webpack-cli] ModuleNotFoundError: Module not found: Error: Can't resolve 'datatables.net-responsive' in '/Users/hashimgari/Codebases/heritage-calendarize/node_modules/datatables.net-responsive-bs5/js'
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/webpack/lib/Compilation.js:925:10
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/webpack/lib/NormalModuleFactory.js:401:22
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/webpack/lib/NormalModuleFactory.js:130:21
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/webpack/lib/NormalModuleFactory.js:224:22
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/neo-async/async.js:2830:7
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/neo-async/async.js:6877:13
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/webpack/lib/NormalModuleFactory.js:214:25
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/enhanced-resolve/lib/Resolver.js:213:14
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/hashimgari/Codebases/heritage-calendarize/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/hashimgari/Codebases/heritage-calendarize/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/hashimgari/Codebases/heritage-calendarize/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /Users/hashimgari/Codebases/heritage-calendarize/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
resolve 'datatables.net-responsive' in '/Users/hashimgari/Codebases/heritage-calendarize/node_modules/datatables.net-responsive-bs5/js'
Parsed request is a module
using description file: /Users/hashimgari/Codebases/heritage-calendarize/node_modules/datatables.net-responsive-bs5/package.json (relative path: ./js)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in /Users/hashimgari/Codebases/heritage-calendarize/app/javascript
using description file: /Users/hashimgari/Codebases/heritage-calendarize/package.json (relative path: ./app/javascript)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/hashimgari/Codebases/heritage-calendarize/package.json (relative path: ./app/javascript/datatables.net-responsive)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive.jpg doesn't exist
as directory
/Users/hashimgari/Codebases/heritage-calendarize/app/javascript/datatables.net-responsive doesn't exist
and within the browser console I receive
responsive.bootstrap5.js:9 Uncaught Error: Cannot find module 'datatables.net-responsive'
at webpackMissingModule (responsive.bootstrap5.js:9)
at responsive.bootstrap5.js:9
at Object../node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.js (responsive.bootstrap5.js:33)
at __webpack_require__ (bootstrap:19)
at Module.<anonymous> (application.js:1)
at Module../app/javascript/packs/application.js (application.js:65)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
The download builder does not mention needing the base datatables.net-responsive but when added the errors go away but my tables don't seem to be formatted as they were with bs-4.
This question has accepted answers - jump to:
Answers
We've got an error in our current release package for Responsive I'm sorry to say. It should have a dependency on
datatables.net-responsivewhich the 2.2.9 release does not. We've got it fixed in git and I'll get it packaged up and released soon. Thanks pointing that out. Until then, ayarn add datatables.net-responsiveshould sort it out.Regarding the styling - perhaps you could give me a link to your page showing the issue so I can see what is happening please?
Allan
Thanks for letting me know Allan. I'll keep an eye out on that fix.
The styling issue only occurs on my development as production is still running bootstrap 4. The best I can do right now is a picture. The formatting issues are padding, alignment and missing a top border, as seen below.
Table headers/styling with bs4
Table headers/styling with bs5
Download or open in new tab for better view of picture.
With styling issues, they really need to be seen to be make recommendations. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Bootstrap 5 doesn’t have a top border for the table - so that part is correct.
The alignment of the arrows does look wrong - but I’m not seeing that on our BS5 example. If you could link to a test case as Colin indicates, I’ll be able to identify what is going wrong.
Allan
Allan/Colin. Thanks for you help. When installing the base responsive library things lined up properly. I also noticed the same thing yesterday on the docs in regards to the top line. At this point my issue is resolved until that dependency fix is released.
Thank you for your assistance!