[Bug] Using fetch-mock with the decorator function results in internal error

[vudoan1708-cyber]

What version of vite are you using? 2.7.13

System info and storybook versions System:

OS: Windows 10

CPU: AMD Ryzen 7 5700U with Radeon Graphics

Binaries:

Node: v14.18.0

npm: 6.14.15

npmPackages:

"devDependencies": {
    "@babel/core": "^7.16.7",
    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
    "@ota-meshi/eslint-plugin-svelte": "^0.24.0",
    "@storybook/addon-actions": "^6.4.13",
    "@storybook/addon-docs": "^6.4.13",
    "@storybook/addon-essentials": "^6.4.13",
    "@storybook/addon-jest": "^6.4.13",
    "@storybook/addon-links": "^6.4.13",
    "@storybook/addon-svelte-csf": "^1.1.0",
    "@storybook/builder-vite": "^0.1.30",
    "@storybook/svelte": "^6.4.13",
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
    "babel-loader": "^8.2.3",
    "eslint": "^8.6.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-storybook": "^0.5.5",
    "fetch-mock": "^9.11.0",
    "jest": "^27.5.1",
    "jest-canvas-mock": "^2.3.1",
    "jest-fetch-mock": "^3.0.3",
    "postcss-html": "^1.3.0",
    "stylelint": "^14.2.0",
    "stylelint-config-html": "^1.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-order": "^5.0.0",
    "svelte": "^3.46.2",
    "svelte-loader": "^3.1.2",
    "svelte-preprocess": "^4.10.1",
    "vite": "^2.7.13"
  },
  "dependencies": {
    "body-scroll-lock": "^4.0.0-beta.0",
    "chart.js": "^3.7.1",
    "moment": "^2.29.3",
    "tippy.js": "^6.3.7"
  }

Describe the Bug I'm currently using storybook-builder-vite to componentise the UI components in my project. Fetch-mock works great when using with storybook alone but once, integrated with vite, it results in an internal error. I did raise this issue to the maintainers of the storybook-builder-vite, however, they are certain the problems are not coming from their library. They said the issue could be with a sub-dependency of fetch-mock, TR46.

In the bundled code of fetch-mock's server.js file, we see:

var mappingTable = /*#__PURE__*/Object.freeze({
	__proto__: null
});

var mappingTable$1 = getCjsExportFromNamespace(mappingTable);

...

function findStatus(val, { useSTD3ASCIIRules }) {
  let start = 0;
  let end = mappingTable$1.length - 1;

  while (start <= end) {
   ...
  }

  return null;
}

...const [status, mapping] = findStatus(ch.codePointAt(0), { useSTD3ASCIIRules });

So, we see here that mappingTable, is empty, so findStatus returns null, which breaks the last line above. This might be an error within the bundler config of fetch-mock, or a problem with the mappingTable.json that tr46 is generating, or maybe something else.

Please have a look at error reproduction in the Button component's story: Make API Call using Fetch-mock.

Any help will be very much appreciated.

Thanks.

Link to Minimal Reproducible Example https://github.com/vudoan1708-cyber/storybook-builder-vite-error-reproduce

[JohnAlbin]

Your "Link to Minimal Reproducible Example" is a 404 page. https://github.com/vudoan1708-cyber/storybook-builder-vite-error-reproduce is 404.

[vudoan1708-cyber]

Hi @JohnAlbin ! Sorry for the late response, I have made a new repo for the error reproduction. Please have a look at it: https://github.com/vudoan1708-cyber/reproducible-storybook-builder-vite-error

Thanks.

[JohnAlbin]

@vudoan1708-cyber It looks like your decorator function isn't written properly. https://storybook.js.org/docs/react/writing-stories/decorators

FYI, I just wrote a Storybook addon that integrates with fetch-mock. It should work with Svelte, though I've only tested it with React. https://github.com/JohnAlbin/storybook-addon-fetch-mock

[orange-buffalo]

I am facing the same issue with TS, Vue 3 and Storybook Vite builder, when just importing fetch-mock into the story:

TypeError: findStatus is not a function or its return value is not iterable
    at mapChars (server.js:20584:31)
    at processing (server.js:20714:27)
    at Object.toASCII$1 [as toASCII] (server.js:20769:18)
    at domainToASCII (server.js:21451:23)
    at parseHost2 (server.js:21372:23)
    at URLStateMachine.parseHostName (server.js:21839:18)
    at new URLStateMachine (server.js:21547:38)
    at module.exports.basicURLParse (server.js:22252:15)
    at new URLImpl (server.js:25515:36)
    at Object.setup (server.js:26100:14)

Will it help if I provide a reproducer for this case?

[orange-buffalo]

I was able to workaround the above by directly importing client module in the storybook: import fetchMock from 'fetchMock/esm/client'.