mdb.min.js:24 Uncaught TypeError: Cannot set property '


Topic: mdb.min.js:24 Uncaught TypeError: Cannot set property 'mdb' of undefined

Justin Hamilton asked 2 years ago

*_Expected behavior_*I expect the page to load without error

*_Actual behavior_*I get this error on a fresh Rails 6 install with mdb 5 advanced added to the webpack and required in the application.js

Resources (screenshots, code snippets etc.)enter image description here

enter image description here

enter image description here

On the image above I have tried both methods of importenter image description here

Additionally after all other methods failed I have tried providing the plugin but all methods have given the same resulting error

Below is my package.json

{ "name": "vagrant", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.3.0", "mdb-ui-kit": "git+https://oauth2:@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" } }

Additional scope debugenter image description here

Paused on caught exceptionenter image description here

2nd Pause on exceptionenter image description here

3rd enter image description here

4th enter image description here

5th enter image description here

6thenter image description here

7thenter image description here

final pause enter image description here


vilage answered 2 years ago

I'm having the exactly same issue on Pro version. When i install the free version, it works, so, i don't think it's our project configuration.

Can you, developer guys, help us?


Mikołaj Smoleński staff answered 2 years ago

In webpack applications mdb should be added as a global alias.

Here's the necessary config:

new Webpack.ProvidePlugin({
  'mdb': 'mdb',
}),

and:

  resolve: {
    alias: {
      '~': Path.resolve(__dirname, '../src'),
      'mdb': Path.join(__dirname, '../node_modules/mdb-ui-kit'),
    },
  },

I recommend to check our Webpack Starter.

Best regards


Justin Hamilton commented 2 years ago

I've added everything but no matter what I get Module not found: Error: Can't resolve 'mdb' in '/vagrant/node_modules/mdb-ui-kit/js' that path is correct to the js folder


Mikołaj Smoleński staff commented 2 years ago

It seems there is a problem with your project's configuration and we can't help with it since we don't guarantee Rails integration. Still, I suggest to compare your configuration with our Webpack starter config. Best regards


vilage answered 2 years ago

I found a fix: https://stackoverflow.com/questions/34973442/how-to-stop-babel-from-transpiling-this-to-undefined-and-inserting-use-str


Justin Hamilton commented 2 years ago

Can you show what you did using the comments from the article?


This is the secret sauce to get it to work in Rails enter image description here


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
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes