Я хочу разработать свой веб-сайт, используя TypeScript, а не JS. Поэтому я последовал за официальным лицом NextJS, чтобы установить TS с нуля, но когда я запускаю npm run dev
, меня приветствует страница с ошибкой 404.
ОК, ниже мой 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"
]
}
Хм, вроде ничего страшного, я думаю :(
А дальше идет 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"
}
}
Хм, что не так с моими кодами?
Когда я запускаю свои коды как .jsx
, все нормально работает. Но .tsx
не работает.
Кто-нибудь знает об этой проблеме?
-- Добавить 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>
</>
)
За @tmhao2005 _app.tsx следует официальный документ в этой ссылке, а затем index.tsx, чтобы показать буквально индексную страницу веб-сайта. когда я меняю весь файл tsx на jsx, волшебным образом работает нормально :(
Я знаю, что вы следили за их документом. Но я очень хочу проверить, не пропустили ли вы что-то. Вот почему я спросил, что вы сделали
Хорошо, я добавил исходный код index.tsx
, а затем просто скажите мне, что вам нужно :) спасибо @tmhao2005
Я предполагал, что все будет работать с вашей установкой. Если вы не дадите нам воспроизводимое репо, извините, мы не можем помочь
Давайте продолжим обсуждение в чате.
Я только что понял проблему из конфигурации плагина @next/mdx
. pageExtensions
должен быть [ts, tsx]
, поскольку вы перешли на Typescript.
Короче говоря, уточнение правильных файлов ext решит проблему:
next.config.js
// ...
module.exports = withMDX({
pageExtensions: ['ts', 'tsx', 'md', 'mdx'], // Replace `jsx?` with `tsx?`
})
Вариант
jsx
вtsconfig.json
должен бытьreact
. В любом случае, можете ли вы поделиться тем, что вы сделали, приведя рабочий пример?