Gatsby 5.3 - "On Windows, absolute paths must be valid file://"

pankaj-ch commented 1 year ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

On the Windows 11 platform with the node.js 18.x. The $ gatsby develop command is throwing an error.


C:\gatsby5.3-windows-issue>npm start

> gatsby-starter-minimal@1.0.0 start
> gatsby develop

success compile gatsby files - 1.270s

 ERROR #10123  API.CONFIG.LOADING

We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.

  Error: Only URLs with a scheme in: file, data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

  - errors:393 new NodeError
    node:internal/errors:393:5

  - resolve:1026 throwIfUnsupportedURLScheme
    node:internal/modules/esm/resolve:1026:11

  - resolve:1106 defaultResolve
    node:internal/modules/esm/resolve:1106:3

  - loader:163 nextResolve
    node:internal/modules/esm/loader:163:28

  - loader:841 ESMLoader.resolve
    node:internal/modules/esm/loader:841:30

  - loader:424 ESMLoader.getModuleJob
    node:internal/modules/esm/loader:424:18

  - loader:525 ESMLoader.import
    node:internal/modules/esm/loader:525:22

  - loader:1098 importModuleDynamically
    node:internal/modules/cjs/loader:1098:29

  - module:438 importModuleDynamicallyWrapper
    node:internal/vm/module:438:21

  - node:vm:389 importModuleDynamically
    node:vm:389:46

  - esm_loader:35 importModuleDynamicallyCallback
    node:internal/process/esm_loader:35:14

  - get-config-file.ts:50 attemptImport
    [gatsby5.3-windows-issue]/[gatsby]/src/bootstrap/get-config-file.ts:50:26

  - get-config-file.ts:98 attemptImportUncompiled
    [gatsby5.3-windows-issue]/[gatsby]/src/bootstrap/get-config-file.ts:98:24

  - get-config-file.ts:24 getConfigFile
    [gatsby5.3-windows-issue]/[gatsby]/src/bootstrap/get-config-file.ts:24:28

  - index.ts:22 loadConfig
    [gatsby5.3-windows-issue]/[gatsby]/src/bootstrap/load-config/index.ts:22:44

  - initialize.ts:178 initialize
    [gatsby5.3-windows-issue]/[gatsby]/src/services/initialize.ts:178:18

not finished load gatsby config - 0.138s

Reproduction Link

https://github.com/pankaj-ch/gatsby5.3-windows-issue

Steps to Reproduce

On Windows OS

Clone the gatsby minimal repo.
Update the gatsby version to 5.3.0
Run the development server $ gatsby develop; ...

Expected Result

It should be able to start the dev server without any errors. On Linux, it is working as expected.

Actual Result

The gatsby develop command throws an error: On Windows, absolute paths must be valid file://.

Asking to append file:/// in front of the absolute path. (Example: "c:/path/to/repo" -> "file:///c:/path/to/repo")

Environment

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 9 5900HS with Radeon Graphics
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.900.0), Chromium (108.0.1462.46)
  npmPackages:
    gatsby: ^5.3.0 => 5.3.0
    gatsby-plugin-image: ^3.3.0 => 3.3.0
    gatsby-plugin-manifest: ^5.3.0 => 5.3.0
    gatsby-plugin-sharp: ^5.3.0 => 5.3.0
    gatsby-plugin-vanilla-extract: ^4.0.0 => 4.0.0
    gatsby-source-filesystem: ^5.3.0 => 5.3.0
    gatsby-source-wordpress: ^7.3.0 => 7.3.0
    gatsby-transformer-sharp: ^5.3.0 => 5.3.0
  npmGlobalPackages:
    gatsby: 5.4.0-next.0

Config Flags

No response

zhaohuanyuu commented 1 year ago

I have the same error, please figure out

pieh commented 1 year ago

We are working on solving this - proposed changes (still in progress) can be found in https://github.com/gatsbyjs/gatsby/pull/37257

marvinjude commented 1 year ago

Fixed in gatsby@5.3.2

lezan commented 1 year ago

I am still experience the same issue after upgrading all the packages to 5.3.1. I already wiped node_modules directory and run yarn install

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-4670K CPU @ 3.40GHz
  Binaries:
    Node: 18.12.1 - E:\Program Files\nodejs\node.EXE
    Yarn: 3.2.3 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.2.0 - E:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.46)
  npmPackages:
    gatsby: ^5.3.1 => 5.3.1
    gatsby-plugin-canonical-urls: ^5.3.0 => 5.3.0
    gatsby-plugin-google-tagmanager: ^5.3.1 => 5.3.1
    gatsby-plugin-image: ^3.3.1 => 3.3.1
    gatsby-plugin-manifest: ^5.3.1 => 5.3.1
    gatsby-plugin-no-sourcemaps: ^5.3.0 => 5.3.0
    gatsby-plugin-offline: ^6.3.1 => 6.3.1
    gatsby-plugin-purgecss: ^6.1.2 => 6.1.2
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-sass: ^6.3.1 => 6.3.1
    gatsby-plugin-sharp: ^5.3.1 => 5.3.1
    gatsby-plugin-sitemap: ^6.3.1 => 6.3.1
    gatsby-source-filesystem: ^5.3.1 => 5.3.1
    gatsby-source-shopify: ^8.3.1 => 8.3.1
    gatsby-transformer-json: ^5.3.0 => 5.3.0
    gatsby-transformer-sharp: ^5.3.1 => 5.3.1
  npmGlobalPackages:
    gatsby-cli: 5.3.1

EDIT: working with the new release gatsby@5.3.2.

marvinjude commented 1 year ago

Hey @lezan,

This was actually fixed in 5.3.2 not 5.3.1

lezan commented 1 year ago

After uprading to 5.3.2 I am getting a couples of warnings (never seen before):

warn [gatsby-plugin-image] Could not read image data file "E:\...\.cache\caches\gatsby-plugin-image\1115632934.json".
This may mean that the images in "E:\...\src\components\home\SectionCustomMap.jsx" were not processed.
Please ensure that your gatsby version is at least 2.24.78.
warn [gatsby-plugin-image] No data found for image "../../images/home/map-request.png"

Hope to give you more details soon.

EDIT: in the SectionCustomMap.jsx component (mentioned by warning) I am using StaticImage component from gatsby-plugin-image. Like that

<StaticImage
  src="../../images/home/map-request.png"
  alt="custom map request"
  placeholder="blurred"
  layout="constrained"
  width={1000}
/>

LekoArts commented 1 year ago

What happens when you run gatsby clean and try again?

lezan commented 1 year ago

What happens when you run gatsby clean and try again?

Same issue. I already tried a wiped of node_modules, yarn install, yarn clean and then yarn develop. Same outcome. I also tried to switch from relative path to absolute path, just in case but not.

I am preparing a repo.

LekoArts commented 1 year ago

@lezan no need, we can reproduce and will have a fix

LekoArts commented 1 year ago

PR is up https://github.com/gatsbyjs/gatsby/pull/37262

lezan commented 1 year ago

PR is up #37262

Can I ask when you think it will be published in a minor release?

marvinjude commented 1 year ago

Published in

 - gatsby-plugin-image@3.3.2
 - gatsby-plugin-sharp@5.3.2
 - gatsby-source-shopify@8.3.2
 - gatsby-source-wordpress@7.3.2
 - gatsby-transformer-sqip@5.3.2

gatsbyjs / gatsby