Uncaught TypeError: Cannot assign to read only property &#38

Topic: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Grischa Steffin free asked 5 years ago

Might be a duplicate of https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/

I have been using 4.8.x without problems. I am building mdbootstrap pro with webpack according to boilerplate description. Everything worked until I updated to 4.10. After fixing the two imports just like above everything gets built with webpack. Anyhow the error below appears in the javascript console and custom javascripts fail.

Can you please let me know when this issue is fixed? I can't figure it out with my little webpack knowledge, I don't even know where to start looking. But it has to do only with the mdbootstrap sources as nothing else was touched and works again after downgrading to 4.8.. again

Resources (screenshots, code snippets etc.) app.mdbootstrap.js:10511 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#' at Object. (app.mdbootstrap.js:10511) at Object.31 (app.mdbootstrap.js:10518) at i (app.mdbootstrap.js:1898) at Module. (app.mdbootstrap.js:19094) at i (app.mdbootstrap.js:1898) at Object.31 (app.mdbootstrap.js:10410) at i (app.mdbootstrap.js:1898) at app.mdbootstrap.js:1932 at Object. (app.mdbootstrap.js:1933) at Object.31 (app.mdbootstrap.js:20499)

Add comment

Allen777 pro answered 4 years ago

2 0 Best answer

Everyone, I created a new Post, hopefully to get an answer when this problem will be fixed. Please upvote it so it may get some attention at last. Thank you!

MDBootstrap is no longer compatible with Webpack and TypeScript

Add comment

Grischa Steffin free answered 4 years ago

1 0 Best answer

Just as Allen777 wrote I can only confirm my original description: It is just a plain old JQuery, MDB and Bootstrap setting. No Laravel, no Symfony. 
My problem description above is absolutely accurate: Compile was possible, error occors in runtime.

This is especially frustrating as I had already spent so much time on getting webpack to work in my simple setting with MDB before 4.10 and then code changes of MDB alone broke everything. I then spent a whole day and couldn't get it to work with any version after 4.8 or maybe 4.9. (not so sure after 6 months).
I have always used the files from the zip but I also tried using the sources from npm. I can't see why that should make a difference in the first place (it doesn't). Is it not the same code in the end?

I have spent hours finding out what happened between MDB 4.8 and 4.10.
There are so many different partial ideas about how to change the webpack.config.js that it is just impossible to get it in my specific configuration.

Can you not set up a simple consistent boiler plate setup for webpack + jquery + jquery-ui with the latest sources?

Please insert min. 20 characters.

Just as Allen777 wrote I can only confirm my original description: It is just a plain old JQuery, MDB and Bootstrap setting. No Laravel, no Symfony.
My problem description above is absolutely accurate: Compile was possible, error occors in runtime.

