Create React App (CommonJS, ESNext) + Path Alias + Module (Import/Export) + NodeJS + TSConfig.json

[jdavis-software]

Overview

Stop... Slow... Down... and Chill... 😅 if you're having a problem with your CRA module import/export syntax or path aliases, after upgrading either react-scripts, typescript, or nodeJS look no further, I've spent hours going through and consolidating and organizing the information to resolve your issue you're welcome 😄 to thank me later.

Problem

It all simply boils down to this... CommonJS vs ES6 CRA wants ES6 and Typescript wants CommonJS

Requirements

This repo gives you a fresh install of the latest CRA - ReactScripts + TypeScript, make sure you update or download the latest version of NodeJS (currently 14.17.0)

git clone https://github.com/jdavis-software/latest-cra-ts-node-example

Dependencies

Package	Version
react-scripts	<=4.0.3
typescript	<=4.2.4
node	<=14.17.0

Bug Description

After upgrading my packages to react-scripts@4.0.3 and typescript@4.2.4 I'm receiving this error:

ReferenceError: Cannot access { myFunction } before initialization

This is related to exporting function expressions during declaration like this example:

export const myFunction = () => {  /* do something */  }

Most of the application is written in this shorthand fat arrow function expression syntax, and this has always worked previously in the past before this update. After doing more research it looks like this problem is related to the module option inside compilerOptions declared in the tsconfig.json file.

Problem Overview

The problem seems to be with the following esnext value inside the module option:

"compilerOptions": {
    "module": "esnext"
}

Now changing this back to commonjs should resolve this problem, however after updating the option to the following:

"compilerOptions": {
    "module": "commonjs"
}

Then running npm run start, you would think this would work, however, CRA/Webpack goes into the tsconfig.json file and reverts it back to the previous esnext module, thus again failing and causing the reference error:

ReferenceError: Cannot access { myFunction } before initialization

Does anyone have a solution, to allow export declarations of fat arrow function expressions, yet?

export const myFunction = () => { /* do something */ }

Useful Reference Links That May Help You!

• TSConfig Compiler Options
• TSConfig extends base overides
• TypeScript Declartion Files (.d.ts)
• CommonJS vs ES6

Keywords

• Module not found: Can't resolve
• Cannot access before initialization
• Create React App CommonJS
• Create React App changes tsconfig
• Create React App updates tsconfig
• Create React App removes commonJS
• Create React App exports error
• Create React App imports
• Create React App module imports
• Create React App module exports

Appreciate

If this helped you and save you time... feel free to send (BAT) - Basic Authentication Tokens... I need more coffee and dinners 😅

BAT Token Address - 0x1A62e25073a9038647c235509b4349988eED19Ae

Anyways wanted to spread peace, love and happiness to everyone. I love what I do and I hope everyone reading this is having a great day, take care guys!

[miraage]

Could you please make a codesandbox or a ts playground?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.