create-figma-plugin
create-figma-plugin copied to clipboard
yuanqing
WINDOWS 10 : ESM Loader absolute path error
info Building... error esbuild error Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
Usually this can be fixed by changing the package.json scripts use of ' and replacing it with an escaped " aka \"
For example line 10:
"clean": "rimraf '*.log'",
becomes
"clean": "rimraf \"*.log\"",
It could be more extensive than this, but this is a good starting point.
I just ran into this as well. All I did was add a build-figma-plugin.main.js file to the top-level directory. It contained just this code:
module.exports = function (buildOptions) {
console.log(buildOptions);
return buildOptions;
}
I assume the CLI is passing a raw Windows path to this file or its output to esbuild, hence the Received protocol 'c:' message. It's probably something like C:\MyPlugin\build-figma-plugin.main.js.
(As an aside, I was trying to look at the build options to see if I could get it output a source map or not transpile the code. I assume that has to be done via this build file?)
I think the build-figma-plugin.main.js file is imported here. It's resolving an absolute path to the build override file and then dynamically importing it.
From this node bug (which is "by design" but continues to trip people up), it looks like absolute paths need to be passed in via file:// URL, but strings starting with / are considered relative to the URL base, which on Mac is just the root of the file system. But path.resolve() returns a C:\ absolute path on Windows, which then causes import() to fail.
I think the solution is just to use a relative path, if the CWD is set correctly, like await import('./' + esbuildConfigFilePath). Or maybe new URL('./' + esbuildConfigFilePath, import.meta.url) to get an absolute file:// URL.
I tried @fwextensions idea and it worked by changing the "build-bundles-async.js" file I found in the node_modules folder. it was something like this:
async function overrideEsbuildConfigAsync(buildOptions, esbuildConfigFilePath) { var absolutePath; if (process.platform.startsWith('win')) { absolutePath = new URL('../../../../../../' + esbuildConfigFilePath, import.meta.url); } else { absolutePath = resolve(esbuildConfigFilePath) } if ((await fs.pathExists(absolutePath)) === false) { return buildOptions; } const { default: overrideEsbuildConfig } = await import(absolutePath); return overrideEsbuildConfig(buildOptions); }
I couldn't build the source code with yarn build to change the ".ts" file and I know the "../.." part is messy, but I think this might work and fix the issue.
It looks like this was maybe fixed for the main.js file, but it still happens for the build-figma-plugin.manifest.js file.
