does not provide an export named 'BrowserQRCodeReader' - javascript

I am using zxing-js/library library for qr code reading. I am facing a strange issue. The code for the qr scanning works in stackblitz online sample code, but not in my local environment.
I am getting this error in local environment on run time. The compilation proceeds successfully.
Uncaught SyntaxError: The requested module '/node_modules/#zxing/library/esm5/index.js' does not provide an export named 'BrowserQRCodeReader'
stackblitz link
github link

It seems like the zxing-js/library has issues with bundling.
I can reproduce the error by running npm run build, followed by npm run start.
Looks like some bundling would be required for you to get this working in the browser. See this post for more info
In the meantime, you can use npm run start:dev, and you will be able to do local development as expected.
Thanks #passle_ from the #open-wc team for helping with this.

In addition to jlengrands answer, npm start will start the owc-dev-server which does a minimal amount of work; it'll only resolve the bare modules.
The QR code library that you're trying to use uses commonjs, it'll need a little magic to be transformed so the browser can understand that code. The webpack-dev-server can do this for you, which you can run with npm run start:dev.

Related

Visual Studio Code - compile Javascript on save

The tutor of my video tutorial compiles javascript/react on save with his VS Code editor. Mine dont.
How can I config VS Code to do this?
Remark:
I find solution for typescript "Visual Studio Code - compile on save", but suggested solution does not work for me.
#added information:
the project is created with create.react-app. npm start opens chrome, and compilation errors are then shown in Chrome's DEV-Console, as noted by Shishani . My tutor has the code compiled on VS Code Terminal console. This offers a quick check of the code compilation before I go to webbrowser, to check for errors there, which seems to me much more intimidating with it's long callstacks.
If you create your React project with create-react-app, and then start it with npm start, it compiles automatically on save. Also, if it's not a React project, but just JS/HTML/CSS, you can open your project with the "Live Server" extension in VSCode, and it will update your page every time you save a file in your VSCode workspace.
You can even do like I do, and enable constant autosave, with the AutoSave: afterDelay setting in VSCode (if you dare), and then set the save delay to a super small number (mine is 2ms) so you don't even need to hit save anymore (go to File>Preferences>Settings>[Search "Auto Save"]).
If you have created react project using there official cli tool (create-react-app) then on saving js files it gets re-compile. This is because they are using webpack bundler behind the scene.
If you have created normal html or js files without any such cli tools then it won't work directly, You have to use some kind of bundler with dev-server support to do it.
Parcel! is a great bundler to use without configuration

how to make Visual Studio to auto complete npm modules methods?

I recently started following a course about Node JS. I have an issue on the VS Code being that autocomplete doesn't provide me with npm modules method suggestions. (See the example of the validator npm module). Some users report having such issues with VS code. Is there a way to solve this?
VS Code issue
Update
I noticed that VS Code suggests a default option which can be selected to get the package name. However, when running the code, I need to remove that or I will get errors.

Cypress E2E tests not running in CI mode on gitlab.com

Intro
We struggle to setup cypress in the CI runners of gitlab.com. We use the default blueprint from vue-cli to scaffold the project. We tried various of different gitlab.yml configurations. Currently we run out of CI minutes because we tried so many different combinations.
We tried different docker images (from here: https://github.com/cypress-io/cypress-docker-images/) and also followed the best practices from Crypress which we found here: https://gitlab.com/cypress-io/cypress-example-docker-gitlab/
We just had no luck getting it running. After spending hours of hours we are not sure if it's even possible to get Cypress running with the default setup from vue-cli.
We also created an issue on vue repo but it got closed, for reference you can see here: https://github.com/vuejs/vue/issues/10944
We filled out the default vue template for an issue report but since it's not a real "JavaScript" issue it was hard to properly fill it out. But we tried to provide as much information as possible. In the codepen you find our results. The HTML column is the output and the JS column is the YML file. I hope you can use this information somehow
Version
2.6.10
Reproduction link
https://codepen.io/usamahamed/pen/WNbpdPE
Steps to reproduce
this this the gitlab CI pipeline result including in codepen
it give this
CypressError: cy.visit() failed trying to load:
We failed looking for this file at the path:
/builds/room/web/room-ui/
Checking your .yaml file, I think your application is not running.
There is not log of application running
There is no build stage implementation
There is no start application task on the stage test-e2e > before_script
So I would like to suggest:
Check your build stage. Where you make your application start running?
Check your before_script, adding a step "npm ci" like this:
https://gitlab.com/cypress-io/cypress-example-docker-gitlab/blob/master/.gitlab-ci.yml
or
https://github.com/cypress-io/cypress-example-kitchensink/blob/master/.gitlab-ci.yml
You should also wait for your application to be running to start testing. You can use the wait-on module for this: https://github.com/jeffbski/wait-on

How to import wasm in web workers with webpack?

is it possible with webpack to import wasm in workers? In my normal js code i can import wasm like this:
import('../wasm/hello_world.wasm').then(module => {
console.log(module.add_one(9))
})
the same code does not work inside a worker. It returns the following error message:
Uncaught TypeError: Cannot read property './src/wasm/hello_world.wasm' of undefined
My webpack config is a combination of the webpack worker and wasm examples.
https://github.com/webpack/webpack/tree/master/examples/web-worker
https://github.com/webpack/webpack/tree/master/examples/wasm-simple
Based on the original question and the comment it looks like there is interest in solving this for both C / Emscripten and Rust compiled WASM.
I found the following article that explains very nicely how to achieve the results for Emscripten generated wasm here:
https://medium.com/#c.gerard.gallant/webassembly-web-workers-f2ba637c3e4a
As for Rust, I was going to come up with my own solution to this and provide a github repo to accompany my answer but during the course of my research I discovered that this developer had already solved the problem quite nicely already and kindly provided us with a ready to use template.
Thank you Victor Gavrish!
https://github.com/VictorGavrish/rust-wasm-worker-template
The steps in the README.md are a little out of date. I was able to build and run the project by doing the following:
clone the repo locally and execute:
cd rust-wasm-worker-template/www
npm install
npm run build
npm run start
Once webpack is finished bundling everything the dev site will be available from the URL provided on the console.
The important things to remember, in general, are the limitations of webworkers. There is no direct access to the dom or console, you have to handle passing messages from the worker to the main thread and then output to console. I mention this specifically because the OP used an example that called console.log...

main.js 404 error for MIT react-starter-kit

I'm using Kriasoft's react starter kit, and I built a small app. Everything runs perfectly locally w/ Browserify, however when I try running the production server at /build/server.js, the main.js file gives a 404 error in the Chrome console and some of my code breaks.
I've done some research and looked around -- I think it has something to do with Browserify, but I haven't been able to figure it out.
Can someone explain me what I'm doing wrong and what the root of the issue is? :)
This issue is addressed here. The build needs to be run with the "release" option when testing without Browsersync/HMR/React Transform.
npm run build -- --release && node build/server.js
Otherwise, the bundle will not build properly.

Categories

Resources