area17 / blast

Storybook for Laravel Blade 🚀
https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c
Apache License 2.0
262 stars 37 forks source link

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

Closed jeramyhing closed 3 months ago

jeramyhing commented 4 months ago

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:

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