html5-qrcode: Warning | Error: ENOENT - Failed to parse source map | no such file or directory

Describe the bug Following the readme in the repository, I decided to implement the Html5Qrcode solution so that I can scan both in desktop and browser.

Prior to that I did setup a ReactJS example application (using create react app) to implement the QR Code reader solution.

To Reproduce Steps to reproduce the behavior:

Clone this repository
Use the terminal to run npm install
Run npm start
Wait for the app to start
See error in the Terminal

Expected behavior No warnings or errors when running the application.

Screenshots N/A

Desktop:

OS: macOS 11.6.2
Browser firefox
Version 95.0.2 (64-bit)

Smartphone:

Device: iPhone Xs
OS: iOS15.1
Browser firefox, safari
Version latest

Additional context

The application in the repository is also not showing the camera stream in the mobile phone’s browser

Logs

Compiled with warnings.

Failed to parse source map from '/path/to/react_app/src/node_modules/src/camera.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/camera.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/code-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/code-decoder.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/core.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/core.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/experimental-features.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/experimental-features.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/html5-qrcode-scanner.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/html5-qrcode-scanner.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/html5-qrcode.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/html5-qrcode.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/image-assets.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/image-assets.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/index.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/index.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/native-bar-code-detector.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/native-bar-code-detector.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/state-manager.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/state-manager.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/storage.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/storage.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/strings.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/strings.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/ui.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/ui.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/utils.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/src/zxing-html5-qrcode-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/zxing-html5-qrcode-decoder.ts'

Failed to parse source map from '/path/to/react_app/src/node_modules/html5-qrcode/third_party/index.js.map' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/html5-qrcode/third_party/index.js.map'

src/pages/Dashboard/Dashboard.tsx
  Line 1:10:  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

assets by status 2.6 MiB [cached] 2 assets
assets by path . 2.12 KiB
  asset index.html 1.67 KiB [emitted]
  asset asset-manifest.json 458 bytes [emitted]
cached modules 2.45 MiB (javascript) 31.3 KiB (runtime) [cached] 144 modules
./src/pages/Dashboard/Dashboard.tsx 4.14 KiB [built]

WARNING in ./node_modules/html5-qrcode/esm/camera.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/camera.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/camera.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode-scanner.js 7:0-41 313:6-40
 @ ./node_modules/html5-qrcode/esm/index.js 2:0-60 2:0-60
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/code-decoder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/code-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/code-decoder.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 29:0-49 125:22-37
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/core.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/core.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/core.ts'
 @ ./node_modules/html5-qrcode/esm/index.js 3:0-53 3:0-53
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/experimental-features.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/experimental-features.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/experimental-features.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 30:0-76 125:114-180
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/html5-qrcode-scanner.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/html5-qrcode-scanner.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/html5-qrcode-scanner.ts'
 @ ./node_modules/html5-qrcode/esm/index.js 2:0-60 2:0-60
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/html5-qrcode.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/html5-qrcode.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/html5-qrcode.ts'
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/image-assets.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/image-assets.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/image-assets.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode-scanner.js 4:0-68 619:31-48 641:29-44
 @ ./node_modules/html5-qrcode/esm/index.js 2:0-60 2:0-60
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/index.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/index.ts'
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/native-bar-code-detector.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/native-bar-code-detector.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/native-bar-code-detector.ts'
 @ ./node_modules/html5-qrcode/esm/code-decoder.js 2:0-69 11:76-111 12:25-48
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 29:0-49 125:22-37
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/state-manager.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/state-manager.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/state-manager.ts'
 @ ./node_modules/html5-qrcode/esm/index.js 4:0-58 4:0-58
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/storage.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/storage.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/storage.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode-scanner.js 5:0-49 51:36-56
 @ ./node_modules/html5-qrcode/esm/index.js 2:0-60 2:0-60
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/strings.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/strings.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/strings.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 27:0-47 195:17-57 199:15-61 442:23-71 445:21-71 716:25-58
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/ui.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/ui.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/ui.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode-scanner.js 6:0-44 242:26-46
 @ ./node_modules/html5-qrcode/esm/index.js 2:0-60 2:0-60
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/utils.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/utils.ts'
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 28:0-47 80:11-61 469:16-66
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/esm/zxing-html5-qrcode-decoder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/src/zxing-html5-qrcode-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/src/zxing-html5-qrcode-decoder.ts'
 @ ./node_modules/html5-qrcode/esm/code-decoder.js 1:0-71 14:25-48
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 29:0-49 125:22-37
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/html5-qrcode/third_party/zxing-js.umd.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/react_app/src/node_modules/html5-qrcode/third_party/index.js.map' file: Error: ENOENT: no such file or directory, open '/path/to/react_app/src/node_modules/html5-qrcode/third_party/index.js.map'
 @ ./node_modules/html5-qrcode/esm/zxing-html5-qrcode-decoder.js 1:0-53 6:68-95 6:134-159 6:200-227 6:268-295 6:336-363 6:405-433 6:478-509 6:551-579 6:616-639 6:679-705 6:744-769 6:810-837 6:877-903 6:949-981 6:1020-1045 6:1084-1109 6:1160-1197 9:9-14 17:14-51 34:27-50 35:30-68 36:27-45 36:50-71
 @ ./node_modules/html5-qrcode/esm/code-decoder.js 1:0-71 14:25-48
 @ ./node_modules/html5-qrcode/esm/html5-qrcode.js 29:0-49 125:22-37
 @ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
 @ ./src/pages/Dashboard/Dashboard.tsx 7:0-43 47:4-26 50:23-34
 @ ./src/App.tsx 9:0-52 34:40-49
 @ ./src/index.tsx 7:0-24 11:33-36

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 22
Comments: 21

