Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Rails + Webpack + MDB-Pro v.4.8.0: Module not found: Error: Can't resolve './picker'

Neil Jobbins pro asked 5 years ago


Expected behavior

I have installed the latest version from the Gitlab repo with:

$ yarn add git+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/jqurey/jq-pro.git

Then in app/javascript/packs/mdb.js I have import 'bootstrap' and import 'MDBootstrap-pro/js/mdb'

Actual behavior

When compiling I get;

ERROR in ./node_modules/mdbootstrap-pro/js/mdb.js Module not found: Error: Can't resolve './picker'


webmasterONDS premium commented 5 years ago

I have the same issue. Have you been able to find a solution for this?


Neil Jobbins pro commented 5 years ago

No, no solution yet. Reverted back to a manual instal in asset pipeline instead.


Bartłomiej Malanowski staff commented 5 years ago

Did you guys follow our webpack tutorial? https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/


Neil Jobbins pro commented 5 years ago

Yes but it doesn't quite fit. We are trying to use Webpack (Webpacker) with a Rails application. I have taken some pieces from the tutorial though. In addition we needed to install '@babel/plugin-transform-runtime' with the yarn add --dev command.


Alejandro Mery free commented 5 years ago

I started with his mdb-boilerplate[1] and just added -pro. got the same error described above just by doing npm run build.

It's important to mention the author of that tutorial mentions one shouldn't go beyond mdb 4.7.7 and I actually added the latest, 4.8.1.I'm a total newbie btw

[1] https://github.com/SpellCraft/mdb-boilerplate.git


Piotr Glejzer staff answered 5 years ago


Hi, we are very sorry about that bug, I thought we fix this but no... You have to find in mdb.js ( or in picker-date.js) :

  // AMD.
  if (typeof define == 'function' && define.amd)
    define(['./picker', 'jquery'], factory)

and change it to :

  // AMD.
  if (typeof define == 'function' && define.amd)
    define(['picker', 'jquery'], factory)

https://ibb.co/N1CmCLF


Alejandro Mery free commented 5 years ago

I can confirm this fixed it.

$ find -name 'mdb.js' -o -name 'picker-date.js' | \
   xargs -r sed -i -e "s|'\./picker'|'picker'|g"

Neil Jobbins pro answered 5 years ago


We now have a new error...

ERROR in ./node_modules/mdbootstrap-pro/js/mdb.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/neiljobbins/Development/dna/node_modules/mdbootstrap-pro/js/mdb.js: Identifier '_classCallCheck' has already been declared (17952:9)

Please can you offer some guidance


Bartłomiej Malanowski staff commented 5 years ago

Please check David1's answer here: https://mdbootstrap.com/support/jquery/upgrading-jq-pro-4-7-7-to-4-8-broke-my-webpack/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: Mac
  • Browser: Chrome / Safari
  • OS: OSX 10.14.4
  • Provided sample code: Yes
  • Provided link: No