area17 / blast

Storybook for Laravel Blade 🚀

Home Page:https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix ESM Import Path Error on Windows in `resolveTailwindConfig()` Function

jeramyhing opened this issue · comments

Bug Description

When running the script on a Windows environment, the dynamic import statement in the resolveTailwindConfig function throws an ERR_UNSUPPORTED_ESM_URL_SCHEME error. This issue arises because the path provided to the import() function does not conform to the file:// URL scheme expected by Node.js for ESM imports on Windows platforms.

To Reproduce

Steps to reproduce the behavior:

  • Set up the project on a Windows environment.
  • Run the script php artisan blast:publish.
  • See the ERR_UNSUPPORTED_ESM_URL_SCHEME error related to the dynamic import statement.

Expected behavior

The script should dynamically import the Tailwind configuration file without throwing any errors, regardless of the operating system.

Error Output

Error Output:
================
node:internal/errors:496
    ErrorCaptureStackTrace(err);
    ^

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 'c:'
    at new NodeError (node:internal/errors:405:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:131:11)
    at defaultLoad (node:internal/modules/esm/load:82:3)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Node.js v18.17.0

Proposed Solution

To resolve this issue, we suggest modifying the resolveTailwindConfig() function to use the pathToFileURL function from Node.js's url module. This change will correctly convert the file path to a file:// URL, ensuring compatibility across operating systems, including Windows.

Here's the suggested change:

// ./src/resolveTailwindConfig.js

async function resolveTailwindConfig() {
  const fs = await import('fs');
  const { default: resolveConfig } = await import('tailwindcss/resolveConfig.js')
  const { pathToFileURL } = await import('url');

  // Convert CONFIGPATH to a file URL
  const configPath = pathToFileURL(process.env.CONFIGPATH).href;

  const { default: config } = await import(configPath)

  const fullConfig = resolveConfig(config);

  try {
    if (!fs.existsSync(TEMP_DIR)) {
      fs.mkdirSync(TEMP_DIR);
    }

    fs.writeFileSync(OUTPUT_PATH, `<?php return ${parseConfig(fullConfig)};`);
  } catch (err) {
    console.error(err);
  }
}

This update will automatically handle the conversion of the configuration file path into a valid file:// URL, resolving the ERR_UNSUPPORTED_ESM_URL_SCHEME error on Windows platforms.

Additional context

  • This error was encountered using Node.js version 18.17.0 on a Windows environment.
  • We have tested a successful outcome on the Windows environment in question after the suggested change.
  • The issue does not appear on UNIX-based systems due to differences in file path handling.
  • We have tested the continued successful outcome on UNIX-based systems after the suggested change.