histoire icon indicating copy to clipboard operation
histoire copied to clipboard

Looking for tailwind dependencies when the project does not use tailwind

Open jackysee opened this issue 2 years ago • 0 comments

Describe the bug

When loading a story, it will try to look for a tailwind dependencies while the project does not use tailwind at all.

Reproduction

Link to minimal reproduction https://github.com/jackysee/histoire_no_tailwind_vue3_setup

  1. create new project by npm create vite@latest histoire_no_tailwind_vue3_setup --template vue. Do the npm install
  2. npm install histoire @histoire/plugin-vue
  3. create histoire.config.js pointing to histoire.setup.js
//histoire.config.js
import { defineConfig } from "histoire";
import { HstVue } from "@histoire/plugin-vue";

export default defineConfig({
  plugins: [HstVue()],
  setupFile: "/src/histoire.setup.js",
});
//src/histoire.setup.js
import { defineSetupVue3 } from "histoire";
export const setupVue3 = defineSetupVue3(({ app, story, variant }) => {
  app.config.globalProperties.$hello = "hello";
});
  1. create src/Main.story.vue
<template>
  <Story title="hello">
    {{ $hello }}
  </Story>
</template>

  1. npx histoire dev
  2. navigate to the hello story

It will now throw an error:

3:28:00 PM [vite] Internal server error: Failed to resolve import "tailwindcss/resolveConfig.js" from "node_modules/histoire/dist/node/builtin-plugins/tailwind-tokens.js?v=8ab6a3fb". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/histoire/dist/node/builtin-plugins/tailwind-tokens.js?v=8ab6a3fb
  19 |              await api.fs.writeFile(api.path.resolve(api.pluginTempDir, 'style.css'), css);
  20 |              const tailwindConfig = await api.moduleLoader.loadModule(tailwindConfigFile);
  21 |              const { default: resolveConfig } = await import('tailwindcss/resolveConfig.js');
     |                                                              ^
  22 |              const resolvedTailwindConfig = resolveConfig(tailwindConfig);
  23 |              const storyFile = api.path.resolve(api.pluginTempDir, 'Tailwind.story.js');
      at formatError (file:///home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/vite/dist/node/chunks/dep-665b0112.js:40782:46)
      at TransformContext.error (file:///home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/vite/dist/node/chunks/dep-665b0112.js:40778:19)
      at normalizeUrl (file:///home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/vite/dist/node/chunks/dep-665b0112.js:37514:33)
      at async TransformContext.transform (file:///home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/vite/dist/node/chunks/dep-665b0112.js:37648:47)
      at async Object.transform (file:///home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/vite/dist/node/chunks/dep-665b0112.js:41031:30)
      at async loadAndTransform (file:///home/jackys/works/exp/histoire_no_tailwind_vue3_setup/node_modules/vite/dist/node/chunks/dep-665b0112.js:37292:29) (x4)

System Info

System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (2) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 1.20 GB / 5.07 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.4.0 - /run/user/1000/fnm_multishells/1235818_1662708633849/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.13.2 - /run/user/1000/fnm_multishells/1235818_1662708633849/bin/npm
  Browsers:
    Firefox: 100.0.2
  npmPackages:
    @histoire/plugin-vue: ^0.10.7 => 0.10.7 
    @vitejs/plugin-vue: ^3.0.3 => 3.1.0 
    vite: ^3.0.9 => 3.1.0

Used Package Manager

npm

Validations

jackysee avatar Sep 09 '22 07:09 jackysee