Instruction for starting Next.js project with TypeScript not working.

[amal]

Bug report

Describe the bug

Current instruction for starting Next.js project with TypeScript not working.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://nextjs.org/learn/excel/typescript/setup
2. Do all steps from the instruction
3. Open the browser and see an error:

Failed to compile
.../pages/index.tsx 1:19
Module parse failed: Unexpected token (1:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> const Home = () => <h1>Hello world!</h1>;
| 
| export default Home;
This error occurred during the build time and cannot be dismissed.

Also tried with:
yarn create next-app --example with-typescript with-typescript-app

Had the same type of error.

Expected behavior

The dev server started successfully, a tsconfig.json file was created for me, index page opens successfully.

System information

• OS: Windows 10
• Tried with Next.js: 9.3.4, 9.3.0
• Tried with npm and yarn

[merelinguist]

Cannot reproduce with yarn create next-app --example with-typescript with-typescript-app

[amal]

Tried simple JS version instruction from https://nextjs.org/learn/basics/getting-started/setup
As a result had the same error (no loaders are configured to process this file).

Probably issue on my side, but what can I check?
Tried to reinstall Node.js completely, create a project from scratch again - no help.

[merelinguist]

Try running node -v and yarn -v?

[amal]

node -v: v12.16.2
yarn -v: 1.22.4
npm -v: 6.14.4

[jrop]

I am getting the same error with:
node -v: v13.12.0
yarn -v: 1.22.4
npm -v: 6.14.4

I even tried downgrading to 1.21.1

[ error ] ./src/graphql/index.ts 2:9
Module parse failed: Unexpected token (2:9)
File was processed with these loaders:
 * ../node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
| export * from "./typeDefs";
> export * as resolvers from "./resolvers";
{ Error: Cannot find module for page: /api/graphql
    at pageNotFoundError (<dir>/node_modules/next/dist/next-server/server/require.js:13:17)
    at Object.getPagePath (<dir>/node_modules/next/dist/next-server/server/require.js:32:19)
    at DevServer.getPagePath (<dir>/node_modules/next/dist/next-server/server/next-server.js:387:26)
    at DevServer.handleApiRequest (<dir>/node_modules/next/dist/next-server/server/next-server.js:428:42)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'ENOENT' }

[merelinguist]

@jrop @amal Could you post your package.json, tsconfig, and next.config.js?

[amal]

@merelinguist in some strange way it all just started to work normally as usual. Couldn't reproduce the error to prepare files for you.

So for me issue is resolved magically, sorry for disturbing :)

[jrop]

package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server-micro": "^2.9.16",
    "jsonwebtoken": "^8.5.1",
    "next": "^9.1.7",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "reflect-metadata": "^0.1.13",
    "sqlite3": "^4.1.1",
    "typeorm": "^0.2.24"
  },
  "devDependencies": {
    "@types/jsonwebtoken": "^8.3.8",
    "@types/node": "^13.1.6",
    "@types/react": "^16.9.17",
    "typescript": "^3.7.4"
  }
}

tsconfig.json:

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

I do not have a next.config.js in my project.

To make matters more confusing, I have another computer where this project works flawlessly:

❯ node -v; and yarn -v; and npm -v
v12.6.0
1.17.3
6.14.4

Perhaps I will try downgrading versions later on my laptop where this is not working to match the machine with known good configuration.

[jrop]

Hmmm, after downgrading all my Node/yarn/npm versions to match the following (12.6.0/1.17.0/6.14.4), my laptop will still not build the project. My PC, however, has no problem.

[jrop]

I just realized that I never mentioned that I am using Ubuntu Linux on both of my machines

[jrop]

To make matters worse, I just pulled a completely fresh checkout of my repository on my PC (where the project was working), and the freshly checked-out directory does not build. Running diff -qr app/ freshly-checked-out-app/ does not show any meaningful differences.

[jrop]

Alright, I must have weekend brain: the error occurs on both my PC + Laptop. Sorry for the confusion. In my case, it seems to be that I am using export _ as _ syntax in my TypeScript file, and in tsconfig.json, the following setting exists: "module": "esnext". It needs to be esnext, but I guess babel does not recognize that syntax by the time it gets to that point in the pipeline. I have worked around it for now. Sorry for all of the noise.

[amal]

@merelinguist new info.
Reproduced original problem - it was only when IDE started dev server.
Additional tests showed that it also reproduced when started from "cmd".

But just start from Git Bash or Power Shell console and it works like a charm!

Reinstallation of the project in the cmd console didn't change anything (I thought it could be some environment clash between cmd and git bash).

Error stack trace (If it can be helpful):

Module parse failed: Unexpected token (1:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    at handleParseError (E:\next-ts\node_modules\webpack\lib\NormalModule.js:469:19)
    at E:\next-ts\node_modules\webpack\lib\NormalModule.js:503:5
    at E:\next-ts\node_modules\webpack\lib\NormalModule.js:358:12
    at E:\next-ts\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\next-ts\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at E:\next-ts\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at E:\next-ts\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

[silverit]

I can't intergrate typescript in development. I read a blog https://nextjs.org/blog/next-9. typescript is intergrated in development, but it's still not working. Really magic ✌️

my 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" ] }

[Vadorequest]

This is not really a solution, but if you want to start a Next.js project with TS, take a look at https://github.com/UnlyEd/next-right-now

• Demo at https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-peyfrlyfe.now.sh
• Doc at https://unlyed.github.io/next-right-now/

Tip: Bookmark https://react-typescript-cheatsheet.netlify.app/docs/basic/setup which is an awesome resource for TS.

[Jaikant]

I can't intergrate typescript in development. I read a blog https://nextjs.org/blog/next-9. typescript is intergrated in development, but it's still not working. Really magic ✌️

my 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" ] }

It is not integrated in development, I just spent a few hours on this! Here this comment could help.
#13428 (comment)

[nickatrokit]

Mine didn't work when I copied over another project until I copied over the hidden .babelrc file with the contents:

{
"plugins": [
["babel-plugin-styled-components", {"ssr": true, "displayName": true, "preprocess": false}]
],
"presets": [
"next/babel",
"@zeit/next-typescript/babel"
]
}