source map errors with Create React App (CRA) / webpack

[pseidemann]

Have you read the FAQ and checked for duplicate open issues?
yes

If the problem is related to FairPlay, have you read the tutorial?
unrelated to fairplay

What version of Shaka Player are you using?
4.7.1

Can you reproduce the issue with our latest release version?
yes

Can you reproduce the issue with the latest code from main?
unknown

Are you using the demo app or your own custom app?
Create React App (CRA)

If custom app, can you reproduce the issue using our demo app?
n/a

What browser and OS are you using?
Vivaldi 6.5.3206.39, macOS 14.2

For embedded devices (smart TVs, etc.), what model and firmware version are you using?
n/a

What are the manifest and license server URIs?
n/a

What configuration are you using? What is the output of player.getConfiguration()?
n/a

What did you do?
setup

$ npx create-react-app shaka-debug
$ cd shaka-debug
$ npm install shaka-player

add this to line 1 in src/index.js:

import shaka from 'shaka-player';

start webpack

$ npm start

watch stdout

What did you expect to happen?
no source map errors in the console

What actually happened?
source map errors in the console

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/entries.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/entries.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/find.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/find.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/findindex.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/findindex.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/from.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/from.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/includes.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/includes.js'

[...]

[shaka-bot]

Closing due to inactivity. If this is still an issue for you or if you have further questions, the OP can ask shaka-bot to reopen it by including @shaka-bot reopen in a comment.

[pseidemann]

@shaka-bot reopen

[pseidemann]

hi @avelad,
what is the reason for changing the bug report to a question?

[pseidemann]

@shaka-bot change to bug

[avelad]

Try to use import * as shaka from 'shaka-player'

[pseidemann]

hi @avelad,
same problem. I've never encountered this issue with other node packages.
I think there must be something wrong how shaka is packaged for npm.

[joeyparrish]

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/entries.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/entries.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/find.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/find.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/findindex.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/findindex.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/from.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/from.js'

Failed to parse source map from 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/includes.js' file: Error: ENOENT: no such file or directory, open 'shaka-debug/node_modules/shaka-player/dist/src/com/google/javascript/jscomp/js/es6/array/includes.js'

This refers to sources that don't exist. These are polyfills built into the compiler.

[joeyparrish]

I'm not sure we can do much about that, either. The Closure compiler writes the sourcemap.

This should stop being an issue after we move to TypeScript. In the meantime, those seem like harmless warnings you can ignore.

[pseidemann]

hi @joeyparrish,
thanks for looking into it!
I'm wondering: why are these files referenced in the first place? I can't find these paths when I grep inside the node package.

I'm using shaka-player.ui and the file shaka-player.ui.map does exist. why would these other maps be needed?

[pseidemann]

correction: these paths do exist inside the *.map files. I think that's the mistake.

node_modules/shaka-player $ grep -r -l 'src/com' .
./dist/shaka-player.ui.debug.map
./dist/shaka-player.compiled.debug.map
./dist/shaka-player.compiled.map
./dist/shaka-player.ui.map

[joeyparrish]

correction: these paths do exist inside the *.map files. I think that's the mistake.

That's right. They exist only in the source code of the Closure Compiler, not in the player repo at all. The compiler synthesizes our sources together with ES6 polyfills, and the virtual paths of those polyfills show up in the map.

[pseidemann]

gotcha. one reason why this is maybe more than an annoyance, is that the CRA/webpack stack doesn't allow to disable source maps for single packages. so the only way to remove these warnings from stdout is to disable source maps entirely, which is not really desired while developing. stdout needs to be warning-free so compiler errors and warnings can be easily spotted while developing

[joeyparrish]

Sorry for the inconvenience. We won't be using the Closure Compiler forever. We'll update to modern tooling as soon as we have the bandwidth for it. Internal projects are taking more of our time right now.