MedinaGitHub
commented
2 years ago same issue i use Typescript and React
Closed raulra08 closed 2 years ago
MedinaGitHub
commented
2 years ago same issue i use Typescript and React
nazebzurati
commented
2 years ago Description
This is reproducible with initial javascript create react app and html5-qrcode version 2.2.0.
To reproduce:
npx create-react-app test command.npm i html5-qrcode.Apply the following patch.
diff --git a/src/App.js b/src/App.js
index 3784575..56169ba 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,22 @@
import logo from './logo.svg';
import './App.css';
+import { Html5QrcodeScanner } from "html5-qrcode"
+import { useEffect } from 'react';
function App() {
+
+ function onScanSuccess(decodedText, decodedResult) {
+ console.log(`Code matched = ${decodedText}`, decodedResult);
+ }
+ function onScanFailure(error) {
+ console.warn(`Code scan error = ${error}`);
+ }
+ useEffect(() => {
+ let html5QrcodeScanner = new Html5QrcodeScanner(
+ "reader", { fps: 10, qrbox: { width: 250, height: 250 } }, false);
+ html5QrcodeScanner.render(onScanSuccess, onScanFailure);
+ });
+
return (
<div className="App">
<header className="App-header">
@@ -17,6 +32,7 @@ function App() {
>
Learn React
</a>
+ <div id="reader" width="600px"></div>
</header>
</div>
);npm run start.Expected behaviour
No warning on compilation.
Desktop
Logs
Compiled with warnings.
Failed to parse source map from '/path/test/node_modules/src/camera.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/camera.ts'
Failed to parse source map from '/path/test/node_modules/src/code-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/code-decoder.ts'
Failed to parse source map from '/path/test/node_modules/src/core.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/core.ts'
Failed to parse source map from '/path/test/node_modules/src/experimental-features.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/experimental-features.ts'
Failed to parse source map from '/path/test/node_modules/src/html5-qrcode-scanner.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/html5-qrcode-scanner.ts'
Failed to parse source map from '/path/test/node_modules/src/html5-qrcode.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/html5-qrcode.ts'
Failed to parse source map from '/path/test/node_modules/src/image-assets.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/image-assets.ts'
Failed to parse source map from '/path/test/node_modules/src/index.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/index.ts'
Failed to parse source map from '/path/test/node_modules/src/native-bar-code-detector.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/native-bar-code-detector.ts'
Failed to parse source map from '/path/test/node_modules/src/state-manager.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/state-manager.ts'
Failed to parse source map from '/path/test/node_modules/src/storage.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/storage.ts'
Failed to parse source map from '/path/test/node_modules/src/strings.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/strings.ts'
Failed to parse source map from '/path/test/node_modules/src/ui.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/ui.ts'
Failed to parse source map from '/path/test/node_modules/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/utils.ts'
Failed to parse source map from '/path/test/node_modules/src/zxing-html5-qrcode-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/zxing-html5-qrcode-decoder.ts'
Failed to parse source map from '/path/test/node_modules/html5-qrcode/third_party/index.js.map' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/html5-qrcode/third_party/index.js.map'
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
assets by path static/ 2.53 MiB
asset static/js/bundle.js 2.52 MiB [emitted] (name: main) 1 related asset
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.91 KiB [emitted] 1 related asset
asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
cached modules 2.39 MiB (javascript) 31.3 KiB (runtime) [cached] 138 modules
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/test/node_modules/src/camera.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/code-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/core.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/core.ts'
@ ./node_modules/html5-qrcode/esm/index.js 3:0-53 3:0-53
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/experimental-features.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/html5-qrcode-scanner.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/html5-qrcode-scanner.ts'
@ ./node_modules/html5-qrcode/esm/index.js 2:0-60 2:0-60
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/html5-qrcode.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/html5-qrcode.ts'
@ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/image-assets.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/index.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/index.ts'
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/native-bar-code-detector.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/state-manager.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/state-manager.ts'
@ ./node_modules/html5-qrcode/esm/index.js 4:0-58 4:0-58
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/storage.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/strings.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/strings.ts'
@ ./node_modules/html5-qrcode/esm/html5-qrcode.js 27:0-47 190:17-57 194:15-61 437:23-71 440:21-71 725:25-58
@ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/ui.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/src/utils.ts'
@ ./node_modules/html5-qrcode/esm/html5-qrcode.js 28:0-47 80:11-61 464:16-66
@ ./node_modules/html5-qrcode/esm/index.js 1:0-45 1:0-45
@ ./src/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/src/zxing-html5-qrcode-decoder.ts' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 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/test/node_modules/html5-qrcode/third_party/index.js.map' file: Error: ENOENT: no such file or directory, open '/path/test/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/App.js 8:0-50 24:33-51
@ ./src/index.js 7:0-24 11:33-36
16 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.70.0 compiled with 16 warnings in 1656 msAs mentioned by alspdx in create-react-app repo's issue.
The problem is that the library's source files are being referenced but not being published, just the compiled code in the
distdirectory. I'm also having this issue withzod, there's an open issue about it and a PR to publish the source files which would fix the problem.
The content of camera.js.map (one of the files related to the warnings) is as follows:
{
"version": 3,
"file": "camera.js",
"sources": [
"../../src/camera.ts" // here
],
...
}This is caused by webpack's source-map-loader package and it's advisable to not publish source map.
{
"compilerOptions": {
"target": "es5",
"module": "ES2015",
"sourceMap": false, // here (original: true)
"moduleResolution": "Node",
...
}
}I've tried to disable source map in tsconfig.json (as shown above) and the warning still occurs when running npm run start but the warning reduced from 16 'Failed to parse source map' warnings to 1 warning when running npm run build. The 1 warning is as follows:
Failed to parse source map from '/path/test/node_modules/html5-qrcode/third_party/index.js.map' file: Error: ENOENT: no such file or directory, open '/path/test/node_modules/html5-qrcode/third_party/index.js.map'
d8corp
commented
2 years ago .env
GENERATE_SOURCEMAP=false
raulra08
commented
2 years ago Solution found. Closing the issue.
.env file in the same directory where your package.json isGENERATE_SOURCEMAP=false as suggested by @d8corp Thanks @d8corp and @nazebzurati
jephphcr
commented
2 years ago Thanks!
iamrosada
commented
2 years ago Thanks :)
Sk47R
commented
2 years ago Thanks. I want to know how it happened and how did adding GENERATE_SOURCEMAP=false solved the problem?
Gayatri19670
commented
2 years ago My Error:
Failed to parse source map from 'C:\Users\samir\Desktop\My Learning\sso-auth-react\node_modules\@auth0\auth0-react\dist\auth0-react.esm.js.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\samir\Desktop\My Learning\sso-auth-react\node_modules\@auth0\auth0-react\dist\auth0-react.esm.js.map'
raulra08
commented
2 years ago Hi @Sk47R I don't know how it happened. What is available though is: steps to reproduce and the source code which I guess you or someone you know could try to debug this issue using the source code.
re: the sourcemap flag, I'd encourage you to read/research about source maps, understanding what's under the hood might bring some answers.
raulra08
commented
2 years ago 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!
Gayatri19670
commented
2 years ago Thank you @raulra08
srinivas-gangaraju
commented
2 years ago Thanks @raulra08
titenis
commented
1 year ago 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
raulra08
commented
1 year ago Yes @titenis, I agree a better resolved it at its core than patched with a boolean value ;) This deserves an issue on its own so it can be tracked and done, what do you think? would you please create one?
titenis
commented
1 year ago Why create another issue? :) This one already mentions everything about the problem. I believe there are two ways to fix this:
happyeric77
commented
1 year ago Solution found. Closing the issue.
Solution
- Create a
.envfile in the same directory where yourpackage.jsonis- Define the following variable
GENERATE_SOURCEMAP=falseas suggested by @d8corpThanks @d8corp and @nazebzurati
Awesome!! thanks!!
crisps0914
commented
10 months ago 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.
pamelaotero
commented
9 months ago Solution found. Closing the issue.
Solution
- Create a
.envfile in the same directory where yourpackage.jsonis- Define the following variable
GENERATE_SOURCEMAP=falseas suggested by @d8corpThanks @d8corp and @nazebzurati
Thank you for help, It worked
sergeydushechkin
commented
7 months ago Also, to remove warnings only for this package, you can add the following rule to the webpack config:
{
test: /\.js$/,
enforce: 'pre',
use: [
{
loader: 'source-map-loader',
options: {
filterSourceMappingUrl: (url, resourcePath) => {
if (/html5-qrcode/i.test(resourcePath)) {
return false;
}
return true;
},
},
},
],
},
bingDBdu
commented
6 months ago Solution found. Closing the issue.
Solution
- Create a
.envfile in the same directory where yourpackage.jsonis- Define the following variable
GENERATE_SOURCEMAP=falseas suggested by @d8corpThanks @d8corp and @nazebzurati
it works. But I'm not too fond of the way to fix the problem. it made me add another file named .env. How can I explain it to my colleagues or follows? it's only to fix the problem. I have to write it down in my project README to make sure it can be understood.
Panther4u
commented
1 month ago Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/format.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/format.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/index.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/lang/en_US.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/lang/en_US.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/lang/zh_CN.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/lang/zh_CN.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/realtime.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/realtime.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/register.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/register.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/utils/date.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/utils/date.ts'
Failed to parse source map from '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/utils/dom.ts' file: Error: ENOENT: no such file or directory, open '/Volumes/Kavi/Projects/Project-Management-/client/node_modules/timeago.js/src/utils/dom.ts'
hardworkingmission
commented
4 weeks ago 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 It works for me
Describe the bug Following the readme in the repository, I decided to implement the
Html5Qrcodesolution 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:
npm installnpm startExpected behavior No warnings or errors when running the application.
Screenshots N/A
Desktop:
Smartphone:
Additional context
The application in the repository is also not showing the camera stream in the mobile phone's browser
Logs