tailwindcss-classnames: Relative imports from tailwind.config.js result into errors with CLI

We have design tokens specified in a separate tokens.json (located in the same directory relative to tailwind.config.js) file, which is populated automatically from Figma designs. This data is imported in our tailwind.config.js:

const tokens = require('./tokens.json');

When running tailwindcss-classnames command, this error happens:

? Tailwind configuration filename tailwind.config.js
? Name of the file with generated types tailwindcss-classnames.ts
? Name or path of the file with the custom types 

(node:203572) UnhandledPromiseRejectionWarning: Error: Cannot find module './tokens.json'
Require stack:
- /home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js
- /home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at eval (eval at GeneratedFileWriter.generateFileContent (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js:84:88), <anonymous>:4:16)
    at GeneratedFileWriter.generateFileContent (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js:84:88)
    at GeneratedFileWriter.<anonymous> (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js:44:81)
    at step (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/node_modules/tslib/tslib.js:143:27)
    at Object.next (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/node_modules/tslib/tslib.js:124:57)
    at fulfilled (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/node_modules/tslib/tslib.js:114:62)
(node:203572) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

I replaced the node require import with direct file reading:

const tokens = JSON.parse(fs.readFileSync(`${__dirname}/tokens.json`, { encoding: 'utf8' }))

but it doesn’t help, this error is thrown instead:

? Tailwind configuration filename tailwind.config.js
? Name of the file with generated types tailwindcss-classnames.ts
? Name or path of the file with the custom types 

(node:205483) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/tokens.json'
    at Object.openSync (fs.js:458:3)
    at Object.readFileSync (fs.js:360:35)
    at eval (eval at GeneratedFileWriter.generateFileContent (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js:84:88), <anonymous>:7:30)
    at GeneratedFileWriter.generateFileContent (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js:84:88)
    at GeneratedFileWriter.<anonymous> (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/lib/cli/core/GeneratedFileWriter.js:44:81)
    at step (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/node_modules/tslib/tslib.js:143:27)
    at Object.next (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/node_modules/tslib/tslib.js:124:57)
    at fulfilled (/home/kimmob/code/design-system/node_modules/tailwindcss-classnames/node_modules/tslib/tslib.js:114:62)
(node:205483) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:205483) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Looks like all relative imports or file reads from tailwind.config.js are going to break, since the GeneratedFileWriter resolves file paths relative to its own path (node_modules/tailwindcss-classnames/lib/cli/core) for generation purposes.

About this issue

Original URL
State: open
Created 3 years ago
Comments: 16 (8 by maintainers)

Commits related to this issue

fix: set the vm's `__dirname` global to the path of the config file Fixes #120 This is a workaround for errors from relative imports inside the config by using the `__dirname` global in imports — committed to muhammadsammy/tailwindcss-classnames by muhammadsammy 3 years ago

Most upvoted comments

It should be fixed now by https://github.com/muhammadsammy/tailwindcss-classnames/commit/0e401e3f0633282e19dfc5fe6274538072719a7a. Please update to the latest version (2.0.7)

muhammadsammy on Feb 25, 2021

Ah yep that appears to be mine: config part referencing process.env seems to be the reason. BTW in my case it’s impossible to configure tailwind correctly without reading env vars. Possibly this should be fixed for me if you provide parent context global-s (at least process) in nested vm context object 😉

erictheswift on Feb 25, 2021

Still the same result when executing via npm run x. Error reporting is not clear enough (swallows details) to understand what is going on without digging into sources

npm run build-tailwindcss-classnames
> processapp_frontend@1.0.1 build-tailwindcss-classnames
> tailwindcss-classnames -i tailwind.config.js
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "ReferenceError: process is not defined".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
npm ERR! code 1
npm ERR! path ~/Dev/minefield
npm ERR! command failed
npm ERR! command sh -c tailwindcss-classnames -i tailwind.config.js

22 verbose stack Error: command failed
22 verbose stack     at ChildProcess.<anonymous> (~/.n/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack     at ChildProcess.emit (node:events:378:20)
22 verbose stack     at maybeClose (node:internal/child_process:1067:16)
22 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
23 verbose pkgid processapp_frontend@1.0.1
24 verbose cwd ~/Dev/minefield
25 verbose Darwin 20.3.0
26 verbose argv "~/.n/bin/node" "~/.n/bin/npm" "run" "build-tailwindcss-classnames"
27 verbose node v15.9.0
28 verbose npm  v7.5.3
29 error code 1
30 error path ~/Dev/minefield
31 error command failed
32 error command sh -c tailwindcss-classnames -i tailwind.config.js
33 verbose exit 1

erictheswift on Feb 25, 2021

I’d suggest looking how tailwind cli itself handles imports like these before reinventing the wheel. I’ve caught the same issue — npx tailwindcss cli works ok, npx tailwindcss-classnames fails.

Btw why don’t you use ./tailwind.config.js config path as a default?

erictheswift on Feb 4, 2021