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

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

hashmaster3khashmaster3k Posts: 6Questions: 2Answers: 0

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

  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    Answer ✓

    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

  • hashmaster3khashmaster3k Posts: 6Questions: 2Answers: 0
    edited October 27

    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.

  • colincolin Posts: 12,957Questions: 0Answers: 2,207

    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

  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    Answer ✓

    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

  • hashmaster3khashmaster3k Posts: 6Questions: 2Answers: 0
    edited October 29

    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!

Sign In or Register to comment.