-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
Fails when installing in a repo using Tailwind PostCSS plugin: cannot read config from undefined #6631
Comments
Without a reproduction we can't do anything. You must be doing something wrong with your website's code, possibly referencing a variable that doesn't exist. Please don't use the GitHub issue tracker for your question; and even if you do, questions without literally any code can't get you help. |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
Note that mixing package managers in the first place is a bad idea, especially with PNPM which has a different node_modules assembling strategy. |
Yes I know! But I used yarn here because:
I already tried installing the deps with pnpm too, but same thing happened. |
This is because we have far more users that aren't aware of package managers and even an additional
We have an E2E test for installing new projects with PNPM and it had successfully caught a few incompatible changes (most recently #6604), so I'd say it's at least supported for normal use-cases. But for more complicated situations we absolutely recommend Yarn so you can be sure to be on the same page as us. |
BTW, the stack traces are retrievable in the overlay:
It seems some unwanted code is being visited |
@Kiyozz I have concluded that it has nothing to do with PNPM, but rather about your PostCSS config. Because we use PostCSS, the loader will read the I don't have much experience with Tailwind CSS (I know @slorber does :D) So I'd have to see where it goes wrong. I know this config is included in the Tailwind docs. Edit. This seems to do the trick: // postcss.config.js
module.exports = {
plugins: {
tailwindcss: {
content: ["./src/**/*.{html,js}"],
},
autoprefixer: {},
},
} I wonder why the tailwind plugin is not reading the |
Thanks you Joshua. It feels strange that postcss loader is searching recursively for a postcss config. Does having a postcss config in the template disallow the loader to search recursively? |
That's typical behavior with most loaders. E.g. Babel loader will recursively look for a
Adding a |
Is this something docusaurus should be aware (maybe in a faq or something?) or is this only for my use case? |
I don't think anyone has stumbled upon it (although I do know a few sites that use Tailwind + Docusaurus, or Docusaurus in a repo that also uses Tailwind) and it's ultimately just a workaround. Preferably, we should be able to fix it, but given my limited knowledge in either PostCSS or Tailwind, I'll let @slorber make the decision |
During manual migration I faced the same issue. Not sure why. But when I removed all changes and tried migration for the second time I didn't get the issue. Our repo doesn't use tailwind css. I used yarn both time.
I fixed it by creating module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
} |
@Kiyozz Do you use M1 mac by any chance? |
Indeed |
It worked on my intel MacBook pro and throws |
Meh, I'm M1 as well. Would be interesting to have any non-M1 contributor to investigate |
Can reproduce on a fresh install on an M1 machine. The commands I ran was
Fixed by following @harish-sethuraman 's advice, creating a yarn version: 1.22.5 |
So the init template (on which Tailwind is not installed) fails to start? Are you sure it's the full repro steps? 🤷♂️ |
Yes I can confirm. npx create-docusaurus@latest docs classic
cd docs
yarn start starts throwing errors TypeError: Cannot read properties of undefined (reading 'config')
client (webpack 5.68.0) compiled with 88 errors |
I have an M1 pro and can't reproduce this issue with those 3 commands 🤷♂️ |
Do you need any other details? It got replicated when I ran those three steps. Maybe I can help you get the necessary details. Any commands that I can run? |
I don't know, try to provide anything that may be relevant and we'll try to reproduce with same env or compare with other users having similar setups |
Also I was in |
@slorber You need to have Tailwind installed and configured through |
I'm having the same issue. The docusarus project works fines as an independent project. The moment I moves it to a subdir under another project with
Workaround:
I hope this helps. |
I have an exact issue and I can provide the reproduction @Josh-Cena, @slorber. Please do as follow (failed on netlify and Macbook Air M1 2020): git clone https://github.com/nvh95/jest-preview
cd jest-preview
git checkout 706719f3ad4e0810d170f4297312ead9f7e11da9
cd website
npm install
# Build docusaurus site
npm run build The output: ToggleLoading PostCSS "tailwindcss" plugin failed: Cannot find module 'tailwindcss' Require stack: - /Users/myname/oss/jest-preview/website/node_modules/postcss-loader/dist/utils.js - /Users/myname/oss/jest-preview/website/node_modules/postcss-loader/dist/index.js - /Users/myname/oss/jest-preview/website/node_modules/postcss-loader/dist/cjs.js - /Users/myname/oss/jest-preview/website/node_modules/webpack/lib/ProgressPlugin.js - /Users/myname/oss/jest-preview/website/node_modules/webpack/lib/index.js - /Users/myname/oss/jest-preview/website/node_modules/@docusaurus/core/lib/webpack/utils.js - /Users/myname/oss/jest-preview/website/node_modules/@docusaurus/core/lib/webpack/base.js - /Users/myname/oss/jest-preview/website/node_modules/@docusaurus/core/lib/webpack/client.js - /Users/myname/oss/jest-preview/website/node_modules/@docusaurus/core/lib/commands/build.js - /Users/myname/oss/jest-preview/website/node_modules/@docusaurus/core/lib/index.js(@/Users/myname/oss/jest-preview/website/src/pages/index.module.css) If I run ToggleTypeError: Cannot read properties of undefined (reading 'config') Generated code for /Users/myname/oss/jest-preview/website/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!/Users/myname/oss/jest-preview/website/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].use[2]!/Users/myname/oss/jest-preview/website/node_modules/@docusaurus/theme-search-algolia/lib/theme/SearchPage/styles.module.css TypeError: Cannot read properties of undefined (reading 'config') -- inner error --I think somehow, |
Another workaround if your docusaurus site does not use TailwindCSS:
// website/postcss.config.js
module.exports = {}; |
This is |
I see. But is there anything we can do to mitigate this unexpected behavior? As a docusaurus user, I don't want to care about "its parent folder has a Again, if that how
|
I think documenting this is fine, because sometimes projects do want to have a monorepo-wide CSS config (not sure if it works anyway). Still waiting for @slorber to decide if there's something obviously wrong with our config (I can't see any), or if this is working as intended and we just need to document it. |
Yeah. Thank you @Josh-Cena. I think documenting and if possible, trying to catch the error and show some meaningful error messages would be wonderful. |
@nvh95 your monorepo has an unusual shape:
IE you are nesting one package within another without very clear package boundaries and no monorepo deps hoisting. I can't tell if this monorepo setup should always be forbidden/avoided in all cases, but it clearly leads to unexpected behaviors in many situations. I suggest doing like everyone else: move your core project code to an isolated subfolder, and use Yarn/npm workspaces. |
I'm here for a |
Just encountered a similar issue where locally everything builds fine, but for whatever reason in CI (same node version, same yarn version) I get Since it seems that nesting docusaurus inside of a directory of an active project is fairly common practice, perhaps docusaurus can try to pre-emptively solve these issues by scanning the parent directory for these common config files and if they exist, create dummy ones? |
Hi, is there any update on this feature? |
I think I found the solution. According to
where parameter_key and parameter_value are config and "path/to/tailwindcss.config.json" respectively by referencing to Thus, the final code should be: plugins: [
async function myPlugin(context, options) {
return {
name: "docusaurus-tailwindcss",
configurePostCss(postcssOptions) {
// Appends TailwindCSS and AutoPrefixer.
postcssOptions.plugins.push(['tailwindcss', {config: "apps/{project_name}/taildwind.config.js"}]);
postcssOptions.plugins.push(require("autoprefixer"));
return postcssOptions;
},
};
},
], |
I fix this issue, only install and config tailwindCss, how @Josh-Cena said. |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
Cannot start/build docusaurus classic template
Tried with node@14/node@16/node@17
Steps to reproduce
Waiting for
npx create-docusaurus@latest web classic
to completeExpected behavior
Client compiled
Actual behavior
Your environment
new.docusaurus codesandbox bad gateway.
new.docusaurus stackblitz all ok
Reproducible demo
My project
pnpm i
to setup the project depscd docs/web
yarn
yarn start
You could remove the
docs/web
directory and create a docusaurus yourselfrm -rf docs/web
cd docs
npx create-docusaurus@latest
web
for the project nameclassic
for the templateuse typescript
cd web
yarn start
Self-service
The text was updated successfully, but these errors were encountered: