Comments (10)
Back to the original point of this issue, it looks like npm seems to simply include optional dependencies under dependencies as well, so I'm going to close this issue.
Since I'm almost certainly going to split this project out (see #53), this issue should resolve itself as the current qrious
project will be only for browser, so the canvas
dependency will be moved to the new qrious-node
module (or whatever I choose to call it). If it still exists after that, I'll reach out to npm as there's clearly a bug then.
from qrious.
The moment i try to import qrious
i get this error which i guess is related to this issue.
How can i fix this?
from qrious.
@gimyboya Well, that depends. I'll need more context about how you're using QRious.
I see that you're importing the CommonJS version, so I suspect that you're developing in Node.js?
Currently, QRious has 2 distributions (3 if you include the minified version):
- CommonJS for the Node.js runtime
- UMD for the browser runtime
If you're developing for the Node.js runtime, you'll almost certainly need to install canvas
. If developing for the browser runtime, you should be using the UMD distribution which relies on native HTML5 canvas.
from qrious.
@neocotic I am currently developing on electron with node and I used both syntax commonjs and ES6 imports both returns the same error.
So is the only solution is to install canvas
?
from qrious.
@gimyboya CommonJS and ES6 imports (sort of, see note at bottom of comment) both only work for Node.js environments with the current setup. I am considering splitting this project up to simplify this whole thing (see #53) as I for one don't like the whole optional dependency situation with canvas
as a solution to browser's not requiring it.
I'm hoping to get around to it soon but I need to address the code base first as the file sizes are too big. Current thought is to do away with transpiling the code, as that seems better suited to applications than libraries when it comes to bundle sizes as I'm having to include babel-runtime
. But I'm getting carried away.
WRT to your question about whether you just need to install canvas
; I'm not familiar enough with electron to say for sure. I understand that electron allows you develop desktop apps based on Chromium and Node.js so I guess it just depends on where you plan on using QRious within your electron code base. The simplest answer is that, if HTMLCanvasElement
exists in the global scope and you can do document.createElement('canvas')
in the location of the code where you want to use QRious, you should use the browser version. Otherwise, it looks like you'll need to use the Node.js version. That said; if electron handles things totally differently. I could consider creating a plugin to support it after I've split up the code base.
Although I said earlier that ES6 imports work only for Node.js environments; I imagine you should be able to use it if you're specifically targetting the browser runtime file. For example;
import QRious from 'qrious/src/runtime/browser';
from qrious.
I only mentioned babel because, if I choose to drop that, I'll also be dropping support for ES6 modules. Source code would be written in ES5 using CommonJS and then bundled when needed (e.g. UMD for browser).
from qrious.
@neocotic Thanks for your answer i will try :
import QRious from 'qrious/src/runtime/browser';
and i will let you know the result also i just realised that i installed it with npm install --save --no-optional qrious
which is why it's breaking... if that don't work i will install it normally
from qrious.
nothing is working for node.... I tried this
import QRious from 'qrious/src/runtime/browser';
and i tried to do npm install --save qruios
still got the same problem and when i tried to install canvas
with npm install canvas
and npm install [email protected]
couldn't install it and it seems messed up many users are facing problems installing it so i doped it.
finally i solved it by using it just like i would in a browser... but this means that it will be painful to update it later
from qrious.
@gimyboya I'm confused again 😕
I still don't know how you plan on using it or what environment it is running in (i.e. is DOM available, or is it in Node.js module?). You could try importing the browser distribution:
import QRious from 'qrious/dist/umd/qrious';
But, again, I'm guessing here as I don't have enough information to help you.
If anything, you've helped me decide that I should indeed go ahead with splitting this project up into modules so that Node.js and browser implementations are separate. I'll try to get this done soon in a major release (since it's a breaking change) but only after I've sorted out how the code is written (which will probably be another major release as I'll most likely no longer be using ES6 modules any more, which could be a breaking change).
from qrious.
@neocotic Electron is a bit special it's like a browser with node so i can use both and electron-forge uses electron-compile under the hood so i can even extend the browser capacity to use ES6 syntax and sass or less or whatever directly on the fly.
If anything, you've helped me decide that I should indeed go ahead with splitting this project up into modules so that Node.js and browser implementations.
please go ahead
(which will probably be another major release as I'll most likely no longer be using ES6 modules any more, which could be a breaking change).
i would highly recommande that also because electron compile can not compile node_modules
folder and it will break it's browser if it meets a non supported ES6 syntax such as imports.
from qrious.
Related Issues (20)
- SVG generation HOT 4
- 生成二维码的字符串很长 HOT 2
- Demo broken HOT 4
- Unicode characters not working HOT 3
- 二维码能展示,但是用微信等扫描图片就扫描不出来 HOT 1
- Custom pattern QR Generator scanner and reader like facebook messenger?
- Qrious do not work when canvas read is disabled for privacy reasons HOT 2
- Is this project dead? HOT 1
- password protected qr code HOT 4
- padding not null toDataUrl Picture not centered HOT 3
- Get access to underlying modules? HOT 2
- How can I append QR code to already existing canvas element?
- Question about the LEVEL value HOT 2
- TypeError: Cannot set property 'QRious' of undefined HOT 3
- QR Code Structure HOT 1
- QRious not found since upgrade Chrome to latest version HOT 4
- The QR Generation is not working I dont know why. Heres the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'returnValues') at addproduct.php:152:124 at async addproduct.php:150:25
- compatibility with C sharp in VB 6
- License confusion
- What QR code format is used in the library?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qrious.