Error while collecting story - on Windows

eldadYikne commented 1 year ago

Describe the bug

I'm running "npm run story:dev (histoire dev)" and getting the following error:

Error while collecting story C:/projects/dirotnet/stories/DnButton.story.vue:
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:399:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:1059:11)
    at defaultResolve (node:internal/modules/esm/resolve:1135:3)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

My DnButton.story.vue file:

<script lang="ts" setup>
import DnButton from "../components/DnButton.vue";

function initState() {
  return {
    fontSize: "base",
  };
}
</script>

<template>
  <Story
    :layout="{
      type: 'grid',
    }"
  >
    <Variant title="normal" :init-state="initState">
      <template #default="{ state }">
        <DnButton inner-text="check" :font-size="state.fontSize" />
      </template>
    </Variant>
    <Variant title="contrast">
      <template #default="{ state }">
        <DnButton
          inner-text="check"
          mode="contrast"
          :font-size="state.fontSize"
        />
      </template>
    </Variant>
  </Story>
</template>

Note that the same code is running successfully on Mac...

Reproduction

We can't repreduce this code, becase it's related to the specific OS.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 678.52 MB / 7.92 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 110.0.5481.177
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.56)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @histoire/plugin-nuxt: ^0.15.8 => 0.15.8
    @histoire/plugin-vue: ^0.15.8 => 0.15.8
    histoire: ^0.15.8 => 0.15.8

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

fallsimply commented 1 year ago

I had this same issue and resolved it by disabling nuxt devtools for the specific project

Kingside88 commented 1 year ago

I also have the error without having nuxt devtools. The proplem cause with @histoire/plugin-nuxt greater than version 0.14.2 which is 0.15.0.

davesawatzky commented 1 year ago

I'm getting this exact error as well - both with and without Nuxt devtools. The histoire page shows up, but no stories are collected.

dominique-boerner commented 1 year ago

Getting the same error, after installing font-awesome following this Guidelines: https://fontawesome.com/docs/web/use-with/vue/use-with

nikita-t1 commented 1 year ago

I have the same problem, is there a solution?

davesawatzky commented 1 year ago

Same here

ghost commented 1 year ago

Same here. Disabling nuxt devtools was the solution for me, but now I'm getting the following error

[nuxt] error caught during app initialization ReferenceError: document is not defined
    at normalizeContainer (C:\ways-agency\personal\nuxt-histoire\node_modules\.pnpm\@vue+runtime-dom@3.3.4\node_modules\@vue\runtime-dom\dist\runtime-dom.cjs.js:1440:17)
    at Object.app.mount (C:\ways-agency\personal\nuxt-histoire\node_modules\.pnpm\@vue+runtime-dom@3.3.4\node_modules\@vue\runtime-dom\dist\runtime-dom.cjs.js:1371:23)
    at initApp (C:\ways-agency\personal\nuxt-histoire\node_modules\.pnpm\nuxt@3.6.1_@types+node@18.0.0\node_modules\nuxt\dist\app\entry.js:63:14)

noel-schenk commented 1 year ago

Only solution at the moment is to switch to Linux.

@Akryum I found the error to be in "resolved-support-plugins-collect.js" since windows needs a file:// prefix to work.

import { pathToFileURL } from 'node:url';

    const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import("${pathToFileURL(require.resolve(`${p.moduleName}/collect${process.env.HISTOIRE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
      paths: [ctx.root, import.meta.url],
    }))}")`);

fixed the issue (at least for vite (the following line passes fine in vite):

[imports, exports] = parse$e(source);

[
  {
    n: 'file:///C:/Work/nuxt3minimalreproduction/Nuxt3MinimalReproduction/node_modules/histoire/dist/node/builtin-plugins/vanilla-support/collect.js',
    s: 67,
    e: 209,
    ss: 60,
    se: 210,
    d: 66,
    a: -1
  },
  {
    n: 'file:///C:/Work/nuxt3minimalreproduction/Nuxt3MinimalReproduction/node_modules/@histoire/plugin-vue/dist/bundled/client/server.js',  
    s: 235,
    e: 366,
    ss: 228,
    se: 367,
    d: 234,
    a: -1
  }
] [
  {
    s: 13,
    e: 34,
    ls: 13,
    le: 34,
    n: 'collectSupportPlugins',
    ln: 'collectSupportPlugins'
  }
] imports, exports

but afterwards it fails at some point which I'm unable to find the source of:

Error: Failed to resolve import "file:///C:/Work/nuxt3minimalreproduction/Nuxt3MinimalReproduction/node_modules/histoire/dist/node/builtin-plugins/vanilla-support/collect.js" from "..\..\..\__resolved__virtual:$histoire-support-plugins-collect". Does the file exist?

MiniRepo (without the mentioned changes as I edited node_modules): https://github.com/noel-schenk/nuxt-minimal-reproduction-for-histoire

BBoehm commented 1 year ago

@Akryum Since there is no solution for this problem yet, we're basically forced to stay with version 0.14.x

Can we therefore get a fix for "vite mergeConfig doesn't accept callback params" for version 0.14.x? You already merged it for v0.16.2, but this is not usable on windows due to this bug.

I already created a PR with the same commit, not sure if that is the correct way to go: https://github.com/histoire-dev/histoire/pull/568

Would really appreciate it, if we can get this fix for the older version.

senritsu commented 9 months ago

Not sure if this is related, but with v0.17.5 histoire does not start at all for me on windows, in a repo that worked fine on macOS. No error, no output, nothing. Terminal just blocks until I kill it.

hugoattal commented 7 months ago

I'm on Windows 11 and I have no problem running the reproduction of @noel-schenk.

Is this still happening?

histoire-dev / histoire