{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/run-jsx-from-command-line/","result":{"data":{"markdownRemark":{"html":"

Here’s a simplified root .jsx file I’d like to run to generate some HTML from the command-line.

\n

index.jsx:

\n
// Use import statements:\nimport * as React from "react";\nimport { renderToStaticMarkup } from "react-dom/server";\n\n// Use JSX\nconst App = () => <div>The app</div>;\n\n// Use an API only available in node (and some more JSX):\nprocess.stdout.write(renderToStaticMarkup(<App />));
\n

I’ll use yarn to install those imported libs, which has the side-effect of creating a package.json file:

\n
yarn add react react-dom
\n

I want to run index.jsx directly, without having to transpile then execute as two separate steps. The script doesn’t look particularly special, but does use import and JSX, two features that cause problems as I’m not using a bundler.

\n

Executing node index.jsx gives this error (caused by the import statements):

\n
(node:58928) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
\n

I try creating a package.json and setting \"type\": \"module\", and re-run node index.jsx to get a different error (caused by file extension):

\n
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for /...
\n

Renaming index.jsx to index.js and executing with node index.js gives a different error:

\n
const App = () => <div>The app</div>;\n                  ^\nSyntaxError: Unexpected token '<'
\n

(I get the same error if I try changing the file extension to .mjs and running node index.mjs)

\n

At this point it feels like I’ve hit a brick wall with node, so need to look at alternative solutions.

\n

Before going any further I need to revert my changes: restoring the original filename of index.jsx, and removing the \"type\": \"module\" property from package.json.

\n

Setup babel-node

\n

I want to transpile-and-run in one step, which is exactly what babel-node is designed for.

\n
# Install all libs needed to run babel-node on a file containing JSX:\nyarn add -D @babel/core @babel/node @babel/preset-env @babel/preset-react
\n

Create a babel.config.json file:

\n
{\n  "presets": ["@babel/preset-env", "@babel/preset-react"]\n}
\n

Use npx babel-node index.jsx to run, and we can see the output:

\n
<div>The app</div>
\n

That’s it; it’s working! We can now iterate and experiment to our heart’s content.

\n","timeToRead":2,"frontmatter":{"title":"Running .jsx from the command-line","blurb":"A few setup steps to help write and run .jsx from the command-line","date":"2020-11-30T10:28:48.004Z","modified":null}}},"pageContext":{"slug":"/blog/run-jsx-from-command-line/","next":{"fields":{"slug":"/blog/run-tsx-from-command-line/"},"frontmatter":{"title":"Running .tsx from the command-line"}},"previous":{"fields":{"slug":"/blog/motd/"},"frontmatter":{"title":"Motivational MOTD"}}}},"staticQueryHashes":["1192980692"]}