2022-06-19

How to create a new INK project

react, ink, cli

banner

Image by Lucas Kapla from Unsplash

TL;DR

For those in a hurry,

Set up an INK project

1# Create a folder2mkdir ink33
4# Go to the folder5cd ink36
7# Create the ink project8npx create-ink-app --typescript9
10# Install dependencies11npm i -D eslint eslint-config-xo-typescript eslint-config-xo-typescript eslint-plugin-unicorn12
13# Update package version14npx ncu -u15
16# Remove packages and lock file17rm -rf node_modules package-lock.json18
19# Install NPM packages20npm intall

Update package.json

1"ava": {2		"typescript": {3			"extensions": [4				"tsx"5			],6			"rewritePaths": {7				"source/": "dist/"8			},9			"compile": false10		}11	},12	"xo": {13		"extends": "xo-react",14		"rules": {15			"react/prop-types": "off"16		}17	},18	"eslintConfig": {19		"env": {20			"es2022": true21		},22		"extends": "plugin:unicorn/recommended"23	},

Update tsconfig.json

Copy paste,

1{2	"extends": "@sindresorhus/tsconfig",3	"compilerOptions": {4		"module": "es2022",5		"jsx": "react",6		"esModuleInterop": true,7		"outDir": "dist"8	},9	"include": ["source"]10}

Introduction

Creating a new INK project with npx create-ink-app --typescript causes many errors when you try to "test" with npm test.

I will show you how to make the testing work.
Fixing linting issues is outside the scope.

Let's start with a new project.

Bootstrapping a new INK project

Create a new folder, and go into the folder.

1# bash2mkdir ink33cd ink34
5#zsh - this will create  a new folder and take you there6take ink3

And bootstrap a new project.
NOTE - This command will bootstrap a new project in the current folder.

npx create-ink-app --typescript

Install Depedencies

npm i -D eslint eslint-config-xo-typescript eslint-config-xo-typescript eslint-plugin-unicorn

Initial project test run

Run the test after the project is created.

npm test

You will be greeted with the following error

1dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npx create-ink-app --typescript2
3  ✔ Copy files4  ✔ Install dependencies5  ✔ Link executable6 dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npm test7
8> ink3@0.0.0 pretest9> npm run build10
11
12> ink3@0.0.0 build13> tsc && chmod +x dist/cli.js14
15
16> ink3@0.0.0 test17> xo && ava18
19Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Failed to load plugin 'unicorn' declared in 'BaseConfig » /home/dance2die/src/throwaway/CLI/ink3/node_modules/xo/config/plugins.js': Package subpath './lib/rules/no-warning-comments' is not defined by "exports" in /home/dance2die/src/throwaway/CLI/ink3/node_modules/eslint/package.json20Referenced from: /home/dance2die/src/throwaway/CLI/ink3/node_modules/xo/config/plugins.js21    at new NodeError (node:internal/errors:388:5)22    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)23    at packageExportsResolve (node:internal/modules/esm/resolve:719:3)24    at resolveExports (node:internal/modules/cjs/loader:488:36)25    at Module._findPath (node:internal/modules/cjs/loader:528:31)26    at Module._resolveFilename (node:internal/modules/cjs/loader:932:27)27    at Module._load (node:internal/modules/cjs/loader:787:27)28    at Module.require (node:internal/modules/cjs/loader:1012:19)29    at require (node:internal/modules/cjs/helpers:102:18)30    at Object.<anonymous> (/home/dance2die/src/throwaway/CLI/ink3/node_modules/eslint-plugin-unicorn/rules/expiring-todo-comments.js:5:18)31 ✘ dance2die@ooboontoo  ~/src/throwaway/CLI/ink3 

Updating NPM packages

Run npm-check-updates to update NPM package versions in package.json. This only updates package.json file; You need to run npm install yourself.

1dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npx npm-check-updates -u2Upgrading /home/dance2die/src/throwaway/CLI/ink3/package.json3[====================] 14/14 100%4
5 meow    ^9.0.0  →  ^10.1.26 react  ^17.0.2  →  ^18.2.07 chalk   ^4.1.2  →   ^5.0.18 xo     ^0.39.1  →  ^0.50.09
10Run npm install to install new versions

Reinstalling packages

IMPORTANT: Delete both node_modules and package-lock.json.
If you don't do this, nothing will work.

rm -rf node_modules package-lock.json

Now reinstall pacakges.

npm install

This will install packages (creating node_modules folder again) and create a fresh package-lock.json.

Second test run

When you run the test again with npm test, you will get the following error.

1dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npm test2
3> ink3@0.0.0 test /home/dance2die/src/throwaway/CLI/ink34> xo && ava5
6Error: Missing 'compile' property in TypeScript configuration for AVA. See https://github.com/avajs/typescript/blob/v3.0.1/README.md7    at validate (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/@ava/typescript/index.js:21:11)8    at main (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/@ava/typescript/index.js:83:4)9    at collectProviders (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:19:10)10    at async file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:45:2211    at async resolveGlobs (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:50:28)12    at async handleMessage (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:60:17)13 ELIFECYCLE  Test failed. See above for more details.

The error is saying that we need to tell AVA not to compile.

Now let's update ava and eslintConfig in package.json.

Updating AVA and eslintConfig in package.json

Inside package.json, update the configuration as shown below.

1"ava": {2		"typescript": {3			"extensions": [4				"tsx"5			],6			"rewritePaths": {7				"source/": "dist/"8-			}9+			},10+			"compile": false11		}12	},13	"xo": {14		"extends": "xo-react",15		"rules": {16			"react/prop-types": "off"17		}18	},19+	"eslintConfig": {20+		"env": {21+			"es2022": true22+		},23+		"extends": "plugin:unicorn/recommended"24+	},

Update tsconfig.json

You need to change the TypeScript module option from commonjs to es2022.

1{2	"extends": "@sindresorhus/tsconfig",3	"compilerOptions": {4-		"module": "commonjs",5+		"module": "es2022",6		"jsx": "react",7		"esModuleInterop": true,8		"outDir": "dist"9	},10	"include": ["source"]11}

The final test run

When you run the test again, you can see that AVA correctly reports the issue.
Fixing these issues is outside the scope so I won't cover it here.

1dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npm test2
3> ink3@0.0.0 test /home/dance2die/src/throwaway/CLI/ink34> xo && ava5
6
7  source/cli.tsx:5:1785:17  Missing file extension "tsx" for "./ui"           import/extensions920:18  Missing trailing comma.                           @typescript-eslint/comma-dangle1021:4   Missing trailing comma.                           @typescript-eslint/comma-dangle1122:3   Missing trailing comma.                           @typescript-eslint/comma-dangle12
13  source/ui.tsx:4:34144:34  Function component is not a function declaration  react/function-component-definition156:22  Unexpected usage of doublequote.                  jsx-quotes1610:1   Do not use "module".                              unicorn/prefer-module17
18  source/test.tsx:5:17195:17  Missing file extension "tsx" for "./ui"           import/extensions2014:39  Unexpected usage of doublequote.                  jsx-quotes21
22  9 errors23 ELIFECYCLE  Test failed. See above for more details.