Description
React version: 16.13.1
Even though React's code (and other packages like ReactDOM) are wrapped in a IIFE, the code applies an entire script strict mode by placing a 'use strict' before any other statement:
https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.min.js
MDN mentions the "trap" of concatenating conflicting scripts strict mode when using the entire script strict mode, see here.
Steps To Reproduce
- Create a file with React's code at the top and concat an expression that causes a 'use strict' violation
- Load this file as a script tag
Link to code example: https://stackblitz.com/edit/use-strict-react?file=index.js
(Scroll to bottom of file to see the concatenated expressions)
The current behavior
'use strict' mode is enforced on all the concatenated code, even if it was not defined as 'strict'.
As a result, 'strict' violations at the other concatenated libraries will now throw errors (instead of silencing them), causing the script to stop execution.
The expected behavior
Global 'use strict' should not be used and should be replaced with function scope strict mode (which already exist in some cases of React IIFE bundles code wrappers, like react-dom.development
).
Misc info
- Always wrap UMD bundles in IIFEs #10933 - Always wrap UMD bundles in IIFEs
- https://github.com/facebook/react/blob/master/scripts/rollup/build.js#L104 -
closure
options for the build script statinglanguage_out: 'ECMASCRIPT5_STRICT'
- https://developers.google.com/closure/compiler/docs/api-ref -
ECMASCRIPT5_STRICT
explained (vsECMASCRIPT5
)