[Bug]: An ES Module error occurred with the --sort-tailwindcss-classes option

[yaegassy]

Description

Error

In recent versions of Laravel's package.json, the "type": "module" is set. Additionally, the tailwind.config.js file generated by Laravel Breeze uses import/export instead of require, which seems to be causing this error.

$ npx blade-formatter -c --sort-tailwindcss-classes resources/views/welcome.blade.php
Check formatting...

All matched files are formatted!

Errors:

{
  path: 'resources/views/welcome.blade.php',
  message: 'require() of ES Module /Users/yaegassy/check/example-app/tailwind.config.js from /Users/yaegassy/check/example-app/node_modules/@shufo/tailwindcss-class-sorter/dist/main.js not supported.\n' +
    'Instead change the require of tailwind.config.js in /Users/yaegassy/check/example-app/node_modules/@shufo/tailwindcss-class-sorter/dist/main.js to a dynamic import() which is available in all CommonJS modules.',
  error: Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yaegassy/check/example-app/tailwind.config.js from /Users/yaegassy/check/example-app/node_modules/@shufo/tailwindcss-class-sorter/dist/main.js not supported.
  Instead change the require of tailwind.config.js in /Users/yaegassy/check/example-app/node_modules/@shufo/tailwindcss-class-sorter/dist/main.js to a dynamic import() which is available in all CommonJS modules.
      at v (/Users/yaegassy/check/example-app/node_modules/@shufo/tailwindcss-class-sorter/dist/main.js:1:1400)
      at /Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:9:4394
      at [Symbol.replace] (<anonymous>)
      at String.replace (<anonymous>)
      at Function.replace (/Users/yaegassy/check/example-app/node_modules/lodash/lodash.js:14608:48)
      at j.sortTailwindcssClasses (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:9:4167)
      at /Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:9:2331
      at async k.formatFile (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:67:968)
      at async Promise.all (index 0)
      at async k.formatFiles (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:67:819)
      at async k.processPath (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:67:252)
      at async Promise.all (index 0)
      at async k.processPaths (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:67:157)
      at async k.formatFromCLI (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:59:2680)
      at async Object.Ye (/Users/yaegassy/check/example-app/node_modules/blade-formatter/dist/cli-bundle.js:104:75) {
    code: 'ERR_REQUIRE_ESM'
  }
}

Repro

mkdir -p $HOME/check
cd $HOME/check

composer create-project laravel/laravel example-app
cd example-app

composer require laravel/breeze --dev
php artisan breeze:install blade

npx blade-formatter -c --sort-tailwindcss-classes resources/views/welcome.blade.php

---

Generated tailwind.config.js:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

Expected Behavior

...Omitted.

Actual Behavior

...Omitted.

Additional Context

...Omitted.

[shufo]

I'm now working for ESM support on blade-formatter.
It may take some time as it affects a wide range of the ecosystem.

Thanks for sharing the news about Laravel's change!

[yaegassy]

This issue has been adjusted in the latest version of blade-formatter and is closed.

[shufo]

@yaegassy
Thanks for upgrade! 1.33.0 had some issue when sorting tailwindcss but fixed in 1.33.1.