mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
5c9d8551c6
When use externalType: `global` or `script` under utoopack(turbopack
only use esm or cjs external): like externalType is global , and the
external package is react.
The generate external module code like:
```ts
263: ((__turbopack_context__) => {
"use strict";
const mod = globalThis["react"];
__turbopack_context__.n(mod);
}),
```
The real function of runtime code `__turbopack_context__.n` is
`exportNamespace`, its code as follows:
```ts
module.exports = module.namespaceObject = namespace
```
And when we import the module as following:
```ts
import react from "react";
console.log(react.version);
```
it will be bundled as:
```ts
var __TURBOPACK__imported__module__263__ = __turbopack_context__.i(263);
console.log(__TURBOPACK__imported__module__263__["default"]);
```
The `__turbopack_context__i` is esmImport, it will return the module
when the module contains `namespaceObject` without `interopEsm`:
```ts
function esmImport() {
const module = getOrInstantiateModuleFromParent(id, this.m)
// any ES module has to have `module.namespaceObject` defined.
if (module.namespaceObject) return module.namespaceObject
return interopEsm();
}
```
So the following case if we use a react umd module(which doesn't have a
`default export`) as our external package, code
`console.log(__TURBOPACK__imported__module__263__["default"]);` will
output `undefined`(which webpack can output the right version).
I just change export wrapper the externalType: global and script
here(which now only consumed by utoopack), so the esmImport will execute
`interopEsm` function here to make our code work fine.
We test the case under utoopack and here is our pr:
https://github.com/umijs/mako/pull/2097/files.
---------
Co-authored-by: Niklas Mischkulnig <[email protected]>