Next.js 不加载 jsx
Posted
技术标签:
【中文标题】Next.js 不加载 jsx【英文标题】:Next.js doesn't load jsx 【发布时间】:2021-04-08 02:29:26 【问题描述】:我一直在寻找当下的javascript框架Next.js,我想开始实践。问题是:它无论如何都不能在我的电脑上运行。
创建下一个项目的自然形式是使用命令行:
npx create-next-app
或
yarn create next-app
结果是一个带有文件结构的模板项目和一些用于运行服务器的脚本。最基本的脚本在开发模式下运行服务器:
npm run dev
或
yarn dev
终端中的结果是警告:
$ yarn dev
yarn run v1.22.5
$ next dev
(node:5348) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution
of the package at C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp( Component, pageProps )
> return <Component ...pageProps />
|
|
当我在 localhost:3000 进入网站时,浏览器页面显示:
内部服务器错误
在浏览器发起http请求后,终端显示如下信息:
event - build page: /next/dist/pages/_error
wait - compiling...
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp( Component, pageProps )
> return <Component ...pageProps />
|
|
Error: Cannot find module 'C:\Users\maths\Meus Documentos\codigos\node\my-app\.next\server\pages-manifest.json'
Require stack:
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\lib\start-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\cli\next-dev.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\bin\next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at getPagePath (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
657)
at requirePage (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
1062)
at loadComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-compo
nents.js:1:807)
at DevServer.findPageComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\ser
ver\next-server.js:74:296)
at DevServer.renderErrorTohtml (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\serv
er\next-server.js:126:120)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next-dev-
server.js:34:974)
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async DevServer.render (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\ne
xt-server.js:72:236)
at async Object.fn (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-serv
er.js:56:618)
at async Router.execute (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\rout
er.js:23:67)
at async DevServer.run (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-
server.js:66:1042)
at async DevServer.handleRequest (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\se
rver\next-server.js:34:1081)
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\require.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\load-components.
js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\next.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\lib\\start-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\cli\\next-dev.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\bin\\next'
]
我已经尝试了几件事来修复它,从 npx 和 yarn (通过手动安装依赖项)创建没有脚本的下一个项目,更新 node 和 npm 的版本等。似乎程序无法加载jsx,第一个错误指向第一个jsx组件出现在代码中的时刻。消息说 webpack 没有为这个代码配置一个有效的加载器。
环境:
赢10 npm v7.3.0 节点 v15.5.0 下一个 v10.0.4 反应 v17.0.1 react-dom v17.0.1【问题讨论】:
【参考方案1】:将您的 Nodejs 版本降级到 14 或 12 Node 版本 15 会破坏您的环境。如果您仍然想使用 15 获取节点版本切换器并根据您正在处理的项目切换版本。
【讨论】:
我已经安装了 nvm,因此安装了 12.0.0、14.0.0 和 10.13.0 版本(vercel 网站所需的最低版本)。在所有三个版本中都尝试过,错误仍然存在:( 我会尝试运行 npm install 然后运行 npm run build,next.js 需要当前版本。 npm install 以便正确安装 create-next-app 配置的所有包?我试过了,但还是不行。 这几天我研究了一点 webpack,我想我知道部分问题发生在哪里,尽管我不知道如何以正确的方式解决这个问题。提示 webpack 无法加载 jsx 的消息,可能是因为 webpack 的配置不好或者是一个晦涩的问题。程序加载了转译后的代码(即 jsx 的 react create element insted),但无法转译它以上是关于Next.js 不加载 jsx的主要内容,如果未能解决你的问题,请参考以下文章
Next.js Router.push() 自动重新加载页面
“首次加载 JS”大小问题 Next.js。 (使用 immutable.js)