Next.js: Version 9.0.2 typings error.

[wolframdeus]

Bug report

Describe the bug

In version 9.0.2 we get an error, connected with typings. It appears when we try to create a Next Server.

To Reproduce

In version 8, we could import like import * as next from 'next' and it worked correctly both on JavaScript and TypeScript sides. So we got no errors connected with typings and javascript compiler. But now, we have to import via import next from 'next'. There is no doubt it works correctly in TypeScript's mind, but when we try to run an application, we get an error:

TypeError: next_1.default is not a function

In addition, I got an error, connected with props of component exported from _app. I just create a class ThemedApp extends App<SomeProps> and get an error while trying to get something from this.props.

Expected behavior

next import have to be saved in current state, but error doesn't occur. So, it is good we can import a bit more natively via import next from 'next', but this error makes some problems.

Screenshots

System information

• OS: Ubuntu 18
• Version of Next.js: 9.0.2

Additional context

No information.

[fandy]

Can confirm this is also happening for us. When upgrading from 8.0.3 to 9.0.2. Seems to be the same issue for 8 canary releases.

[fandy]

Jump to definition shows the default export exists, but there's an issue compiling.

[lfades]

I tried to reproduce this but it ended up working without issues, keep in mind that the generated tsconfig.json is meant to be used by the client-side app, not by a Node.js server, if you have a custom server with TypeScript I recommend the following: use a different tsconfig.json or switch to javaScript in that case. If you think I'm wrong, please create a reproduction of the issue 🙏 .

And now about the other issue, this is me implementing App:

It worked well too, make sure you're using the core types of Next.js and not @types/next. INextAppContext doesn't exist in our internal types

[wolframdeus]

@lfades Yeah, sorry, INextAppContext is my own, extending NextAppContext.

Ok, I will try to reproduce asap and show tsconfig.json, but I think the problem is in TypeScript config

[fandy]

Here's my tsconfig.json for reference:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types", "./typings"],
    "lib": ["dom", "es2015", "es2016", "esnext.asynciterable"]
  }
}

tsconfig.server.json (where the error happens):

{
  "extends": "./tsconfig.json",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "compilerOptions": {
    "noEmit": false,
    "module": "commonjs",
    "target": "es2017",
    "lib": ["es2017"],
    "outDir": ".next/server"
  },
  "include": ["server/**/*.ts"],
  "exclude": [".next"],
  "watch": ["server"]
}

[lfades]

@fandy Are you sure tsconfig.server.json is including the types from Next.js?, add next-env.d.ts just in case:

"include": ["next-env.d.ts", "server/**/*.ts"]

[fandy]

I tried including it:

/// <reference types="next" />
/// <reference types="next/types/global" />

But it's the same problem. I can jump to definition the default next import with VScode which makes me think it's a problem with the export of the module.

[lfades]

@fandy Try with this:

"esModuleInterop": true,

[fandy]

@lfades Same problem :(

{
  "extends": "./tsconfig.json",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "compilerOptions": {
    "noEmit": false,
    "module": "commonjs",
    "target": "es2017",
    "lib": ["es2017"],
    "outDir": ".next/server"
  },
  "include": ["typings/next-env.d.ts", "server/**/*.ts"],
  "exclude": [".next"],
  "watch": ["server"],
  "esModuleInterop": true
}

Throws error:

TSError: ⨯ Unable to compile TypeScript:
server/index.ts:15:13 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("/Users/fang/choice-kittens/node_modules/next/types/index")' has no compatible call signatures.

15 const app = next({ dev })

[lfades]

@fandy oh well Huh add this one too:

"moduleResolution": "node",

if it still doesn't work, please share a reproduction 🙏

[yceffort]

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "server/index.ts"
  ]
}

import * as next from "next";
import * as Koa from "koa";
import * as Router from "koa-router";

const dev = process.env.NODE_ENV !== "production";
const PORT = parseInt(process.env.PORT || "7120", 10);

async function main() {
  // here
  // Cannot invoke an expression whose type lacks a call signature.
  const nextApp = next({ dev });
  const app = new Koa();
  const router = new Router();

  await nextApp.prepare();
  router.get("/", async ctx => {
    await nextApp.render(ctx.req, ctx.res, "/", ctx.query);
    ctx.respond = false;
  });

  app.use(router.routes());

  app.listen(PORT);
}

main();

package.json

"dependencies": {
    "isomorphic-unfetch": "^3.0.0",
    "koa": "^2.7.0",
    "koa-router": "^7.4.0",
    "next": "^9.0.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  },
  "devDependencies": {
    "@types/node": "^12.6.8",
    "@types/react": "^16.8.23",
    "typescript": "^3.5.3"
  }

[lfades]

@yceffort Please use a different tsconfig for the server, you can see how by following the custom-server-typescript example.

[wolframdeus]

Okay, I got problem solved. I just followed custom-server-typescript and used tsconfig.json and tsconfig.server.json options. There are no problems now.

Leaving a migration from 8 to 9 version case:
v8 state: https://github.com/wolframdeus/ssr-server-template/tree/815eee98210a7ee1313dad4e267976406a0390b2
v9 migration commit: https://github.com/wolframdeus/ssr-server-template/commit/c8b100d928c2e22e3731be0b5fc4e3bb2158caf3