webpack-contrib/expose-loader

expose-loader works in Chrome but not FireFox?

J4v4Scr1pt opened this issue · 9 comments

J4v4Scr1pt commented

Hi there!

After some issues with upgrading from 0.7.5 to 2.0.0 everything where fine with expose-loader thanks to @alexander-akait (Issue#129), until we tested in Firefox and we got several errors.

First off these ones works in both FF(Version 88) and Chrome(Version 89.0.4389.128):

import "expose-loader?exposes=React!react";
import "expose-loader?exposes=ReactDOM!react-dom";
import "expose-loader?exposes=moment!moment";
import "expose-loader?exposes=Tours!./tours.js";

Then we have several entrys like this:

   entry: {
    bla: ["./bla"],
    bla_app: ["./bla_app"],
    bla2: ["@babel/polyfill", "./bla2"], 
    bla3: ["./bla3"],
    bla4: ["./bla4"],
    bla_5: ["@babel/polyfill", "./SinglePage/bla_5.js"], 
    bla_6: ["@babel/polyfill", "./SinglePage/bla_6.js"],
    },

each entry has its own set of react components that we need to expose to our Razors views to be rendered:
import "expose-loader?exposes=Components!./bla_index.js";

This works without problem in chrome, but fails in FF:
Uncaught Error: [exposes-loader] The "Components" value exists in the global scope, it may not be safe to overwrite it, use the "override" option
and every component from bla_index.js that should be renderd gets undefined.
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If I add this to webpack:

{
test: require.resolve("./App/bla_index.js"),
loader: "expose-loader",
options: {
	exposes: {
		    globalName: "Components",
		    override: true,
		},
	},
},

For every file that has its own set of components, this results in 5 of these.
Then I can change the import to:
import "./bla_index.js";
I can even leave it:
import "expose-loader?exposes=Components!./bla_index.js";

Now both FF and Chrome works, if I take away the import completely both of them stop working.

What's in play here? What is it I'm misunderstand?

alexander-akait commented

Can you provide reproducible example? Maybe bug in browser

J4v4Scr1pt commented

Can you provide reproducible example? Maybe bug in browser

Hi and sorry to bother you again 😶.

Unfortunately I think I can't, because this happens in the pages where the Razor views is supposed to use the React components:
$"<script>ReactDOM.render(React.createElement({component}, {JsonConvert.SerializeObject(serializerConfig)}), document.getElementById(\"{contId}\"))</script>");

I just thought it was interesting that it worked fine with chrome using expose-loader inline, but not in FF.
It works if I do like I wrote above and expose the components through webpack config.

The file that contains all the React components look like this:

import Lorem1 from "./Components/Lorem1/Lorem1";
import Lorem2 from "./Components/Lorem2/Lorem2";
import Lorem3 from "./Components/Lorem3/Lorem3";

export {
	Lorem1,
	Lorem2,
	Lorem3,
};
alexander-akait commented

Uncaught Error: [exposes-loader] The "Components" value exists in the global scope, it may not be safe to overwrite it, use the "override" option

It means you have multiple Components in global scope, this can lead to such problems, without the code I cannot tell what is wrong, sorry

J4v4Scr1pt commented

Uncaught Error: [exposes-loader] The "Components" value exists in the global scope, it may not be safe to overwrite it, use the "override" option

It means you have multiple Components in global scope, this can lead to such problems, without the code I cannot tell what is wrong, sorry

yes I understand and with override true it works :).
No need to be sorry mate :)!

I understand, this case i quite complex with razor views and react components needs to be expose to them etc.
I just wanted to have some kind of discussion and highlight this. To understand it better for my self and maybe you get something out of it as well :).

Because I find it quite interesting that different browsers handle the expose so differently. And even with moving the expose of the components to webpack config to solve the issues in FF.... IE dont work.. but yee its IE.. :P.
But it works with expose-loader 0.7.5 so that is quite interesting to imo :)

alexander-akait commented

To be honestly we generate very simple code (example https://github.com/webpack-contrib/expose-loader/blob/master/test/__snapshots__/loader.test.js.snap#L89), so it should work in IE/FF/Chrome and other browsers

J4v4Scr1pt commented

To be honestly we generate very simple code (example https://github.com/webpack-contrib/expose-loader/blob/master/test/__snapshots__/loader.test.js.snap#L89), so it should work in IE/FF/Chrome and other browsers

Yee, I did note even care to test it in another browser first, it was our tester that did that.

Maybe a stupid question, sorry if it is... but is there a way to create/inspect the exposes generated by expose-loader(Like the one you linked to.) or is all off it under webpack?

J4v4Scr1pt commented

Maybe this can be something that is a issue in my case:

🚀 ~ file: index.js ~ line 94 ~ loader ~ code var ___EXPOSE_LOADER_IMPORT___ = require("-!./index.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = require("../expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
if (typeof ___EXPOSE_LOADER_GLOBAL_THIS___["ReactDOM"] === 'undefined') ___EXPOSE_LOADER_GLOBAL_THIS___["ReactDOM"] = ___EXPOSE_LOADER_IMPORT___;
else throw new Error('[exposes-loader] The "ReactDOM" value exists in the global scope, it may not be safe to overwrite it, use the "override" option')
module.exports = ___EXPOSE_LOADER_IMPORT___;

But jquery works and it'ts not undefined:

🚀 ~ file: index.js ~ line 94 ~ loader ~ code var ___EXPOSE_LOADER_IMPORT___ = require("-!./jquery.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = require("../../expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
___EXPOSE_LOADER_GLOBAL_THIS___["$"] = ___EXPOSE_LOADER_IMPORT___;
___EXPOSE_LOADER_GLOBAL_THIS___["jQuery"] = ___EXPOSE_LOADER_IMPORT___;
module.exports = ___EXPOSE_LOADER_IMPORT___;

Edit:

I understand now, did not notice the if-statement there first. I added the override true and obviously they now look alike :)

J4v4Scr1pt commented

Well I'm not going to bother you more with this "issue", thanks for the discussion. Awesome help like always 😀!
Keep up your awesome work ppl! ✨

  • 👍1