2

something happens to babel, it can't compile my storybook code

I'm trying to assemble a boilerplate with storybook and nextjs

I did a search and couldn't find a solution to this problem, if anyone can help I would be grateful

This is the error I get when trying to build

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.

//_app.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} />
    </>
  )
}

//__document.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"
  }
}
Improve this question
1

2 Answers 2

Reset to default
2

Remove yarn.lock file and node-modules folder and then run yarn again to install dependencies. Try starting local server after that. This worked for me. For more info you can check https://github.com/storybookjs/storybook/issues/12893

Improve this answer
1
  • Thanks, this helped me a lot, spent more than two days to resolve this issue, thanks buddy
    – Dreft
    Commented Sep 26, 2023 at 21:22
0

The solution is to add the following to your next.config.js:

/** @type {import('next').NextConfig} */
module.exports = {
  // ...
  experimental: {
    forceSwcTransforms: true,
  }
}

Please note that this is an experimental feature, and it may break at any time.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.