Akryum/peeky

Error on launch: "Only file and data URLs are supported by the default ESM loader"

hugoattal opened this issue · 7 comments

Hey! So I'm trying to set up Peeky for my current project.

I'm on Windows 11 with:

  • node 16.13.1 (LTS)
  • vue 3.2.26 (latest)
  • vite 2.7.5 (latest)
  • @peeky/test 0.9.3 (latest)

The project works with vite dev and vite build. Jest and Vitest works flawlessly.
But in the same project, when I launch peeky test I get this error:

 ERROR  Running tests failed: Error: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'(/node_modules/lodash/lodash.js) (/src/modules/application/lib/treeDoc.ts) (/@fs/D:/Library/Projects/LunaPark/frontend/src/modules/application/lib/treeDoc.spec.ts)
    at new NodeError (node:internal/errors:371:5)
    at defaultResolve (node:internal/modules/esm/resolve:1016:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ESMLoader.import (node:internal/modules/esm/loader:276:22)
    at importModuleDynamically (node:internal/modules/esm/translators:111:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at cachedRequest (file:///D:/Library/Projects/LunaPark/frontend/node_modules/@peeky/runner/src/runtime/vite.ts:105:38)
    at D:/Library/Projects/LunaPark/frontend/src/modules/application/lib/treeDoc.ts:1:281
    at rawRequest (file:///D:/Library/Projects/LunaPark/frontend/node_modules/@peeky/runner/src/runtime/vite.ts:210:7)

It seems to be triggered when I import lodash (and lodash probably import some other thing with an absolute path)

I'm still not quite sure if it's a Peeky bug, a Vite bug, or just me forgetting to update some configuration, but I can't find anything on that ESM Loader...

Here is my vite.config.ts file if it helps:

import * as path from "path";
import { defineConfig, UserConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const alias = {
    "@": path.resolve(__dirname, "src")
};

export default defineConfig(({ command }) => {
    const config: UserConfig = {
        plugins: [vue()],
        resolve: {
            alias
        },
        server: {
            port: 8080
        },
        test: {
            runtimeEnv: "dom"
        }
    };

    if (command === "build") {
        config.base = "/static/";
    }

    return config;
});

This seems to be a common issue: nodejs/node#31710
Which is solved by using the url.pathToFileURL function (example with vue-cli: https://github.com/vuejs/vue-cli/pull/6869/files)

It might be the same kind of issue in peeky?


Aaaah people reported the same bug in the end of this issue: #2
I'm not the only one 😅

I wonder if this function is right:

export function fixWindowsAbsoluteFileUrl (path: string) {

Shouldn't this be something like that?

const path = require('path')
const URL = require('url')

export function fixWindowsAbsoluteFileUrl (path: string) {
    return path.isAbsolute ? URL.pathToFileURL(path).href : path;
    // or just return URL.pathToFileURL(path).href ?
}

I'll try to setup the project to see if that fixes it.


EDIT: Annnnd, the scripts use the "&&" symbol which does not work on Windows 😩... Seems like I'll have to install WSL...


EDIT2: I don't understand, it works perfectly with the example from your repo. I'll try to create a minimum example...


EDIT3: OKAY! It may have to do with npm! When I install the dependencies of the demo with npm install I get the error, but if I use pnpm install everything work! Think is, I also use storybook which is kinda broken with pnpm...

In the end, it works with PNPM 🥳 !

  • use pnpm import to import your package-lock from npm
  • delete your node_modules folder and package-lock.json file
  • type pnpm install and you're ready to go!

Only thing is that my storybook installation is now broken (it doesn't work with pnpm and vite), maybe for the best...

Would you mind sharing a minimal reproduction on GH with npm?

The demo here does not work with npm: https://github.com/Akryum/peeky/tree/master/examples/demo

But I'll create a minimal reproduction, give me 10 minutes!

@Akryum Here it is: https://github.com/hugoattal/peeky-bug-reproduction

  • npm install
  • npm run test

image

Also happens with yarn btw