ES Module support

[akrug-va529]

Can you add support for ES Modules? I am using Vite and it is not loading due to require(). Thanks

[stijns96]

Hi @rogden,

Any news on this? We really like to have this in our base theme, but we use .mjs files.

[rogden]

@stijns96 Is the root of the issue a tailwind config using .mjs extension and/or when a tailwind config is using import statements?

[akrug-va529]

@rogden I don't think so. In using Vite the tailwind config file is using export default {} instead of module.exports and it fails when the code tries to import the tailwind config using require();

[stijns96]

@stijns96 Is the root of the issue a tailwind config using .mjs extension and/or when a tailwind config is using import statements?

That's true!

[rogden]

Thanks for the responses. I have a fix I'm testing. Should have it published this weekend. Going to need to require node 13.2+ which shouldn't be an issue given 18 current oldest LTS.

I suppose it will need to be v2 since it is technically a breaking change if you are running Node < 13.2.

[akrug-va529]

Thanks

[gregdeluxee]

If you need a bit more information on the error, here is the output when I try to open the config viewer in the browser:

Error [ERR_REQUIRE_ESM]: require() of ES Module /****/tailwind.config.js from /****/node_modules/tailwind-config-viewer/cli/index.js not supported.

Instead change the require of tailwind.config.js in /****/node_modules/tailwind-config-viewer/cli/index.js to a dynamic import() which is available in all CommonJS modules.

[stijns96]

@rogden what is the status?

[Tajcore]

Also awaiting these changes

[tresorama]

Is there a workaround ?

[rogden]

Hey all....sorry for the delay. The fix is quite simple just haven't had time to test it out yet and also running into some local testing issues. This is the update I made that should fix the issue: .

I'll be able to troublshoot more tomorrow.

Regarding a workaround...if you aren't using import/esm modules within your tailwind.config.js file..simply change export default {} to module.exports = {} (and make sure your config file is using the extension .js)

[tresorama]

Thanks for the reply @rogden !

I take this opportunity to describe my scenario, hoping that it can be used by more folks as well and this usage can be considered for further development of this package.

We know that we have all lot of things to do, so nobody should expecting nothing by OS projects...

Scenario - Multiple Tailwind Configs

I have a "chain" of tailwind configs merged into a final config.

Because of that, it's not enough unfortunately rewriting the final taiwlindConfig (which is used by tailwind-config-viewer as input config) to Common JS syntax. Problem with ES Module support can happens anyway.

A partial workaround

Yesterday i tried to find a workaround, and i think that i most case it will work.
It requires to bundling all config to a single common js file and use that as input for tailwind-config-viewer.

# install esbuild
npm i -D esbuild 

then add scripts

/* package.json */

scripts: {
  "ds:tailwind:config-viewer:compile": "esbuild ./tailwind.config.ts --bundle --format=cjs --outfile=dist-tw-config/tailwind.config.cjs --platform=node",
  "ds:tailwind:config-viewer": "npm run ds:tailwind:config-viewer:compile && tailwind-config-viewer -c dist-tw-config/tailwind.config.cjs -o -p 9000"
}

Then run

npm run ds:tailwind:config-viewer

---

I'm my case this workaround is not working, but i presume because of a npm package that i use that is not compatible. If i deactivate it, it works.

[rogden]

Just published v2. It should fix your ESM issues. Let me know if you run into any new issues related to it.

@tresorama Let me know if it solves your issue as well.

[tresorama]

After updating to 2.0.0 i tried, and it doesn't crash!

---

But the Vue app shows the default tailwind config and not mine, so i suppose that is because i use a chain of configs (with plugins also), but I didn't test enough to confirm this...

I'm doing

tailwind-config-viewer -c ./tailwind.config.ts -o -p 3003

// in ./tailwind.config.ts
import { Config } from "tailwindcss";

export default {
  presets: [
    require("./src/ds/tailwind/tailwind.config.cjs"),
  ],
  content: ['./src/**/*.{html,js,svelte,ts}'],
} satisfies Config;

---

https://github.com/rogden/tailwind-config-viewer/blob/bc9a737280baf5d2d29c1babe2e992c27685168b/src/components/Canvas/Canvas.vue#L120-L126

This fetch call here means that the "config" must be serializable ()??? Tailwind plugins and function in general are supported?

[stijns96]

Hi @rogden,

