Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds support for ESM `tailwind.config.js` files #3544

Draft
wants to merge 2 commits into
base: master
from

Conversation

@natemoo-re
Copy link
Contributor

@natemoo-re natemoo-re commented Feb 8, 2021

ESM adoption in Node is becoming more common—it would be really great for Tailwind to get out ahead of a lot of the issues people are about to run into as the ecosystem shifts to support ESM.

Currently, users who rely on Node ESM with "type": "module" (officially supported since node@12.17.0) must use a tailwind.config.cjs file in CJS format (#3181) inside of their ESM project. This is great! But the best solution would be to allow ESM projects to use the normal tailwind.config.js file in ESM format, as requested in discussion #2284.

I thought this would be a bigger problem, but it turned out to be fairly simple. The magic here is a utility function that attempts to require the config path (will work for CJS files), catch any errors with code: "ERR_REQUIRE_ESM", and then import the config path instead (will work for ESM files). Note that this util function is split into a separate file and excluded from the babel config, otherwise babel transpiles out the native import statement.

Two issues I'd love some assistance on:

  • I don't really know how to write tests for this.
  • There is probably additional logic that needs to be updated to accommodate ESM config files... getModuleDependencies and maybe others?
try {
return require(config)
} catch (e) {
if (e.code === 'ERR_REQUIRE_ESM') {

This comment has been minimized.

@JKrol

JKrol Feb 8, 2021

What if it is a different exception? Right now you will return null, but I think you should throw the original exception.

if (e.code === 'ERR_REQUIRE_ESM') {
try {
return import(config).then(mdl => mdl.default)
} catch (e) {}

This comment has been minimized.

@JKrol

JKrol Feb 8, 2021

Similar to my previous comment, maybe just throw the original exception in here if import also failed, instead of an empty catch?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants