Require() of ES Module prettier-plugin-tailwindcss/dist/index.mjs not supported

Instead change the require of prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
I get this error as creating a new

  • Qwik - Site with Visual CMS
  • npm run qwik add ==> tailwind
  • ‘npm run dev’ in my WSL2
  • using my browser to run
  • click “Register Component”, then finally show the below error

Hello @chungyan5,

Welcome to the Builder.io forum.

The error you encountered appears to be a known issue with the “prettier-plugin-tailwindcss” plugin. We’ve successfully tested with node v19 and “prettier-plugin-tailwindcss”: “^0.5.7”, and we couldn’t reproduce the error.

To resolve this, make sure you are using Prettier v3+. For many users, adding the following configuration to their prettier.config.js has resolved the issue:

// prettier.config.js
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

You can find more details and discussions about this issue on the plugin’s GitHub page: prettier-plugin-tailwindcss issue #207.

Hope this helps!

hi @ manish-sharma,

I followed your suggestion and prettier-plugin-tailwindcss issue #207, but actually, i find my code is already same to the suggested code, which is default # Using Builder Devtools for Automated Integration
steps i followed, but still in this error. I tried to remove the node_modules/ and npm install again, but still in same result.

I still stuck in this issue. However, i can manually update the code builder-registry.ts for enable/disable the components.

Hello @chungyan5,

Could you try adding a .prettierignore file to the root of your project with the following lines:

# Files Prettier should not format
**/*.log
**/.DS_Store
*.
dist
node_modules

See if this helps, resolve the issue.

.prettierignore file already there

**/*.log
**/.DS_Store
*.
.vscode/settings.json
.history
.yarn
bazel-*
bazel-bin
bazel-out
bazel-qwik
bazel-testlogs
dist
dist-dev
lib
lib-types
etc
external
node_modules
temp
tsc-out
tsdoc-metadata.json
target
output
rollup.config.js
build
.cache
.vscode
.rollup.cache
dist
tsconfig.tsbuildinfo
vite.config.ts
*.spec.tsx
*.spec.ts
.netlify
pnpm-lock.yaml
package-lock.json
yarn.lock
server

I did not edit it before, automatically generated out during npm XXXX setup

Hello @chungyan5,

As you’re working on a local development environment, reproducing the issue becomes challenging for us. Could you kindly share your repository or GitHub repo? This would enable us to access your codebase and effectively reproduce the issue for further investigation.