Deno: Bundling a script which imports ReactDOM throws "react_js_2 is undefined" error on web browsers

Created on 19 Jul 2020 · 6Comments · Source: denoland/deno

Although I previously submitted an issue, #6687, which is seemingly similar to this new one, but I submit this new issue because I think that this issue stems from quite different cause to the old one.

Problem

deno bundle and serving web contents, as below, do not throw any errors in terminal, but when I visit the page it throws an error, Uncaught TypeError: react_js_2 is undefined, in web browser's console.

$ deno bundle -c ./tsconfig.json ./index.tsx > ./dist/index.js
Bundle file:///Users/deneb/Desktop/test-deno/index.tsx
$ deno run --allow-net --allow-read https://deno.land/std/http/file_server.ts ./dist
HTTP server listening on http://0.0.0.0:4507/

I think that Deno does not bundle index.tsx correctly due to ReactDOM depends React internally and due to the bundler does not leave the dependencies of ReactDOM library correctly. You might figure out what this means by reading the rest of this issue.

Code

index.tsx:

import React from "https://cdn.pika.dev/@pika/react@^16.13.1";
import ReactDOM from "https://cdn.pika.dev/@pika/react-dom@^16.13.1";

ReactDOM.render(<div>Hi, React!</div>, document.getElementById("root"));

tsconfig.json:

{
    "compilerOptions": {
        "lib": [
            "dom",
            "esnext"
        ],
        "target": "esnext",
        "noImplicitAny": false
    }
}

dist/index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="./index.js"></script>
</body>

</html>

My workaround

In dist/index.js, to replace /-/[email protected]/dist=es2019/react.js to https://cdn.pika.dev/-/@pika/[email protected]/dist=es2019/react, save and reload the web page makes it works, showing Hi, React! and throwing no errors.
Since many and many lines (about 5200 lines) are there, I show you some relevant lines, especially focusing on usage of System.register(), as follows:

...
L99: })();
L100:
L101: System.register("https://cdn.pika.dev/-/@pika/[email protected]/dist=es2019/react", [], function (exports_1, context_1) {
L102:    "use strict";
...
L519: });
L520: System.register("https://cdn.pika.dev/@pika/react@^16.13.1", ["https://cdn.pika.dev/-/@pika/[email protected]/dist=es2019/react"], function (exports_2, context_2) {
L521:    "use strict";
...
L545: });
L546: System.register("https://cdn.pika.dev/-/@pika/[email protected]/dist=es2019/react-dom", ["/-/[email protected]/dist=es2019/react.js"], function (exports_3, context_3) {
L547:    "use strict";
...
L5176: });
L5177: System.register("https://cdn.pika.dev/@pika/react-dom@^16.13.1", ["https://cdn.pika.dev/-/@pika/[email protected]/dist=es2019/react-dom"], function (exports_4, context_4) {
L5178:     "use strict";
...
L5202: });
L5203: System.register("file:///Users/deneb/Desktop/test-deno/index", ["https://cdn.pika.dev/@pika/react@^16.13.1", "https://cdn.pika.dev/@pika/react-dom@^16.13.1"], function (exports_5, context_5) {
L5204:     "use strict";
...

Changing only the 546th line to as above makes it works well.

Environment

deno 1.2.0
v8 8.5.216
typescript 3.9.2

Thanks.

bug swc

Source

denebu

All 6 comments

I would suggest that you try importing ReactDOMServer:

import ReactDOMServer from "https://dev.jspm.io/[email protected]/server";

joeGermany on 19 Jul 2020

I would suggest that you try importing ReactDOMServer:

import ReactDOMServer from "https://dev.jspm.io/[email protected]/server";

Hello, @joeGermany.
I would like to use client-side rendering, not to render in server. Thanks anyway.

denebu on 19 Jul 2020

@denebu
If that is the case, I have another workaround you could try.
In the HTML page, include the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>
<body>  
    <div id="root"></div>

    <!-- React Links and Dependancies -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>

    <!-- Babel compiller -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js" integrity="sha512-pBSlhNUvB+td6sjW1zmR6L7c7kVWR4octUPl4tfHmzO63424nxta8aLmficEcAAswQmRqTiToi63AazDurj/Sg==" crossorigin="anonymous" ></script>

    <!-- My own Components  -->  
    <script type="text/babel" src="/App.js" ></script>

    <!-- Main entry to program -->
    <script type="text/babel" src="/index.js" ></script>
</body>
</html>

The index.js (not jsx) simply includes:
ReactDOM.render(<App />, document.getElementById('root'));

In my case, I add all my remaining code in the App.js and create components which I can reference there. For example:

const App = (props) => {
    return (
        <div>
             <h1>Hello World</h1>
        </div>
    );
}

In the server.ts:

import { Application, send, Context, RouterContext, Router } from "./deps.ts";
import { staticFileMiddleware } from './staticFileMiddleware.ts';

const app = new Application();
const router = new Router();

app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFileMiddleware);

router.get('/', async (context) => {
    await send(context, context.request.url.pathname, {
        root: `${Deno.cwd()}/public`,
        index: "index.html",
    });
});

app.addEventListener('listen', ({hostname, port, secure}) => {
    console.log(`Listening on ${secure ? 'https://' : 'http://'}${hostname || 'localhost'}:${port}`)
});

app.addEventListener('error', e => {
    console.log(e.error);
});

await app.listen({port: 8000});

The staticFileMiddleware is just a simple file renderer using oak's send functionality.

Please note that you do not have use the import statement (ex: import Component from './file') because you should reference it in the HTML file.

You can run using: deno --allow-read --allow-net server.ts

joeGermany on 19 Jul 2020

Is this the same issue I have been having? i found that whenever I add compiler hints for the types the import is undefined in the bundle. made this example to make sure I wasn't going insane https://github.com/mcbobby123/denoImportBugExample

mcbobby123 on 23 Jul 2020

The specific issue that lead to this is "resolved" in Deno 1.5, but there are other issues with Deno bundling that cause the emitted bundle to not be valid. Using the following code:

// @deno-types="https://denopkg.com/soremwar/deno_types/react/v16.13.1/react.d.ts"
import React from "https://cdn.skypack.dev/react";
// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://cdn.skypack.dev/react-dom";

ReactDOM.render(<div>Hi, React!</div>, document.getElementById("root"));

When I load it in the browser, I get:

Uncaught TypeError: objectAssign is not a function
    at test.js:57

Which appears to be a use before declaration issue where the dependency analysis is a bit off when determining the bundle (cc/ @kdy1), because it gets defined on line 410, but at the point where line 57 runs, the variable has been hoisted but not initialised.

kitsonk on 9 Nov 2020

😕1 👍1

The specific issue that lead to this is "resolved" in Deno 1.5, but there are other issues with Deno bundling that cause the emitted bundle to not be valid. Using the following code:
// @deno-types="https://denopkg.com/soremwar/deno_types/react/v16.13.1/react.d.ts"
import React from "https://cdn.skypack.dev/react";
// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://cdn.skypack.dev/react-dom";

ReactDOM.render(<div>Hi, React!</div>, document.getElementById("root"));
When I load it in the browser, I get:
Uncaught TypeError: objectAssign is not a function
    at test.js:57
Which appears to be a use before declaration issue where the dependency analysis is a bit off when determining the bundle (cc/ @kdy1), because it gets defined on line 410, but at the point where line 57 runs, the variable has been hoisted but not initialised.

Yes, I just encountered this on Deno 1.5.x