Running CLI scripts from create-react-app

Question

In a new app created with create-react-app, how can I run a command-line script? The following fails:

$ npx create-react-app foo
[snip]
$ cd foo/
$ echo "import {App} from './src/App.js';" > test.js
$ node test.js
/private/tmp/foo/test.js:1
import {App} from './src/App.js';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
    at internal/main/run_main_module.js:17:11

I've tried running both babel-node and node --harmony. I just need some way to have the script run successfully whether it's changing the script or changing how I run it.

Why did you think that *would* work? You're bypassing all of the babeling and webpacking that CRA sets up for the source code; it's not magically patching Node for you. If you run a script like that it has to be compatible with your current Node version (see also `--harmony`). — jonrsharpe, Jun 18 '19 at 22:51
I didn't really think it would work. But I haven't found a way to make it work. I know it's not magic. — Michael Mior, Jun 19 '19 at 00:29
Could you use `require` for that script? When you say you tried `babel-node`, could you expand on that? At the moment the directory and presence of a CRA app is irrelevant, you'd get the same syntax error anywhere. — jonrsharpe, Jun 19 '19 at 14:03
@jonrsharpe I can't use `require` because the script uses ES6 syntax. When I say I tried `babel-node`, I mean I just ran that instead of `node`. I think the presence of the CRA app is relevant because there may be some existing machinery there that could be used. — Michael Mior, Jun 19 '19 at 17:36
That's not some immutable property of it, surely; in your example it uses that syntax because *that's the syntax you used*. Evidently you can edit it because that's what your answer does, using the require syntax. — jonrsharpe, Jun 19 '19 at 17:40
@jonrsharpe My point was that I can't edit the file that I'm requiring. Plus I want to be able to require other files from my React app which also use ES6, JSX, etc. — Michael Mior, Jun 19 '19 at 17:52

score 0 · Answer 1 · answered Jun 19 '19 at 17:38

0

Adding the following at the beginning of the script solved my issue:

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

require('@babel/register')({
  presets: [
    '@babel/preset-env',
    'babel-preset-react-app'
  ]
});

answered Jun 19 '19 at 17:38

Michael Mior

28,107
9
89
113

score 0 · Answer 2 · answered Jun 20 '19 at 03:58

As an alternative to adding the require and the options in the file, you can also make a .babelrc file in root to hold the options and the use -r for the require flag in cli , -r @babel/register as the alternative if you don't want to add the require statement in the file. Just an alternative. .babelrc file in root:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": {
         "node": "current"
      }
     }
   ]
  ]
 }

then in cli

node -r @babel/register executeMyFileWithESModules.js

for more details on setup see: https://stackoverflow.com/a/55309534/4263440 or https://stackoverflow.com/a/55428342/4263440

Running CLI scripts from create-react-app

2 Answers2