Trying to require the package "@emotion/core" without it being listed in its dependencies

Describe the bug

When using sotrybook within a yarn PnP project, we get this error:

Trying to require the package "@emotion/core" without it being listed in its dependencies

Here is how to fix this:

https://yarnpkg.com/en/docs/pnp/troubleshooting#toc-is-trying-to-require-without-it-being-listed-in-its-dependencies

Fixes for https://github.com/storybooks/storybook/issues/5919 do not fix this.

To Reproduce

1. Take a valid storybook project
2. Enable yarn pnp on the project by adding this to package.json:

"installConfig": {
    "pnp": true
  }, 

1. storybook start

Expected behavior

Correct dependency declaration that does not create this problem

Screenshots

ERR! Error: Package "@storybook/ui@5.0.11" (via "/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js") is trying to require the package "@emotion/core" (via "@emotion/core/package.json") without it being listed in its dependencies (@storybook/addons, @storybook/client-logger, @storybook/components, @storybook/core-events, @storybook/router, @storybook/theming, core-js, fast-deep-equal, fuzzy-search, global, history, keycode, lodash.debounce, lodash.isequal, lodash.mergewith, lodash.pick, lodash.sortby, lodash.throttle, markdown-to-jsx, memoizerific, polished, prop-types, qs, react, react-dom, react-draggable, react-helmet-async, react-hotkeys, react-lifecycles-compat, react-modal, react-resize-detector, recompose, semver, telejson, util-deprecate, @storybook/ui)
ERR!     at makeError (/Users/vincent/Code/sterblue/.pnp.js:55:17)
ERR!     at Object.resolveToUnqualified (/Users/vincent/Code/sterblue/.pnp.js:34411:17)
ERR!     at Object.resolveRequest (/Users/vincent/Code/sterblue/.pnp.js:34482:31)
ERR!     at Function.Module._resolveFilename (/Users/vincent/Code/sterblue/.pnp.js:34664:30)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.<anonymous> (/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js:6:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!     at Function.Module._load (/Users/vincent/Code/sterblue/.pnp.js:34607:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:637:17)
ERR!     at require (internal/modules/cjs/helpers.js:22:18)
ERR!     at Object.<anonymous> (/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-core-5.0.11-e941cf18ef62ee962607d1fb24c57b9cafc88cfd/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!  { Error: Package "@storybook/ui@5.0.11" (via "/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js") is trying to require the package "@emotion/core" (via "@emotion/core/package.json") without it being listed in its dependencies (@storybook/addons, @storybook/client-logger, @storybook/components, @storybook/core-events, @storybook/router, @storybook/theming, core-js, fast-deep-equal, fuzzy-search, global, history, keycode, lodash.debounce, lodash.isequal, lodash.mergewith, lodash.pick, lodash.sortby, lodash.throttle, markdown-to-jsx, memoizerific, polished, prop-types, qs, react, react-dom, react-draggable, react-helmet-async, react-hotkeys, react-lifecycles-compat, react-modal, react-resize-detector, recompose, semver, telejson, util-deprecate, @storybook/ui)
ERR!     at makeError (/Users/vincent/Code/sterblue/.pnp.js:55:17)
ERR!     at Object.resolveToUnqualified (/Users/vincent/Code/sterblue/.pnp.js:34411:17)
ERR!     at Object.resolveRequest (/Users/vincent/Code/sterblue/.pnp.js:34482:31)
ERR!     at Function.Module._resolveFilename (/Users/vincent/Code/sterblue/.pnp.js:34664:30)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.<anonymous> (/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js:6:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!     at Function.Module._load (/Users/vincent/Code/sterblue/.pnp.js:34607:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:637:17)
ERR!     at require (internal/modules/cjs/helpers.js:22:18)
ERR!     at Object.<anonymous> (/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-core-5.0.11-e941cf18ef62ee962607d1fb24c57b9cafc88cfd/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!   stack:
ERR!    'Error: Package "@storybook/ui@5.0.11" (via "/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js") is trying to require the package "@emotion/core" (via "@emotion/core/package.json") without it being listed in its dependencies (@storybook/addons, @storybook/client-logger, @storybook/components, @storybook/core-events, @storybook/router, @storybook/theming, core-js, fast-deep-equal, fuzzy-search, global, history, keycode, lodash.debounce, lodash.isequal, lodash.mergewith, lodash.pick, lodash.sortby, lodash.throttle, markdown-to-jsx, memoizerific, polished, prop-types, qs, react, react-dom, react-draggable, react-helmet-async, react-hotkeys, react-lifecycles-compat, react-modal, react-resize-detector, recompose, semver, telejson, util-deprecate, @storybook/ui)\n    at makeError (/Users/vincent/Code/sterblue/.pnp.js:55:17)\n    at Object.resolveToUnqualified (/Users/vincent/Code/sterblue/.pnp.js:34411:17)\n    at Object.resolveRequest (/Users/vincent/Code/sterblue/.pnp.js:34482:31)\n    at Function.Module._resolveFilename (/Users/vincent/Code/sterblue/.pnp.js:34664:30)\n    at Function.resolve (internal/modules/cjs/helpers.js:30:19)\n    at Object.<anonymous> (/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js:6:36)\n    at Module._compile (internal/modules/cjs/loader.js:701:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)\n    at Module.load (internal/modules/cjs/loader.js:600:32)\n    at Function.Module._load (/Users/vincent/Code/sterblue/.pnp.js:34607:14)\n    at Module.require (internal/modules/cjs/loader.js:637:17)\n    at require (internal/modules/cjs/helpers.js:22:18)\n    at Object.<anonymous> (/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-core-5.0.11-e941cf18ef62ee962607d1fb24c57b9cafc88cfd/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    at Module._compile (internal/modules/cjs/loader.js:701:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)\n    at Module.load (internal/modules/cjs/loader.js:600:32)',
ERR!   code: 'UNDECLARED_DEPENDENCY',
ERR!   data:
ERR!    { request: '@emotion/core/package.json',
ERR!      issuer:
ERR!       '/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/paths.js',
ERR!      issuerLocator: { name: '@storybook/ui', reference: '5.0.11' },
ERR!      dependencyName: '@emotion/core',
ERR!      candidates:
ERR!       [ '@storybook/addons',
ERR!         '@storybook/client-logger',
ERR!         '@storybook/components',
ERR!         '@storybook/core-events',
ERR!         '@storybook/router',
ERR!         '@storybook/theming',
ERR!         'core-js',
ERR!         'fast-deep-equal',
ERR!         'fuzzy-search',
ERR!         'global',
ERR!         'history',
ERR!         'keycode',
ERR!         'lodash.debounce',
ERR!         'lodash.isequal',
ERR!         'lodash.mergewith',
ERR!         'lodash.pick',
ERR!         'lodash.sortby',
ERR!         'lodash.throttle',
ERR!         'markdown-to-jsx',
ERR!         'memoizerific',
ERR!         'polished',
ERR!         'prop-types',
ERR!         'qs',
ERR!         'react',
ERR!         'react-dom',
ERR!         'react-draggable',
ERR!         'react-helmet-async',
ERR!         'react-hotkeys',
ERR!         'react-lifecycles-compat',
ERR!         'react-modal',
ERR!         'react-resize-detector',
ERR!         'recompose',
ERR!         'semver',
ERR!         'telejson',
ERR!         'util-deprecate',
ERR!         '@storybook/ui' ] } }

Code snippets If applicable, add code samples to help explain your problem.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Framework: react
• Version: 5.0.11

Additional context

@arcanis Should now about this

[arcanis]

I made a quick first pass. My methodology:

$> yarn create react-app sb-test && cd sb-test
$> yarn add @storybook/cli && yarn sb init
$> yarn policies set-version berry

This gives us a project with Storybook using Yarn v2 (Yarn v2 is where most of the development occurs nowadays, and in particular it uses PnP by default; it’s the best place to debug such issues).

---

I had to do the following changes to the resulting lockfile in order to get somewhere (note that except for pnp-webpack-plugin, all those dependencies should be listed regardless of whether we’re operating in PnP or non-PnP mode; not listing them makes Storybook subject to hoisting issues):

• storybook/core:
  • Adds pnp-webpack-plugin to the dependencies
  • Adds babel-plugin-add-react-displayname to the dependencies
• storybook/ui:
  • Adds @emotion/core to the dependencies
  • Adds @emotion/styled to the dependencies
  • Adds @storybook/channel to the dependencies
  • Adds emotion-theming to the dependencies
  • Adds regenerator-runtime to the dependencies

---

Additionally, I had to “unplug” Storybook in my package.json, as it tries to create new directories inside its own directory at runtime (Yarn 2 keeps by default all packages within their own archives, which prevents them from modifying their sources. Unplugging a package means that it will be unpacked within their own directory, which we don’t recommend as it breaks zero-installs):

{
  "dependenciesMeta": {
    "@storybook/core": {
      "unplugged": true
    }
  }
}

---

The pnp-webpack-plugin now has to be injected inside the configuration. I found a few places where this needs to be done:

• https://github.com/storybooks/storybook/blob/next/lib/core/src/server/preview/base-webpack.config.js
• https://github.com/storybooks/storybook/blob/next/lib/core/src/server/preview/iframe-webpack.config.js
• https://github.com/storybooks/storybook/blob/next/lib/core/src/server/manager/manager-webpack.config.js

Again, I don’t know much about Storybook so I find it curious that there are so many different configuration files - maybe I’m missing something? In particular, the base-webpack file doesn’t seem to be reused by iframe-webpack and manager-webpack, so I don’t know what uses it. Regardless, they need to be modified to contain a code similar to this pseudocode:

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = {
  resolve: {
    plugins: [
      PnpWebpackPlugin,
    ],
  },
};

---

The babel-loader helper also has to be modified to use require.resolve('babel-loader') instead of just babel-loader.

---

After following all those steps I ended up on something that builds, but running it I get a runtime error:

vendors~main.204baa2a64d34d32b96d.bundle.js:22447 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (vendors~main.204baa2a64d34d32b96d.bundle.js:22447)
    at Module../.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_object-keys.js (vendors~main.204baa2a64d34d32b96d.bundle.js:22450)
    at __webpack_require__ (runtime~main.e27e72d77edfc378d751.bundle.js:80)
    at Object../.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_object-dps.js (vendors~main.204baa2a64d34d32b96d.bundle.js:22260)
    at __webpack_require__ (runtime~main.e27e72d77edfc378d751.bundle.js:80)
    at Object../.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_object-create.js (vendors~main.204baa2a64d34d32b96d.bundle.js:22164)
    at __webpack_require__ (runtime~main.e27e72d77edfc378d751.bundle.js:80)
    at Object../.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_iter-create.js (vendors~main.204baa2a64d34d32b96d.bundle.js:21648)
    at __webpack_require__ (runtime~main.e27e72d77edfc378d751.bundle.js:80)
    at Module.<anonymous> (vendors~main.204baa2a64d34d32b96d.bundle.js:21694)

The faulty code is the module.exports assignment in the following snippet:

/***/ "./.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_object-keys.js":
/*!*********************************************************************************************************************************************************!*\
  !*** ./.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_object-keys.js ***!
  \*********************************************************************************************************************************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* WEBPACK VAR INJECTION */(function(module) {/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/web.dom.iterable */ "./.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/web.dom.iterable.js");
/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__);


// 19.1.2.14 / 15.2.3.14 Object.keys(O)
var $keys = __webpack_require__(/*! ./_object-keys-internal */ "./.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_object-keys-internal.js");

var enumBugKeys = __webpack_require__(/*! ./_enum-bug-keys */ "./.yarn/cache/core-js-npm-2.6.9-f034530cf2064b0812b01d6590542b0dbd4006bc7611ea0ab1bc7cfcc2d17c7f.zip/node_modules/core-js/modules/_enum-bug-keys.js");

module.exports = Object.keys || function keys(O) {
  return $keys(O, enumBugKeys);
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../../webpack-npm-4.32.2-21c8ff8dcc2c4971b61859e9e22de16292dec8acb6d592a55e798a87b574f514.zip/node_modules/webpack/buildin/harmony-module.js */ "./.yarn/cache/webpack-npm-4.32.2-21c8ff8dcc2c4971b61859e9e22de16292dec8acb6d592a55e798a87b574f514.zip/node_modules/webpack/buildin/harmony-module.js")(module)))

/***/ }),

