Uncaught Error: Cannot find module 'datatables.net-responsive'

hashmaster3k

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.

allan

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-responsive which 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, a yarn add datatables.net-responsive should 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

hashmaster3k

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.

colin

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

allan

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

hashmaster3k

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!