This is especially frustrating as I had already spent so much time on getting webpack to work in my simple setting with MDB before 4.10 and then code changes of MDB alone broke everything. I then spent a whole day and couldn't get it to work with any version after 4.8 or maybe 4.9. (not so sure after 6 months). I have always used the files from the zip but I also tried using the sources from npm. I can't see why that should make a difference in the first place (it doesn't). Is it not the same code in the end?

I have spent hours finding out what happened between MDB 4.8 and 4.10. There are so many different partial ideas about how to change the webpack.config.js that it is just impossible to get it in my specific configuration.

Can you not set up a simple consistent boiler plate setup for webpack + jquery + jquery-ui with the latest sources?

Add comment

victor1533 pro answered 4 years ago

1 0 Best answer

Same problem here. Stuck in old version...

Grzegorz Bujański staff commented 4 years ago

Hi. Check this post and try to use the solution given there: https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/

Allen777 pro commented 4 years ago

Extracting the zip file and adding to assets didn't work for me, and frankly defeats the purpose of using npm or any package manager. So Grzegorz, is that the solution, the way it will be, going forward? MDBootstrap will only support installing by placing the file directly in the asset, no longer supported through npm?

Grzegorz Bujański staff commented 4 years ago

Remember that we don't officially support Laravel and Symfony frameworks. Therefore, we do not know what usually causes such problems and how to deal with them. After all, we are trying to help our users so that they can use our package in Laravel and Symfony. One of the possible solutions you have above. The second one can be found here: https://mdbootstrap.com/support/jquery/how-to-build-mdb-v4-16-0-with-laravel-mix/ . Let me know if this solution works for you. if that doesn't help, let me know about what errors have appeared and we'll try to find a solution.

Please insert min. 15 characters.

Allen777 pro commented 4 years ago

But I don't use PHP, just plain old JQuery/JavaScript with Bootstrap and installed packages from npm, built using Webpack, That is it, nothing else.

Grzegorz Bujański staff commented 4 years ago

What exactly error do you get? Have you tried using the second solution using the webpack copy plugin?

Allen777 pro commented 4 years ago

So, since I don't use PHP, I cannot use the babel solution that you have provided by using laravel-mix. I simply unzipped and copied the entire mdb folder to a new project, and referenced (import) the mdb.min.js in my JS, and compiled my JS using webpack. I get this error when running it -Uncaught TypeError: Cannot assign to read only property 'exports' of object '#' at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:31864) at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:31868) at n (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23797) at Module. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:42465) at n (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23797) at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:31786) at n (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23797) at testmdbcopy.cc6af51f6fff05f80833.bundle.js:23830 at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23831) at Object../wwwroot/dist/vendor/MDB-Pro_4.18.0/js/mdb.js (testmdbcopy.cc6af51f6fff05f80833.bundle.js:44198)

I don't use PHP, just JQuery and plain JS, Bootstrap, PopperJS, Chart, Fontawesome, and compile using Webpack. Nothing fancy here.

The line where this error occurs - "object" === ("undefined" == typeof exports ? "undefined" : l(exports)) && void 0 !== t ? t.exports = n() : "function" == typeof define && i(75) ? define(n) : (e = e || self).bsCustomFileInput = n(), document.addEventListener("DOMContentLoaded", (function() { bsCustomFileInput.init() })) }).call(this, i(95)(t))

So what should I do?

So, since I don't use PHP, I cannot use the babel solution that you have provided by using laravel-mix. I simply unzipped and copied the entire mdb folder to a new project, and referenced (import) the mdb.min.js in my JS, and compiled my JS using webpack. I get this error when running it -Uncaught TypeError: Cannot assign to read only property 'exports' of object '#' at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:31864) at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:31868) at n (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23797) at Module. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:42465) at n (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23797) at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:31786) at n (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23797) at testmdbcopy.cc6af51f6fff05f80833.bundle.js:23830 at Object. (testmdbcopy.cc6af51f6fff05f80833.bundle.js:23831) at Object../wwwroot/dist/vendor/MDB-Pro_4.18.0/js/mdb.js (testmdbcopy.cc6af51f6fff05f80833.bundle.js:44198)

I don't use PHP, just JQuery and plain JS, Bootstrap, PopperJS, Chart, Fontawesome, and compile using Webpack. Nothing fancy here.

The line where this error occurs - 
"object" === ("undefined" == typeof exports ? "undefined" : l(exports)) && void 0 !== t ? t.exports = n() : "function" == typeof define && i(75) ? define(n) : (e = e || self).bsCustomFileInput = n(), document.addEventListener("DOMContentLoaded", (function() {
 bsCustomFileInput.init()
 }))
 }).call(this, i(95)(t))

So what should I do?

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

You can use babel. And you should do that. Look at this topic: https://mdbootstrap.com/support/jquery/latest-version-of-mdb-not-compatible-with-webpack/ I use this configuration all the time and everything works for me.

Allen777 pro commented 4 years ago

We are switching over to TypeScript and will not be using Babel. I just tried with a plain TypeScript project, Webpack, npm install of JQuery/Bootstrap/MDBootstrap and I am getting the same error. Any idea what should my configuration of Webpack should be?

Grzegorz Bujański staff commented 4 years ago

Unfortunately I don't know any other way.

Allen777 pro commented 4 years ago

