Skip to main content

TypeScript

Update an existing create react app - Application​

If an application based on create react fails to compile due to a version conflict with a newer package it is possible that the version of the create react scripts are out of date. After the lates version of create-react-app has been configured run the following command to update the project to the latest version of the scripts.

yarn upgrade --latest react-scripts

In some cases there can be dependency errors after upgrading all packages. In these case try deleting the node_modules folder and then install all dependencies.

rm -R ./node_modules
yarn install

In many instances this has been shown to resolve any dependency errors caused after upgrading the package dependencies. Updating node, npm and yarn

Install the latest version of node on Linux: https://github.com/nodesource/distributions/blob/master/README.md#debinstall

Updating node, npm and yarn​

Installing the latest version of npm.​

sudo npm install npm@latest -g

Install the latest version of yarn.​

This command ignores the definition inside of the package.json file.

yarn upgrade --latest

Upgrade versions inside of package.json​

This command will only work correctly if there exists a yarn.lock file. It may be necessary to run yarn install to ensure that a yarn.lock file exists.

yarn upgrade-interactive --latest

There is also the option to show all outdated packages to then manually update the package.json file with the desired version.

yarn outdated

Upgrading create-react-scripts​

yarn upgrade --latest react-scripts

In some cases there can be dependency errors after upgrading all packages. In these case try deleting the node_modules folder and then install all dependencies.

rm -R ./node_modules
yarn install

In many instances this has been shown to resolve any dependency errors caused after upgrading the package dependencies.

Installing Ts-Jest (without create-react-app​

Installing the latest version of Jest may cause any application based on create-react-app to fail due to incorrect version as create-react-app may be behind in the version that is supported. In this case check the error message for the version expected by create-react-app and explicitly install the older version. In the example below version 24.7.1 of jest is installed. Note: The installer may offer a list of versions from which to choose if this is the case choose the version that way.

yarn add --dev jest@24.7.1 ts-jest@24.0.2 @types/jest@24.0.15

To create a base configuration for ts-jest run:​

yarn ts-jest config:init

In order to test react components also install the enzyme dependencies. NOTE: the adapter package must match the react version e.g. version 16 of react requires the enzyme-adapter-react-16 version 17 would require enzyme-adapter-react-17.

yarn add --dev enzyme @types/enzyme enzyme-adapter-react-16

To prevent jest dying on import of css files inside of react components add the following into the jest.config.js

jest.config.js

"moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
}

Fully testing components​

Fully testing components outside of a browser requires a virtual dom. To instll a virtual dom install the jsdom package.

yarn add --dev jsdom jsdom-global

At the top of the test script include:

import "jsdom-global/register";

This must be done before any react code / imports. This ensure that the mount has a full dome available.

Installing GULP​

Install the gulp CLI on the dev machine.

npm install --global gulp-cli

Install the dev dependencies in the project.​

yarn add --dev gulp gulp-typescript

Common Issues​

After adding a new component to a package the compiler states component not found.

Check that the new component is exported in the packages index.tsx file. Check that the package has been added as a dependency. Check that the new component was built. Ensure that "yarn install" was executed (this appears to fix issues where a new component is not showing correctly.)

Attach to a runing node process on linux. Show the processes running on the machine. Using TOP, or grep ps -al then show the command used to launch node with ps [processId]. You can then stop the process and restart that exact command (from the location where the package.json is). however pass the node module the flag --inspect Then look again to find the process id of the newly started node program. (again using top or ps) Sind that command the SIGUSR1 singal on Ubuntu x64 its 12. so kill [processid] -s 12 That signal attaches node to a web socket. then open chrome and go to the URL: chrome://inspect More infos: https://nodejs.org/en/docs/guides/debugging-getting-started/