glTF-Sample-Viewer
glTF-Sample-Viewer copied to clipboard
Issue with Rollup: `this` has been rewritten to `undefined`
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?
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
:
> [email protected] 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.
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:
- Run
npm install
in the root folder. - Run
npm install
in theapp_web
folder. - Run
npm run dev
in theapp_web
folder.
Perhaps the docs could be adjusted to make this more clear.
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