Issue with Rollup: `this` has been rewritten to `undefined`

[Lance Legel]

After following the instructions for running the web app from scratch, and trying to run npm run dev, I get the following error:

[0] (!) `this` has been rewritten to `undefined`
[0] https://rollupjs.org/guide/en/#error-this-is-undefined
[0] node_modules/iobuffer/lib-esm/text-encoding-polyfill.js
[0] 177:     : typeof self !== 'undefined'
[0] 178:         ? self
[0] 179:         : this);
[0]                ^
[0] 180: //# sourceMappingURL=text-encoding-polyfill.js.map

My system:

• Ubuntu 22.04
• NPM 9.6.4
• Node.js 16.19.0
• Rollup 2.79.1

Maybe this is something obvious to a more experienced web developer?

[Lance Legel]

Following here I suppressed the warning by adding into the rollup.config.js

export default {
  // ...
  onwarn(warning, warn) {
      if (warning.code === 'THIS_IS_UNDEFINED') return;
      warn(warning);
  },
  // ...
}

But the core issue is that the web app doesn't load locally and is unresponsive.

Here is the full print-out following npm run dev:

> gltf-sample-viewer-example@1.0.0 dev
> concurrently "rollup -c -w" "serve --listen 8000 dist"

[0] rollup v2.79.1
[0] bundles src/main.js → dist/GltfSVApp.js...
[1]  INFO  Accepting connections at http://localhost:8000
[0] copied:
[0]   index.html → dist/index.html
[0]   main.js → dist/main.js
[0]   ../assets/models/2.0 → dist/assets/models/2.0
[0]   ../assets/environments/Cannon_Exterior.hdr → dist/assets/environments/Cannon_Exterior.hdr
[0]   ../assets/environments/Colorful_Studio.hdr → dist/assets/environments/Colorful_Studio.hdr
[0]   ../assets/environments/Wide_Street.hdr → dist/assets/environments/Wide_Street.hdr
[0]   ../assets/environments/doge2.hdr → dist/assets/environments/doge2.hdr
[0]   ../assets/environments/ennis.hdr → dist/assets/environments/ennis.hdr
[0]   ../assets/environments/field.hdr → dist/assets/environments/field.hdr
[0]   ../assets/environments/footprint_court.hdr → dist/assets/environments/footprint_court.hdr
[0]   ../assets/environments/helipad.hdr → dist/assets/environments/helipad.hdr
[0]   ../assets/environments/neutral.hdr → dist/assets/environments/neutral.hdr
[0]   ../assets/environments/papermill.hdr → dist/assets/environments/papermill.hdr
[0]   ../assets/environments/pisa.hdr → dist/assets/environments/pisa.hdr
[0]   ../assets/environments/doge2.jpg → dist/assets/environments/doge2.jpg
[0]   ../assets/environments/ennis.jpg → dist/assets/environments/ennis.jpg
[0]   ../assets/environments/field.jpg → dist/assets/environments/field.jpg
[0]   ../assets/environments/footprint_court.jpg → dist/assets/environments/footprint_court.jpg
[0]   ../assets/environments/helipad.jpg → dist/assets/environments/helipad.jpg
[0]   ../assets/environments/neutral.jpg → dist/assets/environments/neutral.jpg
[0]   ../assets/environments/papermill.jpg → dist/assets/environments/papermill.jpg
[0]   ../assets/environments/pisa.jpg → dist/assets/environments/pisa.jpg
[0]   ../assets/images → dist/assets/images
[0]   ../assets/ui → dist/assets/ui
[0]   ../source/libs/libktx.js → dist/libs/libktx.js
[0]   ../source/libs/libktx.wasm → dist/libs/libktx.wasm
[0] dist/GltfSVApp.css 424 kB
[0] created dist/GltfSVApp.js in 8.9s

I'm running Visual Studio Code debugger with the following launch.js:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8000",
            "webRoot": "/app_web/dist",
            "skipFiles": ["<node_internals>/**"],
            "sourceMaps": true,
            "resolveSourceMapLocations": [
              "${workspaceFolder}/**",
              "!**/node_modules/**"
            ]
            
        }
    ]
}

Note that the fields for skipFiles, sourceMaps, and resolveSourceMapLocations were added to resolve debug messages: Could not read source map for file:///app_web/node_modules/ ... : ENOENT: no such file or directory

Now, Visual Studio and Chrome Developer Tools Console both don't show any errors or warnings, but web app doesn't load still. Maybe there is a verbose debug mode to gather more information on why things are not loading?

The loading bar is spinning in Chrome, indicating it never finishes/hangs somewhere. None of the buttons work.

[Ed Mackey]

I ran into this recently too. Note the root folder is the shared sample viewer code, NOT the web app. So to launch the dev server:

1. Run npm install in the root folder.
2. Run npm install in the app_web folder.
3. Run npm run dev in the app_web folder.

Perhaps the docs could be adjusted to make this more clear.

[Jarreddebeer]

I'm experiencing the same behaviour on mac, and the app_web locally is non-responsive in the browser (Chrome, Firefox and Chrome Canary). Some assets remain in a Pending state while loading (damagedHelmet and libktx.js, one or two others) and I receive the "This page is not responsive, do you want to wait?" prompt.

I am (and have) installed as per @emackey's suggestion, and the readme.

It's not clear to me if the non-responsiveness is caused from the issue in the printed message or not.

node v18.12.1
npm 8.19.2
rollup (installed locally in the package) v2.79.1