Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

output.globalObject set to this is undefined when "use strict" #8608 #11069

Comments

@IAMSBLOL
Copy link

IAMSBLOL commented Jun 8, 2021

Describe the bug

#7742 by @kentcdodds changed the webpack config for output.globalObject to be this instead of webpack's default window, so that webpack chunk loading would work in Workers.

Unfortunately, making the assumption that this is the global object isn't always safe because if the code is concatenated or otherwise wrapped into code that has "use strict" strict mode will also apply to inner functions within that scope, and this will be undefined in some cases, most notably in the webpack runtime chunk/code since itself contains code that executes inside of an IIFE and so this === undefined

I admit, this is very much an edge case and outside the normal usage of CRA. But if there's a fairly trivial way for us to solve this, it would notably help my use case because I cannot control the code provided to me--I would have to no longer support users who use CRA unless they ejected so that they could change that webpack config option. That's not your problem of course lol just clarifying why I'm checking in.

Wanted to at least open the dialog and see if someone had thoughts on a simple solution?

Did you try recovering your dependencies?
n/a

Which terms did you search for in User Guide?
globalObject, runtime, webpack, etc.

Environment

n/a

Steps to reproduce
Build a CRA project
Concatenate one or more of the chunks together, with the runtime.
Put "use strict" at the the top of the code.
Run the code in any supported JS env.
See error of this being undefined due to strict mode.
Expected behavior
Something other than this is used. I'm not immediately sure, since globalThis isn't supported in IE (which CRA supports) and forcing folks to include a polyfill is presumably off the table.

Actual behavior

TypeError: Cannot read property 'webpackJsonpsomeproject' of undefined because this is undefined under strict mode.

Reproducible demo
Non-trivial to provide, but if required I can consider making one. I think those who are familiar with how CRA + webpack builds work will likely know immediately what I'm referring to, but maybe not hehe 😄

@IAMSBLOL
Copy link
Author

IAMSBLOL commented Jun 8, 2021

webpack debug
webpack debug

ok,this is the solutions, but i do not thing it is a good job.

@IAMSBLOL
Copy link
Author

IAMSBLOL commented Jun 8, 2021

cra webapck config is :
globalObject: 'this',
if use strict, "this" will be undefined.

But I found that your compiled code of runtimeChunk didn't use strict mode,How did you do it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment