I am trying to run some code that uses React and JSX using babel-node, which is part of the babel-cli. To the best of my knowledge the code is correct and I am using babel-node as expected, but hopefully someone can provide more insight.
The following error is generated.
(!535)-> babel-node server.js
/Users/eprouty/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:520
throw err;
^
SyntaxError: /Users/ep/git/dgcastle/server.js: Unexpected token (60:51)
58 | res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
59 | } else if (renderProps) {
> 60 | var html = ReactDOM.renderToString(<RoutingContext {...renderProps} />);
| ^
61 | var page = jade.renderFile('views/index.jade', {html: html});
62 | res.status(200).send(page);
63 | } else {
at Parser.pp.raise (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/util.js:91:8)
at Parser.pp.parseExprAtom (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:507:12)
at Parser.pp.parseExprSubscripts (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:260:19)
at Parser.pp.parseMaybeUnary (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:240:19)
at Parser.pp.parseExprOps (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:171:19)
at Parser.pp.parseMaybeConditional (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:153:19)
at Parser.pp.parseMaybeAssign (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:120:19)
at Parser.pp.parseExprListItem (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:966:16)
at Parser.pp.parseCallExpressionArguments (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:336:20)
I can provide additional code snippets if that would help but the offending block is already included in the error message. Thanks for any insight you can provide!
If you are running version 6.x of babel, you need to use the babel react preset (as stated here).
If you are using babel 6.x, you will need to install the relevant preset/plugins. To get started, you can run npm install -g babel babel-preset-react and then run babel --presets react --watch src/ --out-dir lib/. For more information: check out the babel 6 blog post
Related
I´m trying to dynamically import webpack in Node.js
if (condition) {
import('webpack').then(webpack => webpack);
}
However in my terminal I see the following error:
C:\Users\myUser\react\node_modules\#babel\core\lib\transformation\normalize-file.js:209
throw err;
^
SyntaxError: C:\Users\myUser\react\server\index.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (23:3):
19 |
20 | if (condition) {
> 21 | import('webpack').then(webpack => webpack);
| ^
22 |
Add #babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
I have #babel/plugin-syntax-dynamic-import installed and in my .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties"
]
}
I even tried to add it to the webpack conf file under the rule for .js with loader "babel-loader".
I´m trying to avoid CmJS
const webpack = require('webpack');
In any case I receive the same error and I cannot find a solution. Did anyone go through this? Thanks
add plugins: ["dynamic-import-webpack"] to .babelrc
and also install plug $npm i babel-plugin-dynamic-import-webpack --D
I'm running node 4.6.1 and I'd like to get es6/7/8 syntax in the node console as I can get with Babel. I'm able to compile scripts fine with babel, for instance by running
babel-node ./index.js --presets es2015,stage-0
but I could not find how to get such syntax support in the console. For instance the node console doesn't understand things like
const filter = {...{ foo: 1 }, ...{ bar: 4 } }
or all the async/await things.
When running scripts with npm, npm loads scripts under node_modules/.bin that are not part of the PATH. So running
$ babel-node --presets es2015,stage-0
will fail with
-bash: babel-node: command not found
but
$ node_modules/.bin/babel-node --presets es2015,stage-0
will work just fine. I'll get a node console where I can do:
> const filter = {...{ foo: 1 }, ...{ bar: 4 } }
> filter
{ foo: 1, bar: 4 }
> const a = async () => {}
I'm trying to compile the very simplest React tutorial using browserify. I've run:
sudo npm install browserify
Then as stated here http://babeljs.io/docs/setup/#browserify
sudo npm install --save-dev babelify
Then I have my file js/script.jsx
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
And I'm running from the folder
browserify js/script.jsx -t babelify --outfile bundle.js
But then this happens:
djave at djaves-iMac-3 in /Volumes/djave/react
$ browserify js/script.jsx -t babelify --outfile bundle.js
SyntaxError: /Volumes/djave/react/js/script.jsx: Unexpected token (4:11)
2 | var HelloMessage = React.createClass({
3 | render: function() {
> 4 | return <div>Hello {this.props.name}</div>;
| ^
5 | }
6 | });
7 |
What am I doing wrong? This is literally my first step into this area so it may be I've missed a pretty major step.
More errors (although I suspect this won't help too much!)
at Parser.pp.raise (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1425:13)
at Parser.pp.unexpected (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:2907:8)
at Parser.pp.parseExprAtom (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:754:12)
at Parser.pp.parseExprSubscripts (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:509:19)
at Parser.pp.parseMaybeUnary (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:489:19)
at Parser.pp.parseExprOps (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:420:19)
All fixed, thanks to #azium.
First get the React preset: http://babeljs.io/docs/plugins/preset-react/
npm install babel-preset-react
Next, create a file called .babelrc in the root of your project, and put in it the following:
{
"presets": ["react"]
}
Then do the
browserify js/script.jsx -t babelify --outfile bundle.js
That compiles everything, and as an extra to make sure that react and react-dom are included (as shown here) you can run the following:
sudo npm install --save react react-dom
I'm cloning my friend's repo on github
https://github.com/feijihn/todolist_react
with web app built on node.js + react.js + material.ui
then i'm installing requirements with npm:
npm i -S -d
after that i launch server
node server.js
and everything works perfectly, but then i make some changes and try to pack a new bundle.js thru webpack it gives me this error:
webpack --display-detailed-errors
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.12.12
Time: 1294ms
+ 1 hidden modules
ERROR in ./public/scripts/index.jsx
Module build failed: SyntaxError: /home/ignatif/todolist_react/public/scripts/index.jsx: Unexpected token (91:3)
89 | render: function() {
90 | return (
91 | <Paper className="paperE" zDepth={5}>
| ^
92 | <AppBar
93 | title="Just To-Do. No shit"
94 | iconClassNameRight="muidocs- icovigation-expand-more"/>
at Parser.pp.raise (/home/ignatif/todolist_react/node_modules/babylon/index.js:1425:13)
at Parser.pp.unexpected (/home/ignatif/todolist_react/node_modules/babylon/index.js:2907:8)
at Parser.pp.parseExprAtom (/home/ignatif/todolist_react/node_modules/babylon/index.js:754:12)
at Parser.pp.parseExprSubscripts (/home/ignatif/todolist_react/node_modules/babylon/index.js:509:19)
at Parser.pp.parseMaybeUnary (/home/ignatif/todolist_react/node_modules/babylon/index.js:489:19)
at Parser.pp.parseExprOps (/home/ignatif/todolist_react/node_modules/babylon/index.js:420:19)
at Parser.pp.parseMaybeConditional (/home/ignatif/todolist_react/node_modules/babylon/index.js:402:19)
at Parser.pp.parseMaybeAssign (/home/ignatif/todolist_react/node_modules/babylon/index.js:365:19)
at Parser.pp.parseParenAndDistinguishExpression (/home/ignatif/todolist_react/node_modules/babylon/index.js:827:26)
at Parser.pp.parseExprAtom (/home/ignatif/todolist_react/node_modules/babylon/index.js:713:19)
at Parser.pp.parseExprSubscripts (/home/ignatif/todolist_react/node_modules/babylon/index.js:509:19)
at Parser.pp.parseMaybeUnary (/home/ignatif/todolist_react/node_modules/babylon/index.js:489:19)
at Parser.pp.parseExprOps (/home/ignatif/todolist_react/node_modules/babylon/index.js:420:19)
at Parser.pp.parseMaybeConditional (/home/ignatif/todolist_react/node_modules/babylon/index.js:402:19)
at Parser.pp.parseMaybeAssign (/home/ignatif/todolist_react/node_modules/babylon/index.js:365:19)
at Parser.pp.parseExpression (/home/ignatif/todolist_react/node_modules/babylon/index.js:329:19)
at Parser.pp.parseReturnStatement (/home/ignatif/todolist_react/node_modules/babylon/index.js:2106:26)
at Parser.pp.parseStatement (/home/ignatif/todolist_react/node_modules/babylon/index.js:1894:19)
at Parser.pp.parseBlockBody (/home/ignatif/todolist_react/node_modules/babylon/index.js:2294:21)
at Parser.pp.parseBlock (/home/ignatif/todolist_react/node_modules/babylon/index.js:2275:8)
at Parser.pp.parseFunctionBody (/home/ignatif/todolist_react/node_modules/babylon/index.js:1130:22)
at Parser.pp.parseFunction (/home/ignatif/todolist_react/node_modules/babylon/index.js:2406:8)
at Parser.pp.parseFunctionExpression (/home/ignatif/todolist_react/node_modules/babylon/index.js:764:17)
at Parser.pp.parseExprAtom (/home/ignatif/todolist_react/node_modules/babylon/index.js:726:19)
at Parser.pp.parseExprSubscripts (/home/ignatif/todolist_react/node_modules/babylon/index.js:509:19)
at Parser.pp.parseMaybeUnary (/home/ignatif/todolist_react/node_modules/babylon/index.js:489:19)
at Parser.pp.parseExprOps (/home/ignatif/todolist_react/node_modules/babylon/index.js:420:19)
at Parser.pp.parseMaybeConditional (/home/ignatif/todolist_react/node_modules/babylon/index.js:402:19)
at Parser.pp.parseMaybeAssign (/home/ignatif/todolist_react/node_modules/babylon/index.js:365:19)
at Parser.pp.parseObjPropValue (/home/ignatif/todolist_react/node_modules /babylon/index.js:1021:99)
I have material-ui installed and i can't find any dependency problems myself.
My friend's webpack packs everything nicely and don't give any error. What can cause this?
The repo you provided work if you type :
npm install
webpack
node server.js
I have installed babel with npm install -g babel-cli and tested it with babel-node --version. The output is 6.2.0.
Then I tested it like below.
C:\Users\xuhang\Documents\work\CDT\cdt3.0\babel>babel-node
> console.log([1,2,3].map(x => x * x))
repl:1
console.log([1, 2, 3].map(x => x * x));
^^
SyntaxError: Unexpected token =>
at Object.exports.runInThisContext (vm.js:73:16)
at _eval (C:\Users\xuhang\AppData\Roaming\npm\node_modules\babel-cli\lib\_b
abel-node.js:102:26)
at REPLServer.replEval (C:\Users\xuhang\AppData\Roaming\npm\node_modules\ba
bel-cli\lib\_babel-node.js:187:14)
at bound (domain.js:254:14)
at REPLServer.runBound [as eval] (domain.js:267:12)
at REPLServer.<anonymous> (repl.js:279:12)
at REPLServer.emit (events.js:107:17)
at REPLServer.Interface._onLine (readline.js:214:10)
at REPLServer.Interface._line (readline.js:553:8)
at REPLServer.Interface._ttyWrite (readline.js:830:14)
>
Could you tell me what's wrong with console.log([1,2,3].map(x => x * x))?
Another simliar issue is below. It's so hard for me to learn babel, the initial test all failed.
What's inside the directory source is the example.js within the official sample provided by React below.
https://facebook.github.io/react/docs/tutorial.html
C:\Users\xuhang\Documents\work\CDT\cdt3.0\babel>babel source/ --watch --out-dir
build/
SyntaxError: source/example.js: Unexpected token (17:6)
15 | var rawMarkup = marked(this.props.children.toString(), {sanitize: tru
e});
16 | return (
> 17 | <div className="comment">
| ^
18 | <h2 className="commentAuthor">
19 | {this.props.author}
20 | </h2>
You've forgotten to create a .babelrc file. Pre 6.x version of Babel contained a few presets for Babel to transpile code out of the box, in 6.x it does not so you need to install the presets you want and in your case you need two: babel-preset-es2015 and babel-preset-react.
After you've installed them both npm install babel-preset-es2015 babel-preset-react add them to your .babelrc file
{
"presets": ["es2015", "react"]
}