TypeScript plugin does not work

[kirill-konshin]

Config:

// next.config.js
const withTypescript = require('@zeit/next-typescript');
module.exports = withTypescript({});

Page:

// pages/index.tsx
import React from 'react';
export default () => (<div>Foo</div>);

Outcome:

ERROR in ./pages/index.tsx
Module build failed: TypeError: Cannot set property 'tsLoaderFileVersion' of undefined
    at successLoader (/xxx/node_modules/ts-loader/dist/index.js:47:54)
    at Object.loader (/xxx/ts-loader/dist/index.js:21:12)
 @ multi ./pages/index.tsx

[kirill-konshin]

Maybe related to storybookjs/storybook#3044

[timneutkens]

Next is not using webpack 4 (yet), 🤔

[kirill-konshin]

Yep, that's why in docs and other places it should say:

$ npm install ts-loader@3 --save-dev

[timneutkens]

I'm not following, ts-loader is a dependency of next-typescript: https:/zeit/next-plugins/blob/master/packages/next-typescript/package.json#L8

We don't document anything related to ts-loader. And the version used is 3.x.

[kirill-konshin]

My bad, let me give a bit more background how I ended up with this issue.

I tried TS example from https://zeit.co/blog/next5 (so I manually installed ts-loader, turned out version 4 was installed). Nothing worked, for obvious reason, so I have installed next-typescript and it did not work too (surprisingly, bc dependency is set to version 3).

That's what I meant about updating the docs, there's nothing to do with this particular repo I presume.

[queses]

JSX typechecks also not working in Next 5. For example, we have:

// pages/index.tsx
import * as React from 'react'
import Title from '../components/Title'

export default () => (
    <div>
      <Title name={2}/>
      <p>Super intresting page content</p>
    </div>
)

// components/Title.tsx
import * as React from 'react'

export default ({ name } : { name: string }) => (
    <h1>{name}</h1>
)

There is a JSX type error in <Title name={2}/>: name prop should be string. VS Code shouts about this error, but NextJS successfuly compiles the projects and shows index page.
React and ReactDOM @types packages is installed. tsconfig.json looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": true,
    "baseUrl": "."
  }
}

[queses]

Workaround - in next.config.js replace
{ loader: 'ts-loader', options: { transpileOnly: true } }
to
{ loader: 'ts-loader' }

Now JSX typechecks is working, but I'm suspect it would entail other problems.
My example works, nevertheless. The only problem I met - hot reloading is not working after type error. Browser shows error message and not reacting to code changes, so I need to reload page.

[nickdima]

I have the same problem as @queses , compilation doesn't fail on TS errors

[timneutkens]

I don't see how the last 3 comments relate to the issue. Other than it mentioning typescript, so I'm going to lock the conversation.

For the record, it is expected that we don't handle typescript errors. They're disabled as per the documentation of ts-loader, and it's best to use an external type checker.

[timneutkens]

https://nextjs.org/docs/basic-features/typescript