Borewit / music-metadata-browser

Browser version of music-metadata parser Supporting a wide range of audio and tag formats.
MIT License
240 stars 21 forks source link

Incompatibility with Webpack 5 #754

Closed RunRanger closed 2 years ago

RunRanger commented 2 years ago

When trying to use the music-metadata-browser with webpack 5 serveral errors will appear.

  1. Several *.js.map files can't be found anymore.
    Error warnings `Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\apev2\APEv2TagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\apev2\APEv2TagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\apev2\APEv2Token.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\apev2\APEv2Token.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\asf\AsfTagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\asf\AsfTagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\CaseInsensitiveTagMap.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\CaseInsensitiveTagMap.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\CombinedTagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\CombinedTagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\FourCC.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\FourCC.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\GenericTagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\GenericTagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\GenericTagTypes.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\GenericTagTypes.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\MetadataCollector.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\MetadataCollector.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\Util.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\common\Util.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\id3v1\ID3v1TagMap.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\id3v1\ID3v1TagMap.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\id3v2\ID3v22TagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\id3v2\ID3v22TagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\id3v2\ID3v24TagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\id3v2\ID3v24TagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\matroska\MatroskaTagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\matroska\MatroskaTagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\matroska\types.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\matroska\types.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\mp4\MP4TagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\mp4\MP4TagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\ogg\vorbis\VorbisTagMapper.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\ogg\vorbis\VorbisTagMapper.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\riff\RiffInfoTagMap.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\riff\RiffInfoTagMap.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\type.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\music-metadata\lib\type.js.map'

Failed to parse source map from 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\readable-web-to-node-stream\lib\index.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Programmierung\JS_React\delete\music-analyzer\node_modules\readable-web-to-node-stream\lib\index.js.map'`

This can be fixed temporarly by setting the enviroment variable GENERATE_SOURCEMAP=false

  1. Parsing won't be working anymore since buffer isn't supported anymore (?) https://stackoverflow.com/questions/67009449/after-upgrading-webpack-to-version-5-getting-run-time-error-buffer-is-not-defin

Uncaught (in promise) ReferenceError: Buffer is not defined at new MpegParser (MpegParser.js:218:1) at Function.loadParser (ParserFactory.js:148:1) at parse (ParserFactory.js:36:1) at Function.parse (ParserFactory.js:79:1) at Function.parseOnContentType (ParserFactory.js:55:1) at async parseReadableStream (index.js:31:1)

This error makes it nearly impossible to use this libary with the newest CRA of React or any other projects which rely on webpack5.

To reproduce the error you just have to setup the basic react-app and try to implement music-metadata-browser.

Borewit commented 2 years ago

There should not be any *.js.map files in music-metadata-browser. Should be bundles with pure JavaScript only. Looks like these files are coming from Webpack.

Does this help?: How to polyfill Buffer with Webpack 5

This is working example with REACT 17: https://github.com/Fuchsoria/testmetadata (borrowed from music-metadata issue #1028)

RunRanger commented 2 years ago

Thank you for your fast response.

I believe those *.js.map-files are dependencies of music-metadata.

Unfortunately I have to inject the configuration because of using the latest create-react-app. The example of Fuchsoria downgraded to react-scripts 4.0 instead of using the latest 5.0.

Borewit commented 2 years ago

There are no *.js.map present in music-metadata neither, restricted to .js & .d.ts.

Source maps (*.js.map) are used to correlate original source and target source. The target source never depends on source map files.

As soon as a I have time I will try to investigate the issue.

Borewit commented 3 months ago

You may try music-metadata ≥ 9 , which is guaranteed Buffer free.