What does exports.default=_default means?

Question

Here is the js file which has the above line at the end ,I want to know what is it doing ? And how would I import Button component from it on sololearn ? If I can't then why is it hosted on cloudfare?

https://cdnjs.cloudflare.com/ajax/libs/material-ui/4.11.0/Button/Button.min.js

Answer 1

Abhay It appears this file uses the require() function which indicates it's for use with NodeJS. I'm not really familiar with this script.

Answer 2

If you look just above that last line, you'll notice the line below:

----
var _default=
(0, _withStyles.default)
(styles, {name:"MuiButton"})
(Button);

exports.default=_default;
----

I'm assuming this is just an IIFE that might be the equivalent to the following:

----
var createButton = _withStyles
.default(
styles,
{name:"MuiButton"}
)

exports.default = createButton(Button)
----

Answer 3

David Carroll can you help please? Using cdn material-ui/core/@latest/production.min.js allows using Button component in sololearn by
const {Button} =MaterialUI ,
but if I am not wrong it is loading all the components from material-ui package but I want to use only Button so I searched for the above cdn but how would I get Button component from it to use in sololearn ?

Answer 4

David Carroll Thank you ! Also i have this code setup but how can I use Button component? I still don't have an idea about it ,

https://code.sololearn.com/WDCVotd7ZfAi/?ref=app

Something called Button is available in window object but using it directly gives an error which I am not able to understand at all

Answer 5

Your version relies on Node and npm to work.

If you look at the unminified version
https://cdnjs.cloudflare.com/ajax/libs/material-ui/4.11.0/Button/Button.js

You will notice many require calls instead of ES 6 imports

If you want to use Material UI in Sololearn use the UMD(Universal module definition). It will import all the required components to the window object.

Development
https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js

Production
https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js

Documentation
https://material-ui.com/getting-started/installation/

Answer 6

Ore Ty !,I was using umd only and seems like there is no other way than to use it again ,
Also i am familiar that require is used in node environment but works fine for cdn included at client side browsers ,if not I don't get the purpose of having a cdn for component hosted on cloudfare ,
And this cdn works fine even tho it makes require calls

https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js

Button is similar like this ,require shudn't be a problem if I include the files that it requires ,the problem is how would I include Button component from it and what Does the error mean? Button is available in window object but simply using it without importing doesn't works

Answer 7

Abhay I searched the entire file and cannot find any require calls.

Except this, at the beginning of the file,

function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('redux'), require('react-dom')) : (...)

I am not sure but I think the require function has been overloaded by a bundler. This might happen if you transpile your js code with browserify or similar tools.

I will be waiting for David Carroll to answer that though.

Answer 8

Ore I just saw those require functions and thought it is the same like that one ,both button and redux react files names looked same to me ,so I thought I had mentioned why react redux works (only after including cdn for react ,react dom and redux before) and button .js won't work similarly but seems like their is lot of difference in both ,btw new to all this and don't even understand what is a bundler or so terms ,ty tho , some new things to explore for me , still I can't understand the reason behind having a cdn for button js sperately if you can't use it just ,