Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: No builder configured! #24071

Closed
Tracked by #23515
yannbf opened this issue Sep 4, 2023 · 6 comments
Closed
Tracked by #23515

Error: No builder configured! #24071

yannbf opened this issue Sep 4, 2023 · 6 comments

Comments

@yannbf
Copy link
Member

yannbf commented Sep 4, 2023

Some projects, when running Storybook, break with the following error:

WARN   Failed to load preset: "@storybook/angular/preset"
ERR! Error: Cannot find module '@storybook/angular/preset'
ERR! Require stack:
ERR! - /project-name/node_modules/@storybook/core-common/dist/index.js
ERR! - /project-name/node_modules/@storybook/core-server/dist/index.js
ERR! - /project-name/packages/angular-app/node_modules/@storybook/angular/dist/builders/start-storybook/index.js
ERR! - /project-name/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
ERR! - /project-name/node_modules/@angular-devkit/architect/node/index.js
ERR! - /project-name/node_modules/@angular/cli/src/command-builder/architect-base-command-module.js
ERR! - /project-name/node_modules/@angular/cli/src/command-builder/architect-command-module.js
ERR! - /project-name/node_modules/@angular/cli/src/commands/build/cli.js
ERR! - /project-name/node_modules/@angular/cli/src/command-builder/command-runner.js
ERR! - /project-name/node_modules/@angular/cli/lib/cli/index.js
ERR! - /project-name/node_modules/@angular/cli/lib/init.js
ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
ERR!     at Module._resolveFilename (/project-name/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Module._load (node:internal/modules/cjs/loader:920:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1141:19)
ERR!     at require (node:internal/modules/cjs/helpers:110:18)
ERR!     at interopRequireDefault (/project-name/node_modules/@storybook/core-common/dist/index.js:6:21)
ERR!     at getContent (/project-name/node_modules/@storybook/core-common/dist/index.js:13:332)
ERR!     at loadPreset (/project-name/node_modules/@storybook/core-common/dist/index.js:13:517)
ERR!     at /project-name/node_modules/@storybook/core-common/dist/index.js:15:411
ERR!     at Array.map (<anonymous>)
ERR! Error: no builder configured!
ERR!     at getPreviewBuilder (/project-name/node_modules/@storybook/core-server/dist/index.js:10:1912)
ERR!     at buildDevStandalone (/project-name/node_modules/@storybook/core-server/dist/index.js:40:2022)
ERR!     at async withTelemetry (/project-name/node_modules/@storybook/core-server/dist/index.js:27:3469)

It's really tough to find a proper reproduction, and the only place I have seen steps to reproduce was in this comment. However, even when following the steps, I was not able to reproduce the issue.

It seems to be related to Storybook dependencies not being hoisted correctly, and when the @storybook/core-server package tries to resolve a framework package, such as @storybook/angular, it won't find it, because the package is located elsewhere, deeper into a different node_modules directory. If you take a closer look, you will notice the paths of which the packages are located:

ERR! - /project-name/node_modules/@storybook/core-server/dist/index.js
ERR! - /project-name/packages/angular-app/node_modules/@storybook/angular/dist/builders/start-storybook/index.js

And that seems to be the issue. Similar issues were reported in #21710 and there was a PR with a proposed fix at #23458 which got release in 7.1.1 and 7.2.0

However, reports indicate that this issue continues to happen, in more recent versions of Storybook (e.g. 7.4.0)

The issue might occur in different places in the codebase, with slightly different messages:

  • Invariant failed: No builder configured in core.builder
  • Invariant failed: no builder configured!
  • no builder configured!

❗❗ If you ever encounter this issue in your project

Please share detailed reproduction steps, whether you are using a monorepo, and which, or even better, a repository with the reproduction, so we can finally fix this issue. We greatly appreciate the help!

@freitasfa-bahag
Copy link

I believe I'm facing a similar issue. Our project was using @storybook/react-webpack5 and we decided to migrate to the @storybook/nextjs framework. Firstly I was using the 7.0.27 version of Storybook and the error occurred. After upgrading it to 7.4.0 the same error still happens:

yarn run v1.22.19
$ storybook dev -p 6006
@storybook/cli v7.4.0

WARN   Failed to load preset: "@storybook/nextjs/preset"
Error: Cannot find module 'next/constants'
Require stack:
- ./node_modules/@storybook/nextjs/dist/preset.js
- ./node_modules/@storybook/core-common/dist/index.js
- ./node_modules/@storybook/telemetry/dist/index.js
- ./node_modules/@storybook/cli/dist/generate.js
- ./node_modules/@storybook/cli/bin/index.js
- ./node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4768:36)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (./node_modules/@storybook/nextjs/dist/preset.js:1:8432)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (./node_modules/esbuild-register/dist/node.js:4807:24)
WARN Could not resolve addon "@storybook/addon-storysource", skipping. Is it installed?
WARN Could not resolve addon "@storybook/addon-actions/register", skipping. Is it installed?
info Found existing addon "@storybook/addon-actions/register", skipping.
Error: Invariant failed: No builder configured in core.builder
    at invariant (./node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14:11)
    at buildDevStandalone (./node_modules/@storybook/core-server/dist/index.js:116:1867)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:101:4155)
    at async dev (./node_modules/@storybook/cli/dist/generate.js:502:401)
    at async Command.<anonymous> (./node_modules/@storybook/cli/dist/generate.js:504:225)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

WARN Could not resolve addon "@storybook/addon-storysource", skipping. Is it installed?
WARN Could not resolve addon "@storybook/addon-actions/register", skipping. Is it installed?
info Found existing addon "@storybook/addon-actions/register", skipping.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is my main.ts file:

import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'

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

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*/*.stories.@(js|ts|tsx)'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-actions/register',
    '@storybook/addon-designs',
    {
      name: '@storybook/addon-styling',
      options: {
        postCss: {
          implementation: require('postcss')
        }
      }
    }
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  docs: {
    autodocs: true
  },
  webpackFinal: async config => {
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions
        })
      ]
    }

    return config
  }
}

export default config

and my dependencies

 "dependencies": {
    "autoprefixer": "10.4.14",
    "classnames": "^2.3.2",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "html-react-parser": "^4.2.1",
    "http-server": "^14.1.1",
    "postcss": "8.4.26",
    "postcss-preset-env": "^9.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-jss": "^10.10.0",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.9",
    "@babel/core": "^7.22.9",
    "@babel/node": "^7.22.6",
    "@babel/plugin-proposal-decorators": "^7.22.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@babel/plugin-transform-runtime": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@commitlint/cli": "^17.6.6",
    "@commitlint/config-conventional": "^17.6.6",
    "@storybook/addon-designs": "^7.0.1",
    "@storybook/addon-essentials": "^7.0.27",
    "@storybook/addon-interactions": "^7.1.1",
    "@storybook/addon-links": "^7.1.1",
    "@storybook/addon-styling": "^1.3.3",
    "@storybook/react": "^7.0.27",
    "@storybook/react-webpack5": "^7.0.27",
    "@storybook/theming": "^7.0.27",
    "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "babel-plugin-module-resolver": "^5.0.0",
    "husky": "^8.0.1",
    "storybook": "^7.0.27",
    "storybook-figma": "^0.1.2",
    "tsconfig-paths-webpack-plugin": "^4.1.0"
  },
  "resolutions": {
    "semver": ">=7.5.2",
    "protobufjs": ">=7.2.4",
    "word-wrap": ">=1.2.4"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.1.3 || ^4.8.3"
  }

@yannbf
Copy link
Member Author

yannbf commented Sep 6, 2023

Thanks @freitasfa-bahag ! Are the dependencies before or after you migrated? Did you migrate by running npx storybook@latest automigrate or by hand? From the dependencies, it seems like you have @storybook/react-webpack5 and not @storybook/nextjs, which could be the reason you're having such issue. If that is the case, it is not related to this issue. Can you check?

@freitasfa-bahag
Copy link

freitasfa-bahag commented Sep 6, 2023

Thanks for the fast reply @yannbf ! I used both npx storybook@latest upgrade and npx storybook@latest automigrate when upgrading. About the dependencies, I'm sorry but I pasted a not correct version of my package.json (I was testing some stuffs, and removed the @storybook/nextjs dependency at a point. I've just tried again all the flow, and the error persists. My final package.json looks like this:

{
  "name": "@bahag/sf-storybook",
  "description": "UI Library",
  "license": "UNLICENSED",
  "version": "1.14.0",
  "repository": {
    "type": "git",
  },
  "storybook": {
    "title": "Strybook",
  },
  "main": "dist/index.js",
  "scripts": {
    "lint": "eslint --fix . --ext ts,tsx,js",
    "storybook": "storybook dev -p 6006",
    "prepare": "husky install",
    "build": "yarn build-css-config && yarn build-src && yarn copy-css",
  },
  "release": {
    "extends": [
      "./release.config.js"
    ]
  },
  "engines": {
    "node": ">= 12.0",
    "npm": ">= 8"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "classnames": "^2.3.2",
    "cookie-parser": "^1.4.6",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "html-react-parser": "^4.2.1",
    "http-server": "^14.1.1",
    "jsonwebtoken": "^9.0.1",
    "postcss": "8.4.26",
    "postcss-preset-env": "^9.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-jss": "^10.10.0",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.9",
    "@babel/core": "^7.22.9",
    "@babel/node": "^7.22.6",
    "@babel/plugin-proposal-decorators": "^7.22.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@babel/plugin-transform-runtime": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@commitlint/cli": "^17.6.6",
    "@commitlint/config-conventional": "^17.6.6",
    "@storybook/addon-designs": "^7.0.5",
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-interactions": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/addon-mdx-gfm": "^7.4.0",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/nextjs": "^7.4.0",
    "@storybook/react": "^7.4.0",
    "@storybook/react-webpack5": "^7.4.0",
    "@storybook/theming": "^7.4.0",
    "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "babel-plugin-module-resolver": "^5.0.0",
    "husky": "^8.0.1",
    "storybook": "^7.4.0",
    "storybook-figma": "^0.1.2",
    "tsconfig-paths-webpack-plugin": "^4.1.0"
  },
  "resolutions": {
    "semver": ">=7.5.2",
    "protobufjs": ">=7.2.4",
    "word-wrap": ">=1.2.4"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.1.3 || ^4.8.3"
  }
}

@freitasfa-bahag
Copy link

Just found that besides adding the @storybook/nextjs dependency, I had to install next in the project as well. My bad 😅

@yannbf
Copy link
Member Author

yannbf commented Sep 15, 2023

Thank you so much for explaining your use case @freitasfa-bahag! It made me understand the issue better, and now Storybook will display two different, more helpful errors that hopefully will get us further in fixing these issues for users!

@yannbf
Copy link
Member Author

yannbf commented Apr 8, 2024

Hey everyone, I'm closing this issue as it's been a long time and no one else reported it so far. If you ever encounter this issue, please report it with as much detail as you can, alongside a reproduction. Thank you!

@yannbf yannbf closed this as completed Apr 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

3 participants