Commits related to this issue

fix: suppresing source map errors https://github.com/mebjas/html5-qrcode/issues/396#issuecomment-1081661860 — committed to decentralized-identity/agent-explorer by simonas-notcat 2 years ago
feat: metamask did provider (#86) * feat: metamask did provider * fix: suppresing source map errors https://github.com/mebjas/html5-qrcode/issues/396#issuecomment-1081661860 — committed to decentralized-identity/agent-explorer by simonas-notcat 2 years ago
chore(release): :rocket: New version 1.4.0 [skip ci] # [1.4.0](https://github.com/veramolabs/agent-explorer/compare/v1.3.0...v1.4.0) (2022-06-23) ### Features * metamask did provider ([#86](https:/... — committed to decentralized-identity/agent-explorer by semantic-release-bot 2 years ago
Fix failed to parse sourcemap (issue #396) (#676) * fixed sourcemaps warnings * fixed tsconfig lib * enhance xcopy params — committed to mebjas/html5-qrcode by alvin883 a year ago
add .env for # https://github.com/mebjas/html5-qrcode/issues/396#issuecomment-1081661860 — committed to Ethan-Wu-juniper/Insight-Message by deleted user a year ago

Most upvoted comments

Solution found. Closing the issue.

Solution

Create a .env file in the same directory where your package.json is
Define the following variable GENERATE_SOURCEMAP=false as suggested by @d8corp

Thanks @d8corp and @nazebzurati

+46

raulra08 on Mar 29, 2022

.env

GENERATE_SOURCEMAP=false

+31

d8corp on Mar 27, 2022

Solution found. Closing the issue.

Solution

Create a .env file in the same directory where your package.json is

Define the following variable GENERATE_SOURCEMAP=false as suggested by @d8corp

Thanks @d8corp and @nazebzurati

Awesome!! thanks!!

happyeric77 on Mar 17, 2023

This issue is closed and resolved.

Sorry, but this doesn’t look like a proper solution. Preventing the use of sourcemaps is not a solution, but just hiding the initial problem. According to CRA, sourcemaps should be fixed in this package and those errors are this packages fault https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-1969071

titenis on Jul 19, 2022

Thanks. I want to know how it happened and how did adding GENERATE_SOURCEMAP=false solved the problem?

Sk47R on Apr 19, 2022

Please add devtool: 'source-map' in webpack.config.js and rebuild and publish the app to npm. you can use this module without error. thanks.

crisps0914 on Aug 24, 2023

Why create another issue? 😃 This one already mentions everything about the problem. I believe there are two ways to fix this:

disable sourcemap generation in this package
publish source code with dist files, so that source files could be actually found as the error suggests

titenis on Aug 1, 2022

Hello, @Gayatri19670 This issue is closed and resolved.

However, it seems that your post belongs somewhere else as you seem to be using a very different dependency in your learning project, the auth0 library. You might want to check if there are any similar issues raised in the past with the team who built that library. In case this is helpful, using the npm website one can find out who maintains a library. Good luck!

raulra08 on Apr 30, 2022