Next.js: with-yarn-workspaces example does not work with typescript and next 9.0

[msreekm]

Examples bug report

yarn workspace example does not with typescript and next 9.0

Example name

with-yarn-workspaces

Describe the bug

from the next/examples folder - https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces , if i make the shared code as typescript files , i get the error module not found! I was able to fix it by adding next-typescript in next.config.js ,then the code works, but I start getting this warning -"@zeit/next-typescript is no longer needed since Next.js has built-in support for TypeScript now. Please remove it from your next.config.js and your .babelrc. " .so what is the correct way to add support to typescript in local shared code? I tried adding .babelrc with "presets": ["next/babel"] also.
here is the repo with all the above changes- https://github.com/msreekm/next-yarn-workspaces

To Reproduce

1. clone repo
2. run yarn dev
3. see the warning @zeit/next-typescript is no longer needed since Next.js has built-in support for TypeScript now in console.

Expected behavior

use typescript shared code without typescript warnings.

[jamesmosier]

Did you follow this guide to get Typescript setup?

I followed these steps with success...

1. yarn create next-app --example with-yarn-workspaces with-yarn-workspaces-app
2. cd with-yarn-workspaces-app/packages/web-app
3. touch tsconfig.json
4. yarn add --dev typescript @types/react @types/node
5. yarn dev

[Timer]

Closing as it should be working when following new instructions as mentioned above ☝️

[MatejBransky]

@jamesmosier
It should be noted that there is some problem with watcher: https://github.com/martpie/next-transpile-modules/issues/9

So I had to do these steps:

1. yarn create next-app --example with-yarn-workspaces <project-folder-name>
2. cd <project-folder-name>/packages/web-app
3. create empty tsconfig.json
4. yarn add --dev typescript @types/react @types/node
5. update next.config.js: (new)

const withTM = require('next-transpile-modules');

// Tell webpack to compile the "bar" package
// https://www.npmjs.com/package/next-transpile-modules
module.exports = withTM({
    transpileModules: ['bar'],
    webpack(config) {
        config.resolve.symlinks = true; // source: https://github.com/martpie/next-transpile-modules/issues/9#issuecomment-498766367
        return config;
    }
});

1. yarn dev

[milesrichardson]

This fixes the watcher problem for me, but files in the top level of the package being imported are not included in hot reloads.