reactjs 如何解决错误：“您为节点类型TSSatisfiesExpression提供了一个访问者，但它不是有效类型”？

slmsl1lt  于 2022-11-04  发布在  React
关注(0)|答案(2)|浏览(310)

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"
  }
}
reactjs

2条答案

按热度按时间
3mpgtkmj

3mpgtkmj1#

删除yarn.lock文件和node-modules文件夹，然后再次运行yarn以安装依赖项。然后尝试启动本地服务器。此操作对我有效。有关详细信息，请查看https://github.com/storybookjs/storybook/issues/12893

赞(0）分享  回复(0）举报  2022-11-04
jdg4fx2g

jdg4fx2g2#

解决方案是将以下内容添加到next.config.js中：

module.exports = {
  experimental: {
    forceSwcTransforms: true,
  },
}

请注意，这是一项实验性功能，可能随时中断。

赞(0）分享  回复(0）举报  2022-11-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com