philipp-winterle / crittr

High performance critical css extraction with a great configuration abilities
https://hummal.github.io/crittr/
GNU General Public License v3.0
51 stars 6 forks source link

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: #61

Open Axos11 opened 3 months ago

Axos11 commented 3 months ago

Describe the bug I run crittR via gulp and minimal settings on windows and I received the following error:

[19:48:34] Starting 'crittrs'... ▶ Crittr Run Initialized timer... [19:48:34] Finished 'crittrs' after 3.06 ms Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:' at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11) at defaultLoad (node:internal/modules/esm/load:120:3) at ModuleLoader.load (node:internal/modules/esm/loader:554:13) at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:435:56) at new ModuleJob (node:internal/modules/esm/module_job:76:27) at #createModuleJob (node:internal/modules/esm/loader:448:17) at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:260:34) at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:241:17) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async ModuleLoader.import (node:internal/modules/esm/loader:473:23) { code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME' }

I tried all major node versions from 16 up to 22 and the error stayed the same.

How I ended here: I tried to replace penthouse in my gulp workflow. First I had to replace all requires with imports because I got the error that a ES6 module can't be required but has to be imported. Made sense to me so far even though the documentation told me to use require. The rewrite did work for all modules and my other gulp workflows actually work as expected.

To Reproduce Steps to reproduce the behavior:

  1. Create a simple gulp workflow with gulp v4 or v5 (mine is v5),
  2. run gulp install
  3. set "type": "module" in the package.json file
  4. Create a minimal gulpfile with the lines:
import crittr from 'crittr';
// criticalCss
export const crittrs = crittR;
async function crittR() {
    crittr({
        urls: ['https://www.google.com'],
        device: {
            width: 1920,
            height: 1080,
        },
    })
    .then(({criticalCss, rest}) => {
        // use the critical css
        console.log(criticalCss)
    })
    .catch(err => {
        console.error(err);
    });
}
  1. run gulp crittrs in the terminal

Environment (please complete the following information):

Additional context Add any other context about the problem here.

I don't know if something is wrong with my setup or some dependency is having issues with windows. but I somehow can't figure out what the issue is. Maybe someone can help me her.

Thanks in advance

philipp-winterle commented 3 months ago

Thanks for you first issue.

As far as I can see it is related to windows paths. As I have no windows system to test here. I can not tell if that is a problem on my side.

Would you please try to execute crittr without gulp.

test.js


crittr({
    urls: ['https://www.google.com'],
    device: {
        width: 1920,
        height: 1080,
    },
})
.then(({criticalCss, rest}) => {
    // use the critical css
    console.log(criticalCss)
})
.catch(err => {
    console.error(err);
});

and then run in a terminal

node test.js
Axos11 commented 3 months ago

I added

import crittr from 'crittr'; to the beginning of the js and ran "node test.js" in the terminal. Still got the following error, looks like the same as before

D:\WEB-Projects\laragon\www\discgolf4you\gulp>node test.js ▶ Crittr Run Initialized timer... Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:' at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11) at defaultLoad (node:internal/modules/esm/load:120:3) at ModuleLoader.load (node:internal/modules/esm/loader:554:13) at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:435:56) at new ModuleJob (node:internal/modules/esm/module_job:76:27) at #createModuleJob (node:internal/modules/esm/loader:448:17) at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:260:34) at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:241:17) at async ModuleLoader.import (node:internal/modules/esm/loader:473:23) { code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME' }

Anything else I can do/test?

philipp-winterle commented 3 months ago

Thank you. Seem to be an issue with paths and windows systems.

I will look into this.

As a quick fix you can use WSL 2 on Windows to work on a linux shell in Windows which is the preferred way to code on Windows. Visual Studio Code has native integration of WSL.

Axos11 commented 2 months ago

Thanks for the answer! Could I possibly help you in any way to get that up and running on windows natively?