I’m not exactly sure what causes this; more investigation will be needed once the first issues I’ve reported have been fixed!

[crubier]

OMG Ok This works 🎉

It was painful, but it works and the solution is relatively simple in the end, thanks to presets.

The solution is a combination of @arcanis answers + this storybook preset

//pnp-ts-preset.js
const PnpWebpackPlugin = require(require.resolve("pnp-webpack-plugin"));

function webpack(webpackConfig = {}, options = {}) {
  const { module = {}, resolve = {}, resolveLoader = {} } = webpackConfig;
  const { tsLoaderOptions, tsDocgenLoaderOptions, include } = options;

  return {
    ...webpackConfig,
    module: {
      ...module,
      rules: [
        ...(module.rules || []),
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: require.resolve("ts-loader"),
              options: PnpWebpackPlugin.tsLoaderOptions({
                "compilerOptions": {
                  "jsx": "react",
                  "skipLibCheck": true,
                  "esModuleInterop": true,
                  "allowSyntheticDefaultImports": true,
                  "strict": false
                }
              })
            },
            {
              loader: require.resolve("react-docgen-typescript-loader"),
              options: tsDocgenLoaderOptions
            }
          ],
          include
        }
      ]
    },
    resolve: {
      ...resolve,
      extensions: [...(resolve.extensions || []), ".ts", ".tsx"],
      plugins: [...(resolve.plugins || []), PnpWebpackPlugin]
    },
    resolveLoader: {
      ...resolveLoader,
      plugins: [
        ...(resolveLoader.plugins || []),
        PnpWebpackPlugin.moduleLoader("@storybook/react")
      ]
    }
  };
}

function managerWebpack(webpackConfig = {}, options = {}) {
  const { module = {}, resolve = {}, resolveLoader = {} } = webpackConfig;
  const { tsLoaderOptions, tsDocgenLoaderOptions, include } = options;

  return {
    ...webpackConfig,
    module: {
      ...module,
      rules: [
        ...(module.rules || [])
      ]
    },
    resolve: {
      ...resolve,
      extensions: [...(resolve.extensions || []), ".ts", ".tsx"],
      plugins: [...(resolve.plugins || []), PnpWebpackPlugin]
    },
    resolveLoader: {
      ...resolveLoader,
      plugins: [
        ...(resolveLoader.plugins || []),
        // PnpWebpackPlugin.moduleLoader(module)
        PnpWebpackPlugin.moduleLoader("@storybook/react")
      ]
    }
  };
}

module.exports = { webpack, managerWebpack };

// presets.js
const path = require("path");

module.exports = [path.resolve("./.storybook/pnp-ts-preset")];

I will probably make a PR on Friday.

Thanks all !