ES Module support #92

akrug-va529 · 2024-01-24T13:27:58Z

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

stijns96 · 2024-03-12T14:04:26Z

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

rogden · 2024-03-14T14:18:03Z

@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 · 2024-03-14T14:26:25Z

@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 · 2024-03-14T14:41:20Z

@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 · 2024-03-15T02:40:52Z

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 · 2024-03-15T13:16:24Z

Thanks

gregdeluxee · 2024-03-24T17:00:25Z

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 · 2024-03-24T17:30:08Z

@rogden what is the status?

Tajcore · 2024-03-25T15:37:05Z

Also awaiting these changes

tresorama · 2024-03-27T03:08:22Z

Is there a workaround ?

rogden · 2024-03-27T03:36:14Z

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 · 2024-03-28T17:14:09Z

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 · 2024-03-29T01:43:19Z

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 · 2024-03-29T02:59:40Z

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 · 2024-03-31T10:15:12Z

Hi @rogden,

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

> [email protected] 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 · 2024-03-31T13:17:03Z

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 · 2024-03-31T13:18:32Z

Hi @rogden

Forgot to mention, but I'm on windows!

rogden · 2024-03-31T13:38:55Z

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 · 2024-03-31T14:09:21Z

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 · 2024-04-01T09:10:57Z

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 [email protected]/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 · 2024-04-01T18:44:55Z

@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 · 2024-04-03T14:00:04Z

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 · 2024-06-03T18:51:26Z

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 · 2024-06-12T12:37:21Z

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 · 2024-06-13T15:30:30Z

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

casually-creative · 2024-06-14T08:02:08Z

@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 · 2024-06-14T14:29:46Z

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 [email protected]/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 · 2024-06-16T20:26:12Z

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 · 2024-06-16T20:27:15Z

@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 · 2024-06-18T19:03:07Z

@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 · 2024-06-19T09:06:15Z

Hello!

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

rogden · 2024-06-20T14:32:14Z

@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 · 2024-06-20T14:39:49Z

@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 · 2024-06-21T09:05:13Z

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 · 2024-06-24T02:39:42Z

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

rogden closed this as completed Mar 29, 2024

rogden reopened this Mar 31, 2024

ineshbose mentioned this issue Apr 28, 2024

Ship esm version #49

Closed

rogden closed this as completed Jun 28, 2024

ES Module support #92

ES Module support #92

Comments

akrug-va529 commented Jan 24, 2024

stijns96 commented Mar 12, 2024

rogden commented Mar 14, 2024

akrug-va529 commented Mar 14, 2024

stijns96 commented Mar 14, 2024

rogden commented Mar 15, 2024 • edited Loading

akrug-va529 commented Mar 15, 2024

gregdeluxee commented Mar 24, 2024

stijns96 commented Mar 24, 2024

Tajcore commented Mar 25, 2024

tresorama commented Mar 27, 2024

rogden commented Mar 27, 2024

tresorama commented Mar 28, 2024

Scenario - Multiple Tailwind Configs

A partial workaround

rogden commented Mar 29, 2024

tresorama commented Mar 29, 2024

stijns96 commented Mar 31, 2024

rogden commented Mar 31, 2024

stijns96 commented Mar 31, 2024

rogden commented Mar 31, 2024

stijns96 commented Mar 31, 2024

stijns96 commented Apr 1, 2024

rogden commented Apr 1, 2024

major2017 commented Apr 3, 2024

Console

Browser

casually-creative commented Jun 3, 2024 • edited Loading

jonatanolsson commented Jun 12, 2024

ThiagoGrupoLzt commented Jun 13, 2024

casually-creative commented Jun 14, 2024

rogden commented Jun 14, 2024

rogden commented Jun 16, 2024

rogden commented Jun 16, 2024

stijns96 commented Jun 18, 2024

Nxtivision commented Jun 19, 2024

rogden commented Jun 20, 2024

stijns96 commented Jun 20, 2024 • edited Loading

casually-creative commented Jun 21, 2024 • edited Loading

rogden commented Jun 24, 2024

rogden commented Mar 15, 2024 •

edited

Loading

casually-creative commented Jun 3, 2024 •

edited

Loading

stijns96 commented Jun 20, 2024 •

edited

Loading

casually-creative commented Jun 21, 2024 •

edited

Loading