I also see the default config and I'm getting the following error

> task-manager@1.0.0 tailwind-config-viewer C:\ways-agency\personal\task-manager
> tailwind-config-viewer -o

Server Started ∹ http://localhost:3000
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:136:11)
    at defaultLoad (node:internal/modules/esm/load:87: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.18.1
 ELIFECYCLE  Command failed with exit code 1.

[rogden]

Ok I'm seeing default config as well. Didn't realize it since I use the default config for testing during local dev. Looking into it.

@stijns96 Are you on mac or windows?

[stijns96]

Hi @rogden

Forgot to mention, but I'm on windows!

[rogden]

I fixed the default config appearing in v2.0.1 https://github.com/rogden/tailwind-config-viewer/releases/tag/v2.0.1.

@stijns96 Ok thanks. Can you try 2.0.1? I doubt it will fix your issue but curious. I wonder if it has to do with the await import call I'm making now to support ESM: https://monosnap.com/file/RMLvjWD9RZMTL3mcNq80nnaTOp9dgN . Perhaps on windows it needs an alternative approach to the pathing?

[stijns96]

Hi @rogden ,

I'll try when I'm home! I already tried s couple of things and indeed, you have to adjust the path of the import.

On windows you will get "C://" and the import only accept file and data.

I'll try some other things for you as well qnd maybe you can think a bit along with me.

Let you know!

[stijns96]

Hi @rogden,

I tried some things out and found out that on Windows you have to add file:\\ in front of the import path.

const { pathToFileURL } = require('url');

.action(args => {
  require('../server')({
    port: args.port,
    tailwindConfigProvider: async () => {
      const configPath = resolveConfigPath(program.config)
      const configHref = pathToFileURL(configPath).href;
      delete require.cache[configHref]
      const config = await import(configHref)
      return config.default || config
    },
    shouldOpen: args.open
  }).start()
})

The above fixes my problem with the import, but from that point I get other errors. In my tailwind.config.mjs I'm importing the tailwind colors.

import colors from "tailwindcss/colors";

The error that I get now is:

  Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\ways-agency\personal\task-manager\node_modules\tailwindcss\colors' imported from C:\ways-agency\personal\task-manager\tailwind.config.mjs
  Did you mean to import tailwindcss@3.4.3/node_modules/tailwindcss/colors.js?
      at new NodeError (node:internal/errors:405:5)
      at finalizeResolution (node:internal/modules/esm/resolve:327:11)
      at moduleResolve (node:internal/modules/esm/resolve:946:10)
      at defaultResolve (node:internal/modules/esm/resolve:1132:11)
      at nextResolve (node:internal/modules/esm/loader:163:28)
      at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
      at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
      at link (node:internal/modules/esm/module_job:76:36)

[rogden]

@stijns96 Thanks for the update. I wonder if this is a common issue with relative dynamic import paths on WIndows? This post seems to hit on the issue: https://stackoverflow.com/questions/71432755/how-to-use-dynamic-import-from-a-dependency-in-node-js. Will need to look into it more.

[major2017]

I'm using mac.

package.json:

"tailwind-config-viewer": "tailwind-config-viewer -c ./tailwind.config.ts -o -p 3003"
"tailwind-config-viewer": "^2.0.1"

I get error:

Console

yarn tailwind-config-viewer
CONFIG PROVIDER:  [AsyncFunction: tailwindConfigProvider]
Server Started ∹ http://localhost:3003

  TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/john/app/tailwind.config.ts
      at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
      at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
      at defaultLoad (node:internal/modules/esm/load:141:22)
      at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
      at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
      at async link (node:internal/modules/esm/module_job:76:21)

Browser

[casually-creative]

I'm also encountering this error. My situation:

• react/typescript app with vite.js (default set up created from their template)
• default tailwind config file
• windows 10
• node 20.14.0

tailwind.config.ts:

import { Config } from "tailwindcss";

export default <Partial<Config>>{
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

I run tailwind-config-viewer -o from my package.json and I get this error:

Executing task: pnpm run tailwind 

> <my-package-name-here>@0.0.1 tailwind D:\<path-to-my-repo-here>
> tailwind-config-viewer -o

Server Started ∹ http://localhost:3000

  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 'd:'
      at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11)
      at defaultLoad (node:internal/modules/esm/load:130:3)
      at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
      at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
      at new ModuleJob (node:internal/modules/esm/module_job:67:26)
      at #createModuleJob (node:internal/modules/esm/loader:290:17)
      at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:247:34)
      at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:17)
      at async ModuleLoader.import (node:internal/modules/esm/loader:315:23)

