Rails + Webpack + MDB-Pro v.4.8.0: Module not found: Error:


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

Neil Jobbins pro asked a year 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 pro commented a year ago

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


Neil Jobbins pro commented a year ago

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


Bartłomiej Malanowski staff pro premium commented a year ago

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


Neil Jobbins pro commented a year 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 pro premium commented a year 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


Neil Jobbins pro answered a year 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


Piotr Glejzer staff answered a year 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 pro premium commented a year 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"

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.7.7
  • Device: Mac
  • Browser: Chrome / Safari
  • OS: OSX 10.14.4
  • Provided sample code: No
  • Provided link: No