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

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

*_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

On the image above I have tried both methods of import enter 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 debug enter image description here

Paused on caught exception enter image description here

2nd Pause on exception enter image description here

3rd enter image description here

4th enter image description here

5th enter image description here

6th enter image description here

7th enter image description here

final pause enter image description here

Add comment

vilage answered 4 years ago

1 0 Best answer

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?

Add comment

Mikołaj Smoleński staff answered 4 years ago

0 1 Best answer

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 4 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 4 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

Sense4 pro premium priority commented 2 years ago

And where should I enter this configuration - in what file?

Add comment

vilage answered 4 years ago

0 0 Best answer

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 4 years ago

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

Add comment

Justin Hamilton answered 4 years ago

0 0 Best answer

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