Windows 11: Weird path resolving issue

[ripvannwinkler]

Decided to give ladle a try on a new project. It worked fine until I tried to add a .ladle/ dir for some config bits. Below is the result of running yarn ladle serve. Notice in particular that the config.mjs isn't detected, and the path .............ladleconfig.mjs seems out of nowhere. Running on Windows 11, if that makes a difference.

➜ node -v
v16.13.2

➜ ls .ladle

    Directory: C:\dev123\packages\frontend\.ladle

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---           3/22/2022  5:02 PM            203 components.tsx
-a---           3/22/2022  5:08 PM             53 config.mjs

➜ cat .ladle/config.mjs 
export default {
        "serve":{
                "port": 6000
        }
}

➜ yarn dev:ladle
yarn run v1.22.17
$ cross-env DEBUG=ladle* ladle serve .
  ladle:cli Starting serve command +0ms
  ladle:cli CLI theme: undefined +1ms
  ladle:cli CLI stories: undefined +0ms
  ladle:cli CLI port: undefined +0ms
  ladle:cli CLI open: undefined +0ms
  ladle:cli No custom config found. +1ms
  ladle:cli Final config:
  ladle:cli {
  ladle:cli   "stories": "src/**/*.stories.{js,jsx,ts,tsx}",
  ladle:cli   "root": "C:\\dev123\\packages\\frontend",
  ladle:cli   "defaultStory": "",
  ladle:cli   "babelPresets": [],
  ladle:cli   "babelPlugins": [],
  ladle:cli   "define": {},
  ladle:cli   "envPrefix": "VITE_",
  ladle:cli   "resolve": {
  ladle:cli     "alias": {}
  ladle:cli   },
  ladle:cli   "optimizeDeps": {
  ladle:cli     "include": []
  ladle:cli   },
  ladle:cli   "addons": {
  ladle:cli     "control": {
  ladle:cli       "enabled": true,
  ladle:cli       "defaultState": {}
  ladle:cli     },
  ladle:cli     "theme": {
  ladle:cli       "enabled": true,
  ladle:cli       "defaultState": "light"
  ladle:cli     },
  ladle:cli     "mode": {
  ladle:cli       "enabled": true,
  ladle:cli       "defaultState": "full"
  ladle:cli     },
  ladle:cli     "rtl": {
  ladle:cli       "enabled": true,
  ladle:cli       "defaultState": false
  ladle:cli     },
  ladle:cli     "ladle": {
  ladle:cli       "enabled": true
  ladle:cli     }
  ladle:cli   },
  ladle:cli   "serve": {
  ladle:cli     "open": "**Default**",
  ladle:cli     "port": 61000,
  ladle:cli     "define": {}
  ladle:cli   },
  ladle:cli   "build": {
  ladle:cli     "out": "build",
  ladle:cli     "sourcemap": false,
  ladle:cli     "baseUrl": "/",
  ladle:cli     "define": {}
  ladle:cli   }
  ladle:cli } +0ms
  ladle:cli Port set to: 61000 +5ms

   ╭───────────────────────────────────────────────────╮
   │                                                   │
   │   🥄 Ladle.dev served at http://localhost:61000   │
   │                                                   │
   ╰───────────────────────────────────────────────────╯

  ladle:vite transforming: C:/dev123/packages/frontend/node_modules/@ladle/react/lib/app/generated/generated-list.tsx +0ms
  ladle:vite Initial generation of the list +0ms
  ladle:vite Parsing src/app/components/UserIcon/UserIcon.stories.tsx +0ms
  ladle:vite Parsed data for src/app/components/UserIcon/UserIcon.stories.tsx: +61ms
  ladle:vite {
  ladle:vite   entry: 'src/app/components/UserIcon/UserIcon.stories.tsx',
  ladle:vite   stories: [
  ladle:vite     {
  ladle:vite       storyId: 'user-icon--default',
  ladle:vite       componentName: 'user$icon$$default',
  ladle:vite       namedExport: 'Default',
  ladle:vite       locStart: 3,
  ladle:vite       locEnd: 3
  ladle:vite     }
  ladle:vite   ],
  ladle:vite   exportDefaultProps: { title: undefined, meta: undefined },
  ladle:vite   namedExportToMeta: {},
  ladle:vite   namedExportToStoryName: {},
  ladle:vite   storyParams: {},
  ladle:vite   fileId: 'UserIcon'
  ladle:vite } +1ms
  ladle:vite C:\dev123\packages\frontend\.ladle/components.tsx found. +0ms
  ladle:vite Custom provider found. +1ms
Failed to resolve import ".............ladleconfig.mjs" from "node_modules\@ladle\react\lib\app\generated\generated-list.tsx". Does the file exist?
Failed to resolve import ".............ladleconfig.mjs" from "node_modules\@ladle\react\lib\app\generated\generated-list.tsx". Does the file exist? (x2)     
5:22:52 PM [vite] Internal server error: Failed to resolve import ".............ladleconfig.mjs" from "node_modules\@ladle\react\lib\app\generated\generated-list.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/dev123/packages/frontend/node_modules/@ladle/react/lib/app/generated/generated-list.tsx
  6  |  export let stories = { "user-icon--default": { component: user$icon$$default } };
  7  |  export let config = {};
  8  |  import customConfig from ".............ladleconfig.mjs";
     |                            ^
  9  |  config = customConfig;
  10 |  import { Provider as CustomProvider } from ".............ladlecomponents.tsx";
      at formatError (C:\dev123\packages\frontend\node_modules\@ladle\react\node_modules\vite\dist\node\chunks\dep-5a245411.js:36027:46)
      at TransformContext.error (C:\dev123\packages\frontend\node_modules\@ladle\react\node_modules\vite\dist\node\chunks\dep-5a245411.js:36023:19)
      at normalizeUrl (C:\dev123\packages\frontend\node_modules\@ladle\react\node_modules\vite\dist\node\chunks\dep-5a245411.js:56731:26)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async TransformContext.transform (C:\dev123\packages\frontend\node_modules\@ladle\react\node_modules\vite\dist\node\chunks\dep-5a245411.js:56880:57)
      at async Object.transform (C:\dev123\packages\frontend\node_modules\@ladle\react\node_modules\vite\dist\node\chunks\dep-5a245411.js:36262:30)
      at async doTransform (C:\dev123\packages\frontend\node_modules\@ladle\react\node_modules\vite\dist\node\chunks\dep-5a245411.js:52681:29)
Failed to resolve import ".............ladleconfig.mjs" from "node_modules\@ladle\react\lib\app\generated\generated-list.tsx". Does the file exist?

[tajo]

Running on Windows 11, if that makes a difference.

Most likely. This project has not been tested on Windows.

[DHFW]

I have the same issue on Windows 10.
Internal server error: Failed to resolve import ".............ladleconfig.mjs" from "node_modules\@ladle\react\lib\app\generated\generated-list.tsx". Does the file exist?

Please make it also available for Windows! Thnx,

Digging through the load-config.js file this is the error message:
No custom config found. Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

Running WSL (Windows Subsystem for Linux) might solve issues with the paths, but I'm not allowed to use that.

[akalajzi]

config file gets loaded properly in WSL.

[cpakken]

Got the same error in Windows 10. Tried custom config path via cli as well but same error. Cannot use custom ladle config on Windows. Perhaps path normalization is needed.

[cpakken]

Would be useful if ladle can extend the vite.config.js or have a way to inject custom vite config so we can put our own vite plugins if required.