Browserify Error: Parsing file, Unexpected token
Looking through the main.js file of react-spin https://github.com/thomasboyt/react-spin/blob/master/src/main.js, it does indeed contain JSX syntax, namely:
return (
<span ref="container" />
);
That is leading to the parse error when browserify is parsing that file. You could use a transformer such as https://www.npmjs.com/package/reactify in conjunction with browserify to transform the JSX into vanilla JS.
EDIT: Reactify example
As it is a required node_module that also needs to be transformed, you will need to add the browserify/reactify transform option to the package.json of react-spin
. Go to the react-spin
folder and copy this into the package json, beneath "main"
:
"browserify": {"transform": ["reactify"]},
Then try run the browserify command once again
ApathyBear
Updated on June 04, 2022Comments
-
ApathyBear almost 2 years
I am trying to use this npm module with browserify.
When I run
$ browserify build/widget.js -o bundle.js
, I recieve the following error:Error: Parsing file /Users/nir/browsewidget/node_modules/react-spin/src/main.js: Unexpected token (29:6) at Deps.parseDeps (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:436:28) at fromSource (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:375:44) at /usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:369:17 at ConcatStream.<anonymous> (/usr/local/lib/node_modules/browserify/node_modules/concat-stream/index.js:36:43) at ConcatStream.emit (events.js:129:20) at finishMaybe (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14) at endWritable (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3) at ConcatStream.Writable.end (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5) at DuplexWrapper.onend (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10) at DuplexWrapper.g (events.js:199:16)
Note: the file
build/widget.js
is not JSX, it has been built using the JSX compiler.Why would I be receiving unexpected token?
Edit based on snozza's answer:
I have installed
npm install reactify --save
.Then I ran
% browserify -t reactify build/widget.js
Which gave the-bash: fg: %: no such job
Then I tried
browserify -t reactify build/widget.js
, which gave:Error: Parsing file /Users/nir/browsewidget/node_modules/react-spin/src/main.js: Unexpected token (29:6) at Deps.parseDeps (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:436:28) at fromSource (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:375:44) at /usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:369:17 at ConcatStream.<anonymous> (/usr/local/lib/node_modules/browserify/node_modules/concat-stream/index.js:36:43) at ConcatStream.emit (events.js:129:20) at finishMaybe (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14) at endWritable (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3) at ConcatStream.Writable.end (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5) at DuplexWrapper.onend (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10) at DuplexWrapper.g (events.js:199:16)
Here is a snippet of my
build/widget.js
as requested:var React =require('react'); var Spinner = require('react-spin') var Loading = React.createClass({displayName: "Loading", render: function() { var spinCfg ={ lines: 5 // The number of lines to draw , length: 5 // The length of each line , width: 42 // The line thickness , radius: 21 // The radius of the inner circle , scale: 1 // Scales overall size of the spinner , corners: 1 // Corner roundness (0..1) , color: '#000' // #rgb or #rrggbb or array of colors , opacity: 0.25 // Opacity of the lines , rotate: 0 // The rotation offset , direction: 1 // 1: clockwise, -1: counterclockwise , speed: 1 // Rounds per second , trail: 60 // Afterglow percentage , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS , zIndex: 2e9 // The z-index (defaults to 2000000000) , className: 'spinner' // The CSS class to assign to the spinner , top: '50%' // Top position relative to parent , left: '50%' // Left position relative to parent , shadow: false // Whether to render a shadow , hwaccel: false // Whether to use hardware acceleration , position: 'absolute' // Element positioning }; return React.createElement(Spinner, {config: spinCfg}) } }) //...etc...
Any ideas?
-
ApathyBear almost 9 yearsI have updated my question based on your answer, take a look if you can.
-
ApathyBear almost 9 yearsI can't share everything, but I have added a snippet.
-
ApathyBear almost 9 yearsAfter applying the line to the package.json of react-spin I typed
browserify -t reactify build/widget.js
and I get:Error: Cannot find module 'react' from '/Users/nir/browsewidget/build'
-
ApathyBear almost 9 yearsDisregard that, just had to
npm install react --save
as well. Thank you!