Babel出了点问题,它无法编译我的故事书代码
我在试着用故事书和下一本书来拼凑一个样板
我做了一个搜索,并没有找到一个解决这个问题的办法,如果有人能帮助我将不胜感激
这是我在尝试构建
info - Linting and checking validity of types ..warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
info - Linting and checking validity of types
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next-pwa/register.js
> [PWA] Service worker: /home/crepszz/Desktop/boilerplate/boilerplate/.next/sw.js
> [PWA] url: /sw.js
> [PWA] scope: /
> [PWA] Compile server
> [PWA] Compile server
info - Using external babel configuration from /home/crepszz/Desktop/boilerplate/boilerplate/.babelrc
info - Creating an optimized production build
Failed to compile.
./src/pages/_app.tsx
Error: [BABEL] /home/crepszz/Desktop/boilerplate/boilerplate/src/pages/_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
at verify (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:397612)
at Function.explode (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:396515)
at /home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:49254
at Generator.next (<anonymous>)
at Function.<anonymous> (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:79767)
at Generator.next (<anonymous>)
at evaluateSync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:717268)
at Function.sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:715284)
at sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:80263)
at sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:716601)
./src/pages/_document.tsx
Error: [BABEL] /home/crepszz/Desktop/boilerplate/boilerplate/src/pages/_document.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
at verify (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:397612)
at Function.explode (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:396515)
at /home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:49254
at Generator.next (<anonymous>)
at Function.<anonymous> (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:79767)
at Generator.next (<anonymous>)
at evaluateSync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:717268)
at Function.sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:715284)
at sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:80263)
at sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:716601)
./src/pages/index.tsx
Error: [BABEL] /home/crepszz/Desktop/boilerplate/boilerplate/src/pages/index.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
at verify (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:397612)
at Function.explode (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:396515)
at /home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:49254
at Generator.next (<anonymous>)
at Function.<anonymous> (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:79767)
at Generator.next (<anonymous>)
at evaluateSync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:717268)
at Function.sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:715284)
at sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1:80263)
at sync (/home/crepszz/Desktop/boilerplate/boilerplate/node_modules/next/dist/compiled/babel/bundle.js:1910:716601)
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
//_应用程序.tsx
import type { AppProps } from 'next/app'
import Head from 'next/head'
import GlobalStyles from '../styles/global'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title>React Avançado</title>
<link rel="shortcut icon" href="" />
<link rel="manifest" href="/manifest.json" />
<meta
name="description"
content="A simple project starter to work with Typescript"
/>
</Head>
<GlobalStyles />
<Component {...pageProps} />
</>
)
}
//__文件.tsx
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext
} from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />)
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()]
}
} finally {
sheet.seal()
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
//index.tsx
import Main from 'components/Main'
export default function Home() {
return <Main />
}
//next.config.js
/**@type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true
}
module.exports = nextConfig
module.exports = {
experimental: {
forceSwcTransforms: true
}
}
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withPWA = require('next-pwa')
const isProd = process.env.NODE_ENV === 'production'
module.exports = withPWA({
pwa: {
dest: 'public',
disable: !isProd
}
})
//package.json
{
"name": "boilerplate",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest",
"test:watch": "yarn test --watch",
"storybook": "start-storybook -s ./public -p 6006",
"build-storybook": "build-storybook"
},
"lint-staged": {
"src/**/*": [
"yarn lint --fix",
"yarn test --findRelatedTests --bail"
]
},
"dependencies": {
"next": "13.0.0",
"next-pwa": "^5.6.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"styled-components": "^5.3.6"
},
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-typescript": "^7.18.6",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/react": "^6.5.13",
"@storybook/testing-library": "^0.0.13",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.2.0",
"@types/node": "18.11.7",
"@types/react": "18.0.24",
"@types/styled-components": "^5.1.26",
"@typescript-eslint/eslint-plugin": "^5.41.0",
"@typescript-eslint/parser": "^5.41.0",
"babel-loader": "^8.2.5",
"babel-plugin-styled-components": "^2.0.7",
"eslint": "8.26.0",
"eslint-config-next": "13.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.2.2",
"jest-environment-jsdom": "^29.2.2",
"jest-styled-components": "^7.1.1",
"prettier": "2.7.1",
"typescript": "4.8.4"
}
}
2条答案
按热度按时间3mpgtkmj1#
删除
yarn.lock
文件和node-modules
文件夹,然后再次运行yarn
以安装依赖项。然后尝试启动本地服务器。此操作对我有效。有关详细信息,请查看https://github.com/storybookjs/storybook/issues/12893jdg4fx2g2#
解决方案是将以下内容添加到
next.config.js
中:请注意,这是一项实验性功能,可能随时中断。