Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error while collecting story - on Windows #463

Open
6 tasks done
eldadYikne opened this issue Feb 27, 2023 · 11 comments
Open
6 tasks done

Error while collecting story - on Windows #463

eldadYikne opened this issue Feb 27, 2023 · 11 comments
Labels
to triage This issue needs to be triaged

Comments

@eldadYikne
Copy link

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

@eldadYikne eldadYikne added the to triage This issue needs to be triaged label Feb 27, 2023
@fallsimply
Copy link

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

@Kingside88
Copy link

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
Copy link

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
Copy link

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

@nikita-t1
Copy link

I have the same problem, is there a solution?

@davesawatzky
Copy link

Same here

@ghost
Copy link

ghost commented Jul 4, 2023

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\@[email protected]\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\@[email protected]\node_modules\@vue\runtime-dom\dist\runtime-dom.cjs.js:1371:23)
    at initApp (C:\ways-agency\personal\nuxt-histoire\node_modules\.pnpm\[email protected]_@[email protected]\node_modules\nuxt\dist\app\entry.js:63:14) 

@noel-schenk
Copy link
Contributor

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
Copy link

BBoehm commented Aug 25, 2023

@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: #568

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

@senritsu
Copy link

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
Copy link
Collaborator

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

Is this still happening?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to triage This issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

10 participants