Core: Resolve builders relatively to config file

[merceyz]

Issue:

When a user specifies a builder without using the absolute path it's resolved relative to @storybook/core-server which makes it rely on hoisting to locate it

What I did

Update @storybook/core-server to resolve the builder relative to the config file

How to test

Try using the Webpack 5 builder without resolving it up front in the config file with PnP

[gaetanmaisse]

💪🏻 Thanks for the help!

[shilman]

LGTM! Thanks @merceyz 🙏

[kud]

info @storybook/react v6.3.0-alpha.7
info
info => Loading presets
info => Loading 1 config file in "/Users/kud/Projects/_contexte/lois-webapp/.storybook"
info => Loading 7 other files in "/Users/kud/Projects/_contexte/lois-webapp/.storybook"
WARN unable to find package.json for framer-motion
info => Using prebuilt manager
info => Adding stories defined in "/Users/kud/Projects/_contexte/lois-webapp/.storybook/main.js"
WARN unable to find package.json for framer-motion
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wdm｣: wait until bundle finished:
/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/util/MapHelpers.js:17
	const value = map.get(key);
	                  ^

TypeError: Cannot read property 'get' of undefined
    at exports.provide (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/util/MapHelpers.js:17:20)

I'm so sad.

// main.js

require("@babel/register")

const custom = require("../webpack.babel.js").default({ stage: "local" })

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: "webpack5",
  },
  webpackFinal: (config) => {
    return {
      ...config,
      module: { ...config.module, rules: custom.module.rules },
    }
  },
}

// package.json

"devDependencies": {
    "@babel/core": "7.13.15",
    "@babel/node": "7.13.13",
    "@babel/plugin-proposal-class-properties": "7.13.0",
    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
    "@babel/plugin-proposal-optional-chaining": "7.13.12",
    "@babel/plugin-transform-runtime": "7.13.15",
    "@babel/preset-env": "7.13.15",
    "@babel/preset-react": "7.13.13",
    "@babel/register": "7.13.14",
    "@emotion/babel-plugin": "11.3.0",
    "@hot-loader/react-dom": "17.0.1",
    "@storybook/addon-actions": "6.3.0-alpha.7",
    "@storybook/addon-essentials": "6.3.0-alpha.7",
    "@storybook/addon-links": "6.3.0-alpha.7",
    "@storybook/builder-webpack5": "6.3.0-alpha.7",
    "@storybook/react": "6.3.0-alpha.7",
    "@types/prop-types": "15.7.3",
    "@types/react": "17.0.3",
    "@types/styled-components": "5.1.9",
    "autoprefixer": "10.2.5",
    "aws-sdk": "2.887.0",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.2.2",
    "babel-plugin-import": "1.13.3",
    "babel-plugin-styled-components": "1.12.0",
    "copy-webpack-plugin": "8.1.1",
    "css-loader": "5.2.1",
    "cssnano": "5.0.1",
    "cypress": "7.1.0",
    "eslint": "7.24.0",
    "eslint-config-prettier": "8.2.0",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-loader": "4.0.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-react": "7.23.2",
    "file-loader": "6.2.0",
    "fixme": "0.6.0",
    "html-webpack-plugin": "5.3.1",
    "image-webpack-loader": "7.0.1",
    "last-call-webpack-plugin": "3.0.0",
    "mark.js": "8.11.1",
    "mini-css-extract-plugin": "1.4.1",
    "minimist": "1.2.5",
    "msw": "0.28.1",
    "parcel-bundler": "1.12.5",
    "plop": "2.7.4",
    "postcss-custom-media": "8.0.0",
    "postcss-loader": "5.2.0",
    "postcss-reporter": "7.0.2",
    "prettier": "2.2.1",
    "react-hot-loader": "4.13.0",
    "s3-folder-upload": "2.3.5",
    "spa-http-server": "0.9.0",
    "style-loader": "2.0.0",
    "stylelint": "13.12.0",
    "stylelint-config-prettier": "8.0.2",
    "stylelint-config-recommended": "4.0.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-custom-processor-loader": "0.6.0",
    "stylelint-high-performance-animation": "1.5.2",
    "stylelint-performance-animation": "1.2.2",
    "stylelint-processor-styled-components": "1.10.0",
    "stylelint-webpack-plugin": "2.1.1",
    "url-loader": "4.1.1",
    "webpack": "5.33.2",
    "webpack-bundle-analyzer": "4.4.1",
    "webpack-cli": "4.6.0",
    "webpack-dev-server": "3.11.2",
    "webpack-merge": "5.7.3"
  },
  "dependencies": {
    "@appbaseio/reactivesearch": "3.17.0",
    "@babel/runtime": "7.13.10",
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.3.0",
    "@formatjs/intl-locale": "2.4.22",
    "@formatjs/intl-pluralrules": "4.0.14",
    "@formatjs/intl-relativetimeformat": "8.1.5",
    "@researchgate/react-intersection-observer": "1.3.5",
    "@sentry/react": "6.2.5",
    "@sentry/tracing": "6.2.5",
    "@welldone-software/why-did-you-render": "6.1.1",
    "bodybuilder": "2.4.0",
    "change-case": "4.1.2",
    "classnames": "2.3.1",
    "content-disposition": "0.5.3",
    "dayjs": "1.10.4",
    "elfi": "2.0.2",
    "evergreen-ui": "5.1.2",
    "framer-motion": "4.1.3",
    "immutable": "3.8.2",
    "js-cookie": "2.2.1",
    "json-api-normalizer": "1.0.4",
    "json-api-resource": "0.8.0",
    "named-urls": "2.0.0",
    "normalize.css": "8.0.1",
    "prop-types": "15.7.2",
    "query-string": "7.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-helmet-async": "1.0.9",
    "react-hotkeys-hook": "3.3.0",
    "react-input-autosize": "3.0.0",
    "react-intl": "5.15.8",
    "react-outside-click-handler": "1.3.0",
    "react-query": "3.13.8",
    "react-responsive": "8.2.0",
    "react-router-dom": "5.2.0",
    "react-spinners": "0.10.6",
    "react-toastify": "7.0.3",
    "react-use": "17.2.3",
    "react-waypoint": "9.0.3",
    "redux-object": "1.0.0",
    "smoothscroll-polyfill": "0.4.4",
    "styled-components": "5.2.3",
    "title-case": "3.0.3",
    "ua-parser-js": "0.7.28",
    "upper-case": "2.0.2",
    "upper-case-first": "2.0.2",
    "whatwg-fetch": "3.6.2",
    "zustand": "3.4.1"
  }

Do you need any more information? I'd love to make storybook work.

[shilman]

@kud looks like you are running into this: #14403