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:'

[Darkjamin]

Steps to reproduce

Created a new function.ts to make connection to MySQL.
Code:

mport mysql from 'mysql2/promise';

async function createConnection() {
const connection = await mysql.createConnection({
host: process.env.MYSQL_HOST,
port: parseInt(process.env.MYSQL_PORT || '3306'),
user: process.env.MYSQL_USERNAME,
password: process.env.MYSQL_PASSWORD,
database: process.env.MYSQL_DATABASE,
namedPlaceholders: true,
});
return connection;
}

export async function getData() {
const connection = await createConnection();
const query = SELECT * players;
const [rows] = await connection.execute(query);
await connection.end();
return rows;
}

.env is available and filled in.

Current behavior

When getting into Queries + =+> Js query, select the config, then open, then "getData".
Then doing Run:

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:'

Expected behavior

Query runs and gives responce

Context

Connecto to external MySQL DB

Your environment

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (123.0.2420.97)
npmPackages:
@emotion/react: 11.11.4
@emotion/styled: 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.15
@mui/icons-material: 5.15.15
@mui/lab: 5.0.0-alpha.170
@mui/material: 5.15.15
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-charts: 7.1.1
@mui/x-data-grid: 7.1.1
@mui/x-data-grid-premium: 7.1.1
@mui/x-data-grid-pro: 7.1.1
@mui/x-date-pickers: 7.1.1
@mui/x-date-pickers-pro: 7.1.1
@mui/x-license: 7.1.1
@mui/x-tree-view: 7.1.1
@types/react: 18.2.78
react: 18.2.0
react-dom: 18.2.0
typescript: 5.4.4

Tested in 3 browses brave, firefox, chrome.

Search keywords: Windows ESM Loader

[prakhargupta1]

Checked it on Windows. The following error shows up even for the default function.

Toolpad version is v0.1.54, but somehow it is not captured in npx @mui/envinfo

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (123.0.2420.97)
  npmPackages:
    @emotion/react:  11.11.4
    @emotion/styled:  11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.15
    @mui/icons-material:  5.15.15
    @mui/lab:  5.0.0-alpha.170
    @mui/material:  5.15.15
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts:  7.1.1
    @mui/x-data-grid:  7.1.1
    @mui/x-data-grid-premium:  7.1.1
    @mui/x-data-grid-pro:  7.1.1
    @mui/x-date-pickers:  7.1.1
    @mui/x-date-pickers-pro:  7.1.1
    @mui/x-license:  7.1.1
    @mui/x-tree-view:  7.1.1
    @types/react:  18.2.79
    react:  18.2.0
    react-dom:  18.2.0
    typescript:  5.4.4

[Janpot]

@Darkjamin @prakhargupta1 I have opened a PR with a potential fix. Would you mind trying it out by installing @toolpad/studio from https://pkg.csb.dev/mui/mui-toolpad/commit/7f293ceb/@toolpad/studio (change the version in your package.json to "https://pkg.csb.dev/mui/mui-toolpad/commit/7f293ceb/@toolpad/studio" and reinstall)

[prakhargupta1]

The fix works for me.

[Darkjamin]

Same here, I can confirm it is working now for me.

[Janpot]

Thanks for trying, this will be fixed in the next release