Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Relative imports from tailwind.config.js result into errors with CLI

See original GitHub issue

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.

Issue Analytics

State:
Created 3 years ago
Comments:15 (8 by maintainers)

Top GitHub Comments

2reactions

muhammadsammycommented, Feb 25, 2021

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

1reaction

erictheswiftcommented, 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 😉

Top Results From Across the Web

Content Configuration - Tailwind CSS

Using relative paths. By default Tailwind resolves non-absolute content paths relative to the current working directory, not the tailwind.config.js file. This ...

Tailwind CSS classes is not working with React, error "You ...

This line is missing in your tailwind.config.js file, which causes tailwind to fail to detect class usage in all your .js file:

How to use Tailwind CSS in React to configure Create React ...

#using npm npm · @craco ; // craco.config.js module · = ; //index.css @tailwind base ; // index.js import ; //index.js import ......

postcss-cli - npm

Start using postcss-cli in your project by running `npm i ... Mirror the directory structure relative to this path in the output directory, ......

Configuration Reference - Astro Documentation

Controls the output directory of server JavaScript when building to SSR. This value is relative to the outDir . { build: ...