So then, we would like an honest answer - is this issue being worked on, or will it ever be resolved? Because if not, we need to make a important decision that can have deep implication for our projects. Please let us know the true answer. Thank you.

Add comment

Allen777 pro answered 4 years ago

1 0 Best answer

MDBootstrap is now up to 4.18, and we are still stuck on 4.7.6. Is this fix still in the plan, and if so, what is the timeline? Thanks.

Grzegorz Bujański staff commented 4 years ago

Hi. Check this post and try to use the solution given there: https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

Look at here: https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/

Webpack configuration above working if you add MDB from zip. And for now we recommend this solution. In the meantime we will try to solve the problem with the installation via NPM.

Allen777 pro commented 4 years ago

I am a bit confused of what you mean by adding MDB from zip. Do you mean something like adding the mdb.min.js script tag directly on each HTML page?

m.hamacher priority commented 4 years ago

@Allen777 He meant adding MDB under assets (or any other directory where you have your js/scss files) like it is described by Julien Moulin (2 days ago) in the linked issue.

Nether the less, as I said before, it is not working for me. I tried a similar structure as Julien except I am using Symfony and not Laravel so the are some general differences.

Allen777 pro commented 4 years ago

I see, thank you much appreciated! I will try it out.

Grzegorz Bujański staff commented 4 years ago

We haven't tested it with Symfony. Do you still have the same error? Something like "Cannot assign to read only property 'exports' of object (...)" ?

Allen777 pro commented 4 years ago

We don't use PHP but TypeScript, and I just tried this method and it does not work. Spent too much on it already so will just have to wait until it is fixed with the normal npm method. It used to work really well...

Grzegorz Bujański staff commented 4 years ago

We will let you know when we solve this problem.

Allen777 pro commented 4 years ago

Thank you that makes us feel a bit relieved.

m.hamacher priority commented 4 years ago

@Grzegorz Bujański Yes it is the same error "Cannot assign to read only property 'exports' of object '#'". When I look at the line it has something to do with bsCustomFileInput.

Grzegorz Bujański staff commented 4 years ago

I'm not Symphony expert, but when we work on it i will remember about this and i will try test this on Symphony.

m.hamacher priority commented 4 years ago

@Grzegorz Bujański Symfony and Laravel are much the same so I think if the underlying problem (without any workaround like adding via zip) is solved it will also be solved within the Symfony Framework.

Grzegorz Bujański staff commented 4 years ago

Yes, we know this but we need time to see what's going on.

m.hamacher priority commented 4 years ago

Yes I understand that.
For now I have a little workaround which seems to work for me. I use the CopyWebpackPlugin to copy the mdb.min.js, mdb.min.js.map and jquery.min.js from node_modules and just add my own tags with these js files. So it looks like this:

## webpack.config.js
[...]
.addPlugin(
    new CopyWebpackPlugin(
        [
            [...]
            {
                from: './node_modules/mdbootstrap-pro/js/mdb.min.js',
                to: 'js/mdb.min.js'
            },
            {
                from: './node_modules/mdbootstrap-pro/js/mdb.min.js.map',
                to: 'js/mdb.min.js.map'
            },
            {
                from: './node_modules/mdbootstrap-pro/js/jquery.min.js',
                to: 'js/jquery.min.js'
            }
        ]
    )
)
[...]

## frontend.js
import 'bootstrap'

import '../scss/frontend.scss'

## Base-Template
[...]
{{ encore_entry_script_tags('frontend') }}
<!-- JQuery -->
<script type="text/javascript" src="{{ asset('build/js/jquery.min.js') }}"></script>
<!-- MDB JavaScript -->
<script type="text/javascript" src="{{ asset('build/js/mdb.min.js') }}"></script>
[...]

I probably need to add bootstrap in the base-template as well but until now I have no errors regarding that so I haven't added it.

Yes I understand that. 
For now I have a little workaround which seems to work for me. I use the CopyWebpackPlugin to copy the mdb.min.js, mdb.min.js.map and jquery.min.js from node_modules and just add my own tags with these js files. So it looks like this:

