histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.01k stars 172 forks source link

Docs are wrong for Typescript projects #669

Open lud-hu opened 3 months ago

lud-hu commented 3 months ago

Describe the bug

For TS + nuxt projects, I cannot just do what the docs say about adding the env.d.ts into the tsconfig. It will just overwrite the nuxt config and therefore vanish out all auto imports etc. If I copy over the generated tsconfig from the .nuxt directory it's working, but this is more like a workaround.

Reproduction

https://github.com/lud-hu/nuxt-histoire-reproduction/blob/main/tsconfig.json

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 68.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Edge: 121.0.2277.98
    Safari: 17.0
  npmPackages:
    @histoire/plugin-nuxt: ^0.17.9 => 0.17.9 
    @histoire/plugin-vue: ^0.17.9 => 0.17.9 
    histoire: ^0.17.9 => 0.17.9

Used Package Manager

yarn

Validations

letoast commented 1 week ago

Same thing here. I managed to solve it by importing the path in nuxt.config.ts

export default defineNuxtConfig({
    imports: {
        imports: [
            {
                from: './node_modules/@histoire/plugin-vue/components.d.ts',
                type: true,
            },
        ],
    },
})

EDIT: The above solution is not what is specified what should be done according to Histoire docs, this is needed: