tajo / ladle

🥄 Develop, test and document your React story components faster.
https://www.ladle.dev
MIT License
2.63k stars 93 forks source link

Ladle seems to conflict with remix vite plugin #559

Closed sigma-andex closed 6 months ago

sigma-andex commented 7 months ago

Describe the bug

Ladle fails to start with the following error message when remix is in the vite.config:

[ENOENT: no such file or directory, open '/home/projects/ladle-xmfkzx/node_modules/.pnpm/@ladle+react@4.0.3_@types+node@18.11.18_@types+react@18.0.27_react-dom@18.2.0_react@18.2.0_typescript@5.0.4/node_modules/@ladle/react/typings-for-build/app/package.json'] {
  code: 'ENOENT',
  errno: -2,
  path: '/home/projects/ladle-xmfkzx/node_modules/.pnpm/@ladle+react@4.0.3_@types+node@18.11.18_@types+react@18.0.27_react-dom@18.2.0_react@18.2.0_typescript@5.0.4/node_modules/@ladle/react/typings-for-build/app/package.json',
  syscall: 'open',
  message: "Could not read package.json: Error: ENOENT: no such file or directory, open '/home/projects/ladle-xmfkzx/node_modules/.pnpm/@ladle+react@4.0.3_@types+node@18.11.18_@types+react@18.0.27_react-dom@18.2.0_react@18.2.0_typescript@5.0.4/node_modules/@ladle/react/typings-for-build/app/package.json'"
}

Reproduction

See https://stackblitz.com/edit/ladle-xmfkzx?file=vite.config.ts

Environment

tajo commented 6 months ago

Any insights what that plugin is doing internally?

justb3a commented 6 months ago

Can confirm, I solved it by adding a specific ladle vite config without the remix plugin.

In ~/.vite.config.ts we exported our plugin settings so that we could reuse it in ./.ladle/vite.config.ts.

Use it then with: "dev:ladle": "ladle dev --viteConfig ./.ladle/vite.config.ts"

Would love to solve the issue, this is more a work around.

andychongyz commented 6 months ago

Seems like Remix are aware of the issue, see here.

For now I just follow the Storybook way by exclude the remix plugin if I'm running the ladle CLI

const isLadle = process.argv[1]?.includes("ladle");

export default defineConfig({
  server: {
    port: 8081
  },
  // https://remix.run/docs/en/main/future/vite#plugin-usage-with-other-vite-based-tools-eg-vitest-storybook
  // refer to the link above to understand why we use process.env.VITEST or isLadle
  plugins: [
     !isLadle && remix(remixConfig),
    ...
tajo commented 6 months ago

I guess this is not something we can fix on our side. People should follow their advice of excluding it for now as @andychongyz suggests.