NextJS cannot recognize TypeScript files

Question

I want to develop my website using TypeScript not a JS. So I followed NextJS's official to install TS from scratch, but when I run npm run dev, 404 Error page greeting me.
OK below is 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"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Hmm, nothing seems to be wrong I think :(

And then next is package.json.

{
  "name": "MY_PROJECT_NAME",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "go": "next build && next start",
    "debug": "NODE_OPTIONS='--inspect' next dev"
  },
  "dependencies": {
    "@mdx-js/loader": "^1.6.22",
    "@next/mdx": "^10.0.3",
    "@types/node": "^14.14.14",
    "@types/react": "^17.0.0",
    "@types/styled-components": "^5.1.5",
    "@types/webpack": "^4.41.25",
    "autoprefixer": "^10.1.0",
    "express": "^4.17.1",
    "gray-matter": "^4.0.2",
    "next": "^10.0.3",
    "postcss": "^8.2.1",
    "raw-loader": "^4.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-markdown": "^4.3.1",
    "remark-emoji": "^2.1.0",
    "remark-html": "^13.0.1",
    "remark-images": "^2.0.0",
    "styled-components": "^5.2.1",
    "tailwindcss": "^2.0.2",
    "typescript": "^4.1.3",
    "webpack": "^4.44.0"
  }
}

Hmm, what's wrong with my codes?
When I run my codes as .jsx, All of things are normally works. But .tsx is not working.
Does any one know about this problem?

-- Add index.tsx --

import Layout from '../components/Layout'

export default () => (
    <>
        <Layout title="Kreimben::Home" isHome={true}>
            <div className="flex justify-center text-center">
                <div className="bg-gray-300 p-8 m-12 rounded-lg w-4/5 text-4xl font-serif">
                                Welcome to indie developer's website!
                </div>
            </div>
            <main className="flex justify-center">
                <div className="w-4/5 py-32 mb-12 shadow-xl rounded-lg bg-gradient-to-r from-teal-300 to-blue-500 text-center">
                    <p className="text-4xl font-serif">I code</p>
                    <p className="font-semibold text-6xl">iOS, macOS, and anything!</p>
                </div>
            </main>
        </Layout>
    </>
)

The jsx option in tsconfig.json is supposed to be react. Anyway can you share what you have done by giving a working example? — tmhao2005
– tmhao2005, Commented Dec 20, 2020 at 15:59
@tmhao2005 _app.tsx is followed by official document in this link and then index.tsx to show literally index page of website. when I change all of tsx file to jsx, Working magically normally :( — aldksjkdsjg
– aldksjkdsjg, Commented Dec 20, 2020 at 16:14
I know you were following their document. But I’m keen to check if you have missed something. That’s why I asked for what you have done — tmhao2005
– tmhao2005, Commented Dec 20, 2020 at 16:17
OK, I added index.tsx's source code and then just tell me what you need :) thanks @tmhao2005 — aldksjkdsjg
– aldksjkdsjg, Commented Dec 20, 2020 at 16:38
I supposed things would work with your setup. If you don't give us a reproducible repo, sorry, we can't help — tmhao2005
– tmhao2005, Commented Dec 20, 2020 at 16:54

tmhao2005 · Accepted Answer · 2020-12-20 17:25:57Z

3

I've just figured out the issue from @next/mdx plugin configuration. The pageExtensions is supposed to be [ts, tsx] as you switched to Typescript.

In short, refine the correct ext files would fix the issue:

next.config.js

// ...

module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'md', 'mdx'], // Replace `jsx?` with `tsx?`
})

answered Dec 20, 2020 at 17:25

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS cannot recognize TypeScript files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related