<pre class="prettyprint"><code>## webpack.config.js
[...]
.addPlugin(
 new CopyWebpackPlugin(
 [
 [...]
 {
 from: './node_modules/mdbootstrap-pro/js/mdb.min.js',
 to: 'js/mdb.min.js'
 },
 {
 from: './node_modules/mdbootstrap-pro/js/mdb.min.js.map',
 to: 'js/mdb.min.js.map'
 },
 {
 from: './node_modules/mdbootstrap-pro/js/jquery.min.js',
 to: 'js/jquery.min.js'
 }
 ]
 )
)
[...]
</code></pre>
<pre class="prettyprint"><code>## frontend.js
import 'bootstrap'

import '../scss/frontend.scss'
</code></pre>

<pre class="prettyprint"><code>## Base-Template
[...]
{{ encore_entry_script_tags('frontend') }}

<script type="text/javascript" src="{{ asset('build/js/jquery.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('build/js/mdb.min.js') }}"></script>
[...]
</code></pre>

I probably need to add bootstrap in the base-template as well but until now I have no errors regarding that so I haven't added it.

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

Bootstrap is necessary (for example Material Select use bootstrap.js) . Does everything work anyway? Did you try use any component?

m.hamacher priority commented 4 years ago

Yes they seem to work correctly. I've only teste some parts but they worked correctly

Grzegorz Bujański staff commented 4 years ago

Looks like you found solution how to use MDB with Symphony :)

Add comment

Horror Coder free answered 4 years ago

0 0 Best answer

Same issue here, trying to run mdbootstrap on laravel 6, installed mdbootstrap via npm

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

@m.hamacher try this config:

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.babelConfig({
    "presets": [
      [
        "@babel/preset-env",
        {
            "useBuiltIns": "usage",
            "corejs": "3.0.0"        
        }
      ]
    ]
  }
)

and of course import MDB in app.js

m.hamacher priority commented 4 years ago

@Grzegorz Bujański still not working

Add comment

m.hamacher priority answered 4 years ago

0 0 Best answer

Any updates on this? Still not working in 4.13.0.

We are looking for the perfect configuration that will work in any case

Maybe you can publish a version which is working for some of us, so we don't have to wait until you checked any case?

Grzegorz Bujański staff commented 4 years ago

At the moment I recommend trying to add MDB using a zip file and extracting in vendors folder, not via NPM.

m.hamacher priority commented 4 years ago

Hi, I have not installed MDB via NPM. But I just checked and the error seems to be the same. And is still persistent in the newest version 4.14.0...

Colin Mcleod pro commented 4 years ago

Same issue with new rails 6, webpacker & mdbootstrap latest (4.14)

spidey priority commented 4 years ago

Same for me since version 4.10 :(

Add comment

Neil Jobbins pro answered 4 years ago

2 0 Best answer

4.12.0 still has this issue :( Site is useless, no java script will execute.

Grzegorz Bujański staff commented 4 years ago

Hi.

Yes. Sorry about that. We still working on it.

Best, Grzegorz

benskolnick pro commented 4 years ago

I am still stuck on 4.7.7 for a year now. All these updates don't really help if we cannot use them with modern tool sets. I prefer SPA architecture with Webpack but don't want to be forced to use Angular as the only working webpack solution with mdbootstrap since 4.7.7. I am not really interested in using this component library in a classic html forms, heavy page load from the 90's kind of way. I liked MDBootstrap because I could have similar components for all project types but if only Angular is going to be working going forward I will switch to something else.

Grzegorz Bujański staff commented 4 years ago

Hi,

Sorry about that. we try fix this at this moment. We hope that soon we will be able to provide a solution to this problem.

Best, Grzegorz.

Neil Jobbins pro commented 4 years ago

Hi Grzegorz, Do you have any indication if/when this will be fixed? Neil

Grzegorz Bujański staff commented 4 years ago

Hi. Hard to say. We are trying to solve this problem as soon as possible.

Best, Grzegorz.

Add comment

Kiril free answered 4 years ago