dist/cjs/server/options ERR_PACKAGE_PATH_NOT_EXPORTED in exports

[Klypalskyi]

Same for me as for @clover-omelnyk @shilman Can you please take a look?

I'm trying to use it with: "next": "12.2.2", "preact": "10.7.3", "preact-render-to-string": "5.2.0", "react": "npm:@preact/compat@^17.1.1", "react-dom": "npm:@preact/compat@^17.1.1"

info  @nrwl/storybook              ^14.5.7  →   ^14.6.0-beta.4
info  @storybook/addon-essentials   ~6.5.9  →  ~7.0.0-alpha.23
info  @storybook/builder-webpack5   ~6.5.9  →  ~7.0.0-alpha.23
info  @storybook/core-server        ~6.5.9  →  ~7.0.0-alpha.23
info  @storybook/manager-webpack5   ~6.5.9  →  ~7.0.0-alpha.10
info  @storybook/react              ~6.5.9  →  ~7.0.0-alpha.23

P.s. 6.5.9 is throwing an error about:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /Users/klypalskyi/Documents/Techery/SunRider/sunrider/node_modules/react/package.json

Originally posted by @Klypalskyi in https://github.com/storybookjs/storybook/issues/13099#issuecomment-1220018684

[Sowed]

Ihave exactly the same issue in an Nx project after running npx sb upgrade --prerelease.

[axlerk]

+1, have the same issue (7.0.0-alpha.35)

[silouanwright]

Exact same issue 7.0.0-alpha.42

I can confirm that running npx storybook@future upgrade --prerelease and being on the latest of everything does not fix the issue.

[val-alex]

+1, have the same issue (7.0.0-beta.0)

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[ild0tt0re]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

@shilman same issue with storybook 7.0.0-beta.19 in a Nx 15.4.2 monorepo.

REPRO

• repo: https://github.com/ild0tt0re/nx-storybook7
• command: pnpm nx storybook core-react-rollup

ERROR

NX Package subpath './dist/cjs/server/options' is not defined by "exports" in /path-to-my-project/dev/nx15/node_modules/@storybook/react/package.json

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './dist/cjs/server/options' is not defined by "exports" in /path-to-my-project/node_modules/@storybook/react/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:692:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /path-to-my-project/dev/nx15/node_modules/.pnpm/@[email protected]_bdez2lbzd4g75f6q5wyqmfcjdy/node_modules/@nrwl/storybook/src/executors/storybook/storybook.impl.js:10:86

[shilman]

@mandarini any idea what's going on here?

[mandarini]

Hellooooooo everyone!!!!!

I am very sad to report that the Nx executors do NOT work with Storybook 7 yet. That, however, does NOT mean that you cannot use Nx with Storybook 7!

What you can do is the following:

1. npx storybook@next upgrade --prerelease to install Storybook v7, or just update manually
2. Do any manual changes to your files that are needed - see the Migration Guide. Make note to add the framework in all your .storybook/main.js files - manually for now :(
3. Go to your project's directory (eg. apps/my-app or libs/my-lib) and run npx storybook dev or npx storybook build

Following these steps, it should work.

Now, if you want to run the task via Nx, you can create a new storybook target for your project using run-commands:

1. Delete or rename your project's storybook and build-storybook targets

2. Run:

nx generate @nrwl/workspace:run-commands storybook --command='npx storybook dev' --project=<MY-PROJECT> --cwd=<PATH-TO-PROJECT-ROOT>

So if your project is a library called my-lib the command would be:

nx generate @nrwl/workspace:run-commands storybook --command='npx storybook dev' --project=my-lib --cwd=libs/my-lib

3. That will add this new target to your libs/my-lib/project.json:

    "storybook": {
      "executor": "nx:run-commands",
      "outputs": [],
      "options": {
        "command": "npx storybook dev",
        "cwd": "libs/aaa"
      }
    }

And you can call this like:

nx run my-lib:storybook

---

NOTE: Please note that this is a temporary solution. And it might as well NOT WORK at all, at this stage. The Storybook v7 support for Nx is on the way. It's not there yet. This is a temporary solution if you want to see it working.

Please please let me know if you have any questions.

[ndelangen]

@mandarini could you provide me with the reproduction where it failed to find the babel config? I just thought of the idea that perhaps the issue is that the config file is being picked up just fine, but the babel-loader is set up so it doesn't include all the files...

[ndelangen]

This issue itself seems to indicate that some code is trying to directly access dist/cjs/server/options, which is no longer possible.. Can we trace where this happens? Seems to be in the NX codebase? I can probably assist getting that fixed @mandarini .

[ild0tt0re]

This issue itself seems to indicate that some code is trying to directly access dist/cjs/server/options, which is no longer possible.. Can we trace where this happens? Seems to be in the NX codebase? I can probably assist getting that fixed @mandarini .

@ndelangen yes i think you are right because the direct access is inside the Nx codebase when Nx invoke the getStorybookFrameworkPath function here: https://github.com/nrwl/nx/blob/6d35fd4d85ca86d39a7518630f069b4d24fab887/packages/storybook/src/executors/utils.ts#L17 from the two Nx executors below

• storybook dev -> https://github.com/nrwl/nx/blob/6d35fd4d85ca86d39a7518630f069b4d24fab887/packages/storybook/src/executors/storybook/storybook.impl.ts#L26
• storybook build -> https://github.com/nrwl/nx/blob/6d35fd4d85ca86d39a7518630f069b4d24fab887/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts#L23

[mandarini]

@ndelangen Here is my reproduction repository: https://github.com/mandarini/imported-libs

Here's the error.

To test it out and reproduce:

git checkout sb/migrate-7
yarn
cd apps/main-webpack
npx storybook build

[mandarini]

@ndelangen @ild0tt0re the thing is that if you're using Storybook 7, in my reproduction issue, I am just calling directly npx storybook build, so I'm not using @nrwl/storybook at all!!! I am just calling directly the storybook build, you see.

So I'm not using the Nx executors you link above at all for Storybook 7.

[mandarini]

Ohhhh I see the confusion. The error reported initially in this issue is a different error than the one I am having. The error posted in the issue is indeed due to these imports that @ild0tt0re is talking about. The two implementations of Nx need to be refactored, to use the new standalone build. I have not done that yet, and that's the reason one cannot use the Nx executors with Storybook v7.

Now, the issue I am having is something totally different. :)

[AndreaPontrandolfo]

I'm having this issue and we have nothing to do with NX. This seems to be a issue with the Storybook vesion 7.0.0-beta.43

Here is how my package.json looks:

  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "module": "./dist/index.js",
  "sideEffects": false,
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  },