[jonatanolsson]

I am having the same issue as @casually-creative. Works great on MacOS. I am using a tailwind.config.js with module.exports

Current node 20.10.0 Updated to 20.14.0 but no luck with that.

[ThiagoGrupoLzt]

Any update on the case? I'm using Vite and I'm also having the same error.

[casually-creative]

@rogden Sorry for the ping. Do you have any news regarding this issue? I can't seem to get around it. Very unfortunate as I wanted to have a tailwind config dashboard while developing my app. There doesn't seem to be any worthwile alternatives out there.

[rogden]

Hey all. Thanks for the updates. I haven't had time to look into this. I will take a look today and try @stijns96 's fix.

@stijns96 Do you have any idea why it couldn't find the tailwindcss/colors import? Does the path line up in that error with your file system?

Hi @rogden,

I tried some things out and found out that on Windows you have to add file:\\ in front of the import path.

const { pathToFileURL } = require('url');

.action(args => {
  require('../server')({
    port: args.port,
    tailwindConfigProvider: async () => {
      const configPath = resolveConfigPath(program.config)
      const configHref = pathToFileURL(configPath).href;
      delete require.cache[configHref]
      const config = await import(configHref)
      return config.default || config
    },
    shouldOpen: args.open
  }).start()
})

The above fixes my problem with the import, but from that point I get other errors. In my tailwind.config.mjs I'm importing the tailwind colors.

import colors from "tailwindcss/colors";

The error that I get now is:

  Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\ways-agency\personal\task-manager\node_modules\tailwindcss\colors' imported from C:\ways-agency\personal\task-manager\tailwind.config.mjs
  Did you mean to import tailwindcss@3.4.3/node_modules/tailwindcss/colors.js?
      at new NodeError (node:internal/errors:405:5)
      at finalizeResolution (node:internal/modules/esm/resolve:327:11)
      at moduleResolve (node:internal/modules/esm/resolve:946:10)
      at defaultResolve (node:internal/modules/esm/resolve:1132:11)
      at nextResolve (node:internal/modules/esm/loader:163:28)
      at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
      at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
      at link (node:internal/modules/esm/module_job:76:36)

[rogden]

I published 2.0.3 (https://github.com/rogden/tailwind-config-viewer/releases/tag/v2.0.3) that should resolve the Windows issue. Please test and let me know.

[rogden]

@stijns96 When using 2.0.3, you will need to add the .js extension to your tailwind/colors import statement: import colors from 'tailwindcss/colors.js' to fix your latest error.

[stijns96]

@stijns96 When using 2.0.3, you will need to add the .js extension to your tailwind/colors import statement: import colors from 'tailwindcss/colors.js' to fix your latest error.

Nice! I'll try it out this week! 🦾

[Nxtivision]

Hello!

Using the default action (serve), it works correctly on Windows, but the same problem occurs when using export :)

[rogden]

@Nxtivision Thanks for the report. I'll get a fix in tonight. I know the issue (forgot to make the same update to export that fixed serve :) ).

[stijns96]

@stijns96 When using 2.0.3, you will need to add the .js extension to your tailwind/colors import statement: import colors from 'tailwindcss/colors.js' to fix your latest error.

Hi there,

This works! Haven't tested it on windows tho.

[casually-creative]

I published 2.0.3 (https://github.com/rogden/tailwind-config-viewer/releases/tag/v2.0.3) that should resolve the Windows issue. Please test and let me know.

@rogden I installed 2.0.3 and the issue is fixed. Thank you!

However when I have my tailwind config file as a typescript file tailwind.config.ts, it's not finding it. When I convert it to vanilla js, only then it finds it. Do you think this is related, or should I file a seperate issue?

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\<my-repo>\tailwind.config.js' imported from D:\<my-repo>\node_modules\tailwind-config-viewer\cli\index.js.

[rogden]

@Nxtivision Thanks for the report. I'll get a fix in tonight. I know the issue (forgot to make the same update to export that fixed serve :) ).

Fixed in 2.0.4 (https://github.com/rogden/tailwind-config-viewer/releases/tag/v2.0.4)