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
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.
@manish-sharma I got the same error when attempting to run npm init builder.io@latest --existing
It turns out that having a .prettierrc file was causing an error. Changing the file to be .prettierrc.js fixes the issue. This does throw errors with our other tooling (eslint) though.
Can you see any reason why having this .prettierrc file would throw this error?
{
"printWidth": 120,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"jsxSingleQuote": true,
"plugins": [
"prettier-plugin-tailwindcss"
]
}
Hello @tom-bee,
The issue you’re encountering could be due to the format of your .prettierrc file. Prettier allows configuration files in multiple formats such as JSON, YAML, or JavaScript.
When you use a .prettierrc.js file, you’re essentially writing JavaScript code to configure Prettier. This allows for more flexibility and advanced configuration options compared to JSON or YAML files. However, this format might not be compatible with other tools like ESLint if they expect a specific file format.
However, as you mentioned, switching to .prettierrc.js might introduce compatibility issues with other tools like ESLint, which might expect a different file format. To resolve this, you may need to find a compromise or alternative configuration that works for both Prettier and ESLint. This could involve adjusting your configuration settings or finding a way to make the two tools compatible.
Thanks for the info. Since I posted I have managed to get the .prettierrc.js file working ok.
I’m still confused as to why that .prettierrc json file didn’t work with builder.io. It was a valid .prettierrc and worked great for everything else. Not being able to parse it with the error at the top of this thread throwing could be a bug on your end. It might be worth having one of the devs check it out, or seeing if QA can reproduce the issue.