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;

---

tailwind-config-viewer/src/components/Canvas/Canvas.vue

Lines 120 to 126 in bc9a737

	async mounted () {
	const config = await fetch(window.__TCV_CONFIG.configPath)
	this.config = await config.json()
	this.config = defu(this.config, defaultOptions)
	this.configTransformed = themeComponentMapper(this.config.theme)
	fontTagCreator(this.config.theme)
	}

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