ES Module support about tailwind-config-viewer HOT 34 OPEN

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)

from tailwind-config-viewer.

@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!

from tailwind-config-viewer.

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.

from tailwind-config-viewer.

Hi @rogden,

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

from tailwind-config-viewer.

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

from tailwind-config-viewer.

@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();

from tailwind-config-viewer.

Thanks

from tailwind-config-viewer.

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.

from tailwind-config-viewer.

@rogden what is the status?

from tailwind-config-viewer.

Also awaiting these changes

from tailwind-config-viewer.

Is there a workaround ?

from tailwind-config-viewer.

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.

from tailwind-config-viewer.

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.

from tailwind-config-viewer.

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;

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

from tailwind-config-viewer.