use ds25 provided TS configuration and extend from it

[akbarkz]

Done

In tsconfig.json:

• Extend TS configuration provided by @canonical/typescript-config-react package as instructed here.
• Only leave configs that are needed by our project.

QA

QA steps

• Check that all CI actions succeed on this PR, including lint that utilizes TS compiler.

[webteam-app]

Demo

Jenkins

demos.haus

[advl]

Curious which prop made this change necessary
cc @jmuzina

If this is standard can we capture it in our docs ?

[akbarkz]

@advl Yes, this change was caused by this error from TSC:

error TS2835: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './main.js'?

There was an option of fixing by adding an extension to the file ./main.tsx and adding additional configuration to tsconfig.json allowImportingTsExtensions. Another option was the one I applied.

[advl]

Can you try "import("./main.js")) and tell me if it works ?

This is due to two things :

• Using NodeNext, ts expects paths to be fully specified (Also, NodeNext also can be used in the browser, we choose it because it's stricter than EsNext)
• Without allowImportingTsExtensions the extension should be .js even if the file is .ts or .tsx (typescript is able to resolve that)

The mixture of the two implies that a best practice is to import "my/local/file.js" :)

Reference here

[akbarkz]

@advl The lint passes if I do it like that as well, although in the IDE it's highlighted with the error Module './main.js' was resolved to '/home/akbar/projects/canonical/websites-content-system/static/client/main.tsx', but '--jsx' is not set.. Shall we go with that then?

[jmuzina]

There may be something wrong with your IDE here. I cloned this PR and edited this file to use an import with main.js and was able to run yarn build, yarn test, and yarn lint with no errors. Maybe you need to clean-install dependencies?

/* eslint-disable testing-library/no-node-access */
import { act } from "react";

import { waitFor } from "@testing-library/react";

describe("main", () => {
  beforeAll(() => {
    const rootElement = document.createElement("div");
    rootElement.setAttribute("id", "root");
    document.body.appendChild(rootElement);
  });

  it("renders the app in the root element", async () => {
    await act(() => import("./main.js"));
    const container = document.getElementById("root") as HTMLElement;
    await waitFor(() => expect(container.querySelector(".l-application")).toBeInTheDocument());
  });
});

[akbarkz]

@advl @jmuzina indeed, removing all deps and installing again did the trick! removed the dynamic import.

[advl]

lgtm

[github-actions]

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