How to build a Redwood 4.2 app with Chakra-UI 2.x

[adriatic]

Introduction

This article is the first part in the series of posts describing the use of several UI component libraries, starting with Chakra UI. The impetus for writing this article comes from Sergei's post in Discord with additional comments by dennemark and david-thyresson.

To illustrate the modifications needed to use Chakra-UI 2.x UI component library with Redwood 4.2 based application, I selected the egghead tutorial by Lazar Nikolov, a core team member of Chakra. The tutorial is organized as a series of lessons, each lesson being accessible as a branch of this repo. For example, lesson 3 is accessible as branch 3.

The Redwood 4.2 application I used is defined in the beginning of the RedwoodJS tutorial, up to the second page. I did not want to include any of the "UI constructs", built in the following tutorial chapters.

The final UI is shown below and the matching app is in RW-Chakra repository

Modifications to a minimalist Redwood 4.2 app

1. Typescript 4.2 import paths

The most relevant "discovery" is that the most recent Typescript changed the processing of import statements, manifested by

error TS2307: Cannot find module 'src' or its corresponding type declarations.

Note the wiggly lines stating how the import files cannot be found while the application behaves correctly

This issue is further discussed in Suppressing "The import path cannot end with a '.ts' extension" error, as well as in .d.ts Extensions Cannot Be Used In Import Paths. It is far from obvious how will this issue be addressed finally. I was able to "ignore" this situation by changing the original tsconfig.com (as generated by running the command yarn create redwood-app --ts ./redwoodblog) with this one

{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "skipLibCheck": false,
    "baseUrl": "./",
    "rootDirs": [
      "./src",
      "../.redwood/types/mirror/api/src"
    ],
    "paths": {
      "src/*": [
        "./src/*",
        "../.redwood/types/mirror/api/src/*"
      ],
      "types/*": ["./types/*", "../types/*"],
      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/api"]
    },
    "typeRoots": [
      "../node_modules/@types",
      "./node_modules/@types"
    ],
    "types": ["jest"],
  },
  "include": [
    "src",
    "../.redwood/types/includes/all-*",
    "../.redwood/types/includes/api-*",
    "../types"
  ]
}

This configuration is a result of guessing what Typescript expects - I am hoping someone will be able to define the content more precisely.

[adriatic]

2. Other issues

This section reserved for eventual new findings, discovered in subsequent discussions to folow