Building is stuck forever after migration from v6.x to the v8.4.1 (Nextjs framework)

[tanya-tipold]

Summary

Hello everyone.

We had a lib of the components with the storybook version 6.x.
Then we're done the migration to v8.4.1. with npx storybook@latest upgrade

After the migration is done, the building of the storybook stuck forever

yarn storybook
yarn run v1.22.22
warning ../../../package.json: No license field
$ NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 3001
@storybook/core v8.4.1

info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using SWC as compiler
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/3 entries 3/8 dependencies 0/2 modulesinfo Using tsconfig paths for react-docgen
61% building 2/3 entries 9013/9031 dependencies 2300/2471 modules

Package.json

{
  "name": "@ptf/ui",
  "description": "ptf ui library for React components",
  "keywords": [],
  "version": "1.43.7",
  "repository": {
    "type": "git",
    "url": "https://gitlab.com/powertofly/frontend/ptf-ui"
  },
  "publishConfig": {
    "@ptf:registry": "https://gitlab.com/api/v4/projects/35502819/packages/npm/"
  },
  "license": "UNLICENSED",
  "main": "cjs/index.js",
  "module": "esm/index.js",
  "types": "index.d.ts",
  "files": [
    "cjs/",
    "esm/",
    "vendors/",
    "index.d.ts"
  ],
  "scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage --passWithNoTests --reporters=default --reporters=jest-junit",
    "test:ci": "jest --ci",
    "test:file": "jest --env=jsdom --findRelatedTests --watch",
    "tsc": "tsc --noEmit",
    "lint": "eslint .",
    "clean": "rm -f index.d.ts && rimraf cjs && rimraf esm",
    "prebuild": "yarn clean",
    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
    "postbuild": "rimraf temp",
    "prepublishOnly": "yarn build",
    "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 3001",
    "build-storybook": "storybook build",
    "postversion": "git push origin && git push origin --tags",
    "release:major": "generate-changelog -M && git add CHANGELOG.md && git commit -m 'update CHANGELOG.md' && yarn version --major",
    "release:minor": "generate-changelog -m && git add CHANGELOG.md && git commit -m 'update CHANGELOG.md' && yarn version --minor",
    "release:patch": "generate-changelog -p && git add CHANGELOG.md && git commit -m 'update CHANGELOG.md' && yarn version --patch"
  },
  "engines": {
    "node": ">=16.17"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@chromatic-com/storybook": "^3",
    "@datadog/browser-rum": "^4.35.0",
    "@fontsource/open-sans": "^4.5.8",
    "@fontsource/roboto-mono": "^4.5.5",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/pro-light-svg-icons": "^6.4.2",
    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^21.0.2",
    "@rollup/plugin-image": "^3.0.1",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-typescript": "^8.3.2",
    "@storybook/addon-actions": "^8.4.1",
    "@storybook/addon-essentials": "^8.4.1",
    "@storybook/addon-interactions": "^8.4.1",
    "@storybook/addon-links": "^8.4.1",
    "@storybook/addon-mdx-gfm": "^8.4.1",
    "@storybook/nextjs": "^8.4.1",
    "@storybook/react": "^8.4.1",
    "@storybook/test": "^8.4.1",
    "@types/react": "17.x.x",
    "@types/react-dom": "17.x.x",
    "babel-loader": "^8.2.5",
    "babel-plugin-module-resolver": "^4.1.0",
    "chromatic": "^6.10.2",
    "eslint": "^8.15.0",
    "eslint-plugin-storybook": "^0.11.0",
    "fetch-to-curl": "^0.6.0",
    "generate-changelog": "^1.8.0",
    "react-query": "^3.27.0",
    "react-semantic-ui-range": "^0.7.1",
    "rimraf": "^3.0.2",
    "rollup": "^2.72.1",
    "rollup-plugin-dts": "^4.2.0",
    "rollup-plugin-internal": "^1.0.4",
    "rollup-plugin-rename": "^1.0.1",
    "rollup-plugin-rename-node-modules": "^1.3.1",
    "rollup-plugin-terser": "^7.0.2",
    "semantic-ui-react": "^2.1.4",
    "tslib": "^2.3.1",
    "typescript": "^4.6.4"
  },
  "peerDependencies": {
    "@datadog/browser-rum": ">=5",
    "@fortawesome/fontawesome-svg-core": ">=6.1.1 <7",
    "@fortawesome/free-brands-svg-icons": ">=6.1.1 <7",
    "@fortawesome/pro-light-svg-icons": ">=6.1.1 <7",
    "@fortawesome/pro-solid-svg-icons": ">=6.1.1 <7",
    "@fortawesome/react-fontawesome": ">=0.1.18 <0.2",
    "dayjs": ">=1.11.13 <2",
    "fetch-to-curl": ">=0.6.0",
    "moment-timezone": ">=0.5.46",
    "react-query": ">=3 <4",
    "react-semantic-ui-range": ">=0.7 <0.8",
    "semantic-ui-react": ">=2 <3"
  },
  "dependencies": {
    "@artsy/fresnel": "^3.5.0",
    "@react-pdf/renderer": "^3.1.12",
    "@testing-library/jest-dom": "^6.1.2",
    "@testing-library/react": "^14.0.0",
    "@tinymce/tinymce-react": "^4.3.0",
    "@tippyjs/react": "^4.2.6",
    "@types/inline-style-prefixer": "^5.0.0",
    "@types/jest": "^29.5.4",
    "@types/react-pdf": "^6.2.0",
    "@types/react-slick": "^0.23.10",
    "@types/tinymce": "^4.6.5",
    "@typescript-eslint/eslint-plugin": "5.48.1",
    "babel-jest": "^29.6.4",
    "classnames": "^2.3.1",
    "dayjs": "1.11.13",
    "eslint-config-next": "^13.1.6",
    "inline-style-prefixer": "^6.0.1",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.4",
    "jest-junit": "^16.0.0",
    "jspdf": "^2.5.1",
    "kecasn": "^0.4.0",
    "lint-staged": "13.1.0",
    "moment-timezone": "0.5.46",
    "next": "^15.0.2",
    "prettier": "2.8.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-easy-crop": "^4.6.3",
    "react-intl": "^6.2.8",
    "react-pdf": "^5.3.2",
    "react-slick": "^0.29.0",
    "react-smooth-scroll-hook": "^1.3.4",
    "recharts": "^2.3.2",
    "storybook": "^8.4.1"
  },
  "sideEffects": [
    "*.css"
  ],
  "readme": "ERROR: No README data found!",
  "browserslist": [
    "cover 96%"
  ]
}

main.ts

import type { StorybookConfig } from "@storybook/nextjs"

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
}

export default config

Do you have, please, any instruction what to check/change to unblock the building.

Thank you.

Additional information

No response

Create a reproduction

No response