Demo SPA project failing to run

Experience Manager (PaaS/OnPrem)
1

Hi All
I am trying to run the demo SPA project which I downloaded from the GitHub repository

the latest version 14.4.0
I followed all the steps and did
$ cd brxm/spa-sdk/examples/react-csr
$ npm install
$ npm run dev

But when I do try to run it breaks giving the following error.
Please let me know if I am missing anything.

npm run dev

@bloomreach/example-react-csr@14.4.0 dev /Users/gurvinder/Downloads/brxm-brxm-14.4.0/spa-sdk/examples/react-csr
SKIP_PREFLIGHT_CHECK=true react-scripts start

/Users/gurvinder/Downloads/brxm-brxm-14.4.0/spa-sdk/examples/react-csr/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
appTsConfig.compilerOptions[option] = value;
^

TypeError: Cannot assign to read only property ‘jsx’ of object ‘#’
at verifyTypeScriptSetup (/Users/gurvinder/Downloads/brxm-brxm-14.4.0/spa-sdk/examples/react-csr/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
at Object. (/Users/gurvinder/Downloads/brxm-brxm-14.4.0/spa-sdk/examples/react-csr/node_modules/react-scripts/scripts/start.js:31:1)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bloomreach/example-react-csr@14.4.0 dev: SKIP_PREFLIGHT_CHECK=true react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @bloomreach/example-react-csr@14.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/gurvinder/.npm/_logs/2021-02-01T16_31_13_043Z-debug.log

2

Hey @gurvinder,

This is caused by this issue in the create-react-app.

There are two ways on how we can work this around.

  1. You can lock the TypeScript version to 4.0.*:
    npm install typescript@~4.0
  2. Or, if you would like to use the latest TypeScript version, you can do one of the following:
    • Add DISABLE_NEW_JSX_TRANSFORM=true to your .env.
    • DISABLE_NEW_JSX_TRANSFORM=true npm run dev.

Let us know if that solves your problem.

3

I replicated the error reported by @gurvinder and tried both workarounds suggested by @dokmic.
1 (npm install typescript@~4.0) worked for me.
2 (DISABLE_NEW_JSX_TRANSFORM=true) did not, I got a TypeScript compilation error when loading the app in the browser.

4

I added a warning block about this issue and the suggested workaround to https://documentation.bloomreach.com/14/library/concepts/spa-integration/demo-projects.html .