Search code examples
typescriptcreate-react-appwebstorm

Running new project from WebStorm interface crashes while running from shell doesn't?

In a new create-react-app generated project with npx init create-react-app frontend --template typescript. whenever I try to run the start npm script the following error pops up:

> [email protected] start
> react-scripts start

./frontend/node_modules/webpack-dev-server/lib/Server.js:348
    } catch {
            ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (./frontend/node_modules/react-scripts/scripts/start.js:28:26)

However if I run it directly in a shell (either the terminal from WebStorm or a manually opened one) it runs perfectly fine, indicating the problem is with WebStorm configuration?

Closer inspection shows WebStorm runs:

/home/paul/.nvm/versions/node/v16.13.2/bin/node /home/paul/.nvm/versions/node/v16.13.2/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto

Running that manually in a terminal also works perfectly fine. I've checked the selected Node and TypeScript versions in the project settings - those are all set correctly (node set to the nvm mainted 16.3.2 and npm to the corresponding versions, TypeScript based on the one in local node modules).

What is the cause of this running error (on a blank project)? And what is a solution?

Screenshots by request:

Running

Node settings:

node settings

Upon deeper inspection I notice that if I downgrade react-scripts from 5.0.0 to 3.4.4. As well as typescript from 4.5.5 to 3.9.10 it works fine - however this is not really a sustainable situation.
Deeper inspection shows that problem does occur with react-scripts version 4.x

Solution

  • Must be a problem with your $PATH as the IDE sees it - you must have some old Node.js version that doesn't support optional catch binding in it.

    When being launched from desktop/launch bar, WebStorm only sees environment variables configured in login shell, but not in interactive shell configuration files (like .bashrc or .zshrc), so the environment (including $PATH) is different from the one you have in terminal. Possible solutions:

    • Workaround 1: make required variables available in a login shell by moving/copying them to the corresponding shell profile config
    • Workaround 2: run IDE from a terminal to make it inherit terminal environment
    • Workaround 3: edit IDE launcher and set command to /bin/bash -l -i -c "/opt/WebStorm/bin/webstorm.sh"