Recentemente eu andei pesquisando sobre Next, a framework js do momento, e quero começar a treinar com ela com alguns projetos. O problema é que não roda no meu computador, Não importa o que eu faça.
A forma normal de se criar um projeto next é com:
npx create-next-app
ou
yarn create next-app
O resultado é um template pronto, assim como o react app, com alguns scripts prontos para rodar o servidor. O script mais básico é o que coloca o servidor para rodar em modo desenvolvimento:
npm run dev
ou
yarn dev
O script abre um servidor na porta 3000, porém quando eu tento acessar o site, isso aparece na tela:
Internal Server Error
E no terminal, aparece a mensagem de erro:
$ 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} />
| }
|
Este primeiro erro aparece no terminal antes de entrar no site, mas quando eu entro, o terminal mostra:
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'
]
}
Já tentei diversas formas de se resolver, criar projeto next sem ser pelo create-next-app, update nas versões do node e npm, mas ainda sem resultado. Aparentemente ele não entende jsx, visto que o primeiro erro aponta como caractere inválido quando o primeiro componente jsx aparece no código. Fala que o webpack não está configurado com um loader válido para a leitura desse código. Agradeceria se alguém conseguir me ajudar, já que não conheço muito sobre webpack e babel e como se configura esses pacotes.
Ambiente:
- Win10
- npm v7.3.0
- node v15.5.0
- next v10.0.4
- react v17.0.1
- react-dom v17.0.1