Converting Breeze Next into Typescript, PNPM and Latest.

[mandatoryGithubUser]

Breeze Next has no discussion board, so listing steps here so anyone converting can follow the steps easier.

Also to switch to PNPM and update everything to latest as auto-dependency updates aren't enabled. Though the pnpm switch is optional, just insert your package manger, or leave with npm and don't delete the package-lock.json.

Updating everything and switching to pnpm

• Delete package-lock.json
• pnpm install
• pnpm upgrade
• pnpm update

Installing Typescript

• Rename 1 jsx file to .tsx, eg layout.jsx -> layout.tsx
• pnpm dev
• Add baseurl and paths from jsconfig.json to tsconfig.json

        "baseUrl": "src/",
        "paths": {
            "@/*": ["./*"]
        }

Making sure Typescript doesn't emit Eslint errors

• Remove Babel // Babel is not required as we care about typescript, not jsx
• pnpm remove @babel/eslint-parser @babel/preset-react
• Add Typescript Eslint
• pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Update eslint config to work with typescript eslint

• Remove instances of babel in the eslint config file
• Replace with the typescript eslint config

module.exports = {
    ... // Existing config
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        ... Existing extends, minus the babel ones 
        'plugin:@typescript-eslint/strict',
        'plugin:@typescript-eslint/stylistic',
    ],

Fix lint issues, final check and optional conversion of existing files

• pnpm lint:fix

• pnpm build

• Renaming existing .jsx files can be done or just left as is. I find it easier to just leave them except for the main app router files, page, layout, errors, not-found.

[mandatoryGithubUser]

Breeze Next has no discussion board, so listing steps here so anyone converting can follow the steps easier.

Also to switch to PNPM and update everything to latest as auto-dependency updates aren't enabled. Though the pnpm switch is optional, just insert your package manger, or leave with npm and don't delete the package-lock.json.

Updating everything and switching to pnpm

* Delete package-lock.json

* pnpm install

* pnpm upgrade

* pnpm update

Installing Typescript

* Rename 1 `jsx` file to `.tsx`, eg `layout.jsx` -> `layout.tsx`

* `pnpm dev`

* Add baseurl and paths from `jsconfig.json` to `tsconfig.json`

        "baseUrl": "src/",
        "paths": {
            "@/*": ["./*"]
        }

Making sure Typescript doesn't emit Eslint errors

* Remove Babel // Babel is not required as we care about typescript, not jsx

* `pnpm remove @babel/eslint-parser @babel/preset-react`

* Add Typescript Eslint

* `pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin`

Update eslint config to work with typescript eslint

* Remove instances of babel in the eslint config file

* Replace with the typescript eslint config

module.exports = {
    ... // Existing config
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        ... Existing extends, minus the babel ones 
        'plugin:@typescript-eslint/strict',
        'plugin:@typescript-eslint/stylistic',
    ],

Fix lint issues, final check and optional conversion of existing files

* `pnpm lint:fix`

* `pnpm build`

* Renaming existing `.jsx` files can be done or just left as is. I find it easier to just leave them except for the main app router files, page, layout, errors, not-found.

The answer is the initial post