QRCode Not Working with React.Js
Question
I have just started coding with ReactJs and am trying to create my first QR Code using ReactJS. I am unable to do so. I have taken a sample of some code from GitHub and trying to implement but it's not working. I have also installed qrcode-react package with the following command:
npm install qrcode-react
and this is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="React.min.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
var React = require('react');
var QRCode = require('qrcode.react');
React.render(
<QRCode value="http://facebook.github.io/react/" />,
mountNode
);
</script>
<img src="qrcode.png" height="256" width="256"/>
</body>
</html>
What I see in chrome dev. tools:
referenceError: require is not defined
What am I missing? Any help will be appreciated.
2 answers
solution1
0 2015-12-14 10:06:06
Are you hosting the referenced scripts in an express server? Or are you using a bundling mechanism like webpack?
You would need to bundle the QRCode scripts and reference them to run the example. Take a look at how the Makefile is bundling all the necessary scripts together - https://github.com/zpao/qrcode.react . This URL by the way has a complete working example which you should analyze.
solution2
0 2015-12-16 07:13:41
1)opened node command editor and traversed to my folder.
2)executed the following command:
1)npm install browserify
2)npm install require
a folder by the name node_modules gets created with two sub folders namely .bin and .require
3)now i execute
browserify main.js -o bundle.js
4)Add the following tag to my HTML file
<script src='bundle.js'></script>
At Step 3 itself,i am getting the followng error
Error: Parsing file C:\Users\myfolder\projects\QRCode\main.js
: Unexpected token (1:0)
at Deps.parseDeps (C:\Users\myfolder\AppData\Roaming\npm\node_mod
ules\browserify\node_modules\module-deps\index.js:439:28)
at fromSource (C:\Users\myfolder\AppData\Roaming\npm\node_modules
\browserify\node_modules\module-deps\index.js:378:44)
at C:\Users\myfolder\AppData\Roaming\npm\node_modules\browserify\
node_modules\module-deps\index.js:372:17
at ConcatStream.<anonymous> (C:\Users\myfolder\AppData\Roaming\np
m\node_modules\browserify\node_modules\concat-stream\index.js:36:43)
at emitNone (events.js:72:20)
at ConcatStream.emit (events.js:166:7)
at finishMaybe (C:\Users\myfolder\AppData\Roaming\npm\node_module
s\browserify\node_modules\readable-stream\lib\_stream_writable.js:509:14)
at endWritable (C:\Users\myfolder\AppData\Roaming\npm\node_module
s\browserify\node_modules\readable-stream\lib\_stream_writable.js:519:3)
at ConcatStream.Writable.end (C:\Users\myfolder\AppData\Roaming\n
pm\node_modules\browserify\node_modules\readable-stream\lib\_stream_writable.js:
484:5)
at DuplexWrapper.onend (C:\Users\myfolder\AppData\Roaming\npm\nod
e_modules\browserify\node_modules\readable-stream\lib\_stream_readable.js:543:10
)
btw this is the code of my main.js library:-
<script type='text/jsx'>
var React = require('react');
var QRCode = require('qrcode.react');
React.render(
<QRCode value="http://facebook.github.io/react/" />,
mountNode
);
</script>
tx in advance
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.