2022-06-19
How to create a new INK project
react, ink, cli
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:178 ✖ 5:17 Missing file extension "tsx" for "./ui" import/extensions9 ✖ 20:18 Missing trailing comma. @typescript-eslint/comma-dangle10 ✖ 21:4 Missing trailing comma. @typescript-eslint/comma-dangle11 ✖ 22:3 Missing trailing comma. @typescript-eslint/comma-dangle12
13 source/ui.tsx:4:3414 ✖ 4:34 Function component is not a function declaration react/function-component-definition15 ✖ 6:22 Unexpected usage of doublequote. jsx-quotes16 ✖ 10:1 Do not use "module". unicorn/prefer-module17
18 source/test.tsx:5:1719 ✖ 5:17 Missing file extension "tsx" for "./ui" import/extensions20 ✖ 14:39 Unexpected usage of doublequote. jsx-quotes21
22 9 errors23 ELIFECYCLE Test failed. See above for more details.