Beta: issues with types

[bmulholland]

The types were previously imported fine, but with the beta something has broken. Now I get: .storybook/preview.ts(10,42): error TS2307: Cannot find module 'msw-storybook-addon' or its corresponding type declarations.

Happy to debug somehow if I can.

[ChristianMurphy]

Adding on a bit more. This error was not thrown in 2.0.0-beta.0, it started appearing in 2.0.0-beta.1.

Looking at the published package.json, a change that stands out

in beta.0 legacy main and types attributes were used.

  "version": "2.0.0-beta.0",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",

in beta.1 hybrid modern export and legacy main and types are present. Specifically leveraging nested export conditions https://nodejs.org/api/packages.html#nested-conditions and https://www.typescriptlang.org/docs/handbook/modules/reference.html#example-subpaths-conditions-and-extension-substitution

  "version": "2.0.0-beta.1",
  "main": "./dist/index.browser.js",
  "types": "./dist/index.browser.d.ts",
  "exports": {
    "browser": {
      "types": "./dist/index.browser.d.ts",
      "default": "./dist/index.browser.js"
    },
    "react-native": {
      "types": "./dist/index.react-native.d.ts",
      "default": "./dist/index.react-native.js"
    },
    "node": {
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    }
  },

Those two systems may not be playing well together, it may be worth considering moving all the way over to the new export syntax. While in the process it could also be an opportunity to offer an ESM build.

[kettanaito]

Thanks for reporting this!

I believe this is an oversight on my part. The "exports" field must include paths as the first-level keys. This should fix the problem:

"exports": {
  ".": {
    "browser": {
      "types": "./dist/index.browser.d.ts",
      "default": "./dist/index.browser.js"
    },
    "react-native": {
      "types": "./dist/index.react-native.d.ts",
      "default": "./dist/index.react-native.js"
    },
    "node": {
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    }
  },
   "./package.json": "./package.json"
},

Can you please replace the exports key in node_modules/msw-storybook-addon/package.json, rebuild, and let me know if this indeed fixes the issue? Thanks.

[ChristianMurphy]

Thanks @kettanaito! I updated

node_modules/msw-storybook-addon/package.json

{
  "name": "msw-storybook-addon",
  "description": "Mock API requests in Storybook with Mock Service Worker.",
  "version": "2.0.0-beta.1",
  "exports": {
    ".": {
      "browser": {
        "types": "./dist/index.browser.d.ts",
        "default": "./dist/index.browser.js"
      },
      "react-native": {
        "types": "./dist/index.react-native.d.ts",
        "default": "./dist/index.react-native.js"
      },
      "node": {
        "types": "./dist/index.node.d.ts",
        "default": "./dist/index.node.js"
      }
    },
    "./package.json": "./package.json"
  },
  "scripts": {
    "dev": "yarn build --watch",
    "clean": "rimraf ./dist",
    "build": "tsup",
    "prepublishOnly": "yarn clean && yarn build",
    "release": "auto shipit"
  },
  "files": [
    "dist/"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mswjs/msw-storybook-addon.git",
    "directory": "packages/msw-addon"
  },
  "keywords": [
    "storybook-addon",
    "msw",
    "mocking",
    "api",
    "graphql",
    "network",
    "data-state"
  ],
  "author": "Aditya Agarwal (@dev__adi)",
  "bugs": {
    "url": "https://github.com/mswjs/msw-storybook-addon/issues"
  },
  "homepage": "https://msw-sb.vercel.app/",
  "license": "MIT",
  "dependencies": {
    "is-node-process": "^1.0.1"
  },
  "devDependencies": {
    "@auto-it/released": "^10.32.2",
    "auto": "^10.32.2",
    "msw": "^2.0.9",
    "rimraf": "^5.0.5",
    "tsup": "^8.0.1",
    "typescript": "^5.2.2"
  },
  "peerDependencies": {
    "msw": "^2.0.0"
  },
  "storybook": {
    "displayName": "Mock Service Worker",
    "icon": "https://user-images.githubusercontent.com/1671563/144888802-84346d8f-77c9-4377-98c7-4b0364797978.png"
  },
  "auto": {
    "prereleaseBranches": [
      "next",
      "prerelease"
    ],
    "plugins": [
      "npm",
      "released"
    ]
  }
}

Then ran tsc again in my project folder. I get the error:

$ npx tsc
.storybook/preview.ts:2:53 - error TS2307: Cannot find module 'msw-storybook-addon' or its corresponding type declarations.

2 import { initialize, mswLoader, mswDecorator } from "msw-storybook-addon";
                                                      ~~~~~~~~~~~~~~~~~~~~~

Is there an additional step needed to rebuild?

[yannbf]

Thanks @kettanaito! I updated

node_modules/msw-storybook-addon/package.json Then ran tsc again in my project folder. I get the error:

$ npx tsc
.storybook/preview.ts:2:53 - error TS2307: Cannot find module 'msw-storybook-addon' or its corresponding type declarations.

2 import { initialize, mswLoader, mswDecorator } from "msw-storybook-addon";
                                                      ~~~~~~~~~~~~~~~~~~~~~

Is there an additional step needed to rebuild?

Can you try to rerun your TypeScript server? On VSCode for instance is "cmd shift P" then

[ChristianMurphy]

@yannbf I'm not using VSCode (above, though I can test in VSCode if needed), the error is coming from the tsc CLI which I'm using in a terminal.

[ChristianMurphy]

@yannbf I tried in VSCode as well, before and after restarting the VSCode language server. I still see the same error.

.storybook/preview.ts:2:53 - error TS2307: Cannot find module 'msw-storybook-addon' or its corresponding type declarations.

[ChristianMurphy]

Here is a minimal reproducible example of the original issue (without the patches mentioned above). https://stackblitz.com/edit/stackblitz-starters-bteupl

[ChristianMurphy]

I've opened https://github.com/mswjs/msw-storybook-addon/pull/138 with updated build configuration and exports. I've tested with typescript 5.2 in bundler mode, storybook 7.6, using vite 5.0 as the build tool and it is working nicely. Interested in hearing thoughts from others.

[thepassle]

Thanks for reporting this!

I believe this is an oversight on my part. The "exports" field must include paths as the first-level keys. This should fix the problem:

"exports": {
  ".": {
    "browser": {
      "types": "./dist/index.browser.d.ts",
      "default": "./dist/index.browser.js"
    },
    "react-native": {
      "types": "./dist/index.react-native.d.ts",
      "default": "./dist/index.react-native.js"
    },
    "node": {
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    }
  },
   "./package.json": "./package.json"
},

Can you please replace the exports key in node_modules/msw-storybook-addon/package.json, rebuild, and let me know if this indeed fixes the issue? Thanks.

Not necessarily:

[Samuel-Morgan-Tyghe]

Im getting this issue with latest "storybook-msw-addon": "^2.1.4",

[Samuel-Morgan-Tyghe]

this fixed it