Fails when installing in a repo using Tailwind PostCSS plugin: cannot read config from undefined

[Kiyozz]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

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 complete

cd web
yarn start

Expected behavior

Client compiled

Actual behavior

❯ yarn start
yarn run v1.22.17
$ docusaurus start
[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at http://localhost:3000/.

✖ Client
  Compiled with some errors in 3.01s
[...]
TypeError: Cannot read properties of undefined (reading 'config')
TypeError: Cannot read properties of undefined (reading 'config')
TypeError: Cannot read properties of undefined (reading 'config')
TypeError: Cannot read properties of undefined (reading 'config')
client (webpack 5.68.0) compiled with 88 errors

Your environment

new.docusaurus codesandbox bad gateway.
new.docusaurus stackblitz all ok

• Docusaurus version used: 2.0.0-beta.15
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node.js 14/16/17
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): darwin 21 (arm64)

Reproducible demo

My project

1. pnpm i to setup the project deps
2. cd docs/web
3. yarn
4. yarn start
5. See the errors in console without stack trace

You could remove the docs/web directory and create a docusaurus yourself

1. rm -rf docs/web
2. cd docs
3. npx create-docusaurus@latest
4. web for the project name
5. classic for the template
6. use typescript
7. cd web
8. yarn start
9. See the errors in console without stack trace

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

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.

[Josh-Cena]

Note that mixing package managers in the first place is a bad idea, especially with PNPM which has a different node_modules assembling strategy.

[Kiyozz]

Yes I know! But I used yarn here because:

1. docusaurus force you to install deps with yarn at the first place (please --skip-install should be the default... 😅)
2. pnpm is not officially supported by docusaurus.

I already tried installing the deps with pnpm too, but same thing happened.

[Josh-Cena]

docusaurus force you to install deps with yarn at the first place (please remove auto install... 😅)

This is because we have far more users that aren't aware of package managers and even an additional npm install step for them is overwhelming😅 I know it's super annoying for you and me, but if you've been helping in the community for a while, you understand it's better if we can do more under the hood. You can use the --skip-install flag if you just want the template.

[PNPM] is not officially supported by docusaurus.

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.

[Josh-Cena]

BTW, the stack traces are retrievable in the overlay:

ERROR in ./node_modules/@docusaurus/core/lib/client/nprogress.css

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/node_modules/.pnpm/tailwindcss@3.0.18_ef48b3b8837f8a23677bffe8f9cd866d/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)
    at /Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/node_modules/.pnpm/tailwindcss@3.0.18_ef48b3b8837f8a23677bffe8f9cd866d/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:124:92
    at /Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/node_modules/.pnpm/tailwindcss@3.0.18_ef48b3b8837f8a23677bffe8f9cd866d/node_modules/tailwindcss/lib/processTailwindFeatures.js:43:11
    at plugins (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/node_modules/.pnpm/tailwindcss@3.0.18_ef48b3b8837f8a23677bffe8f9cd866d/node_modules/tailwindcss/lib/index.js:20:104)
    at LazyResult.runOnRoot (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/postcss/lib/lazy-result.js:206:17)
    at processResult (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/webpack/lib/NormalModule.js:753:19)
    at /Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/webpack/lib/NormalModule.js:855:5
    at /Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/joshcena/Desktop/work/Tech/Projects/repros/papyrus-compiler-app/docs/web/node_modules/postcss-loader/dist/index.js:142:7)

[Every other CSS file we have]

It seems some unwanted code is being visited

[Josh-Cena]

@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 postcss.config.js file. However, this seems to be the cause: https://github.com/Kiyozz/papyrus-compiler-app/blob/139-docusaurus/postcss.config.js

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 tailwind.config.js in this case

[Kiyozz]

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?

[Josh-Cena]

It feels strange that postcss loader is searching recursively for a postcss config.

That's typical behavior with most loaders. E.g. Babel loader will recursively look for a babel.config.js afaik.

Does having a postcss config in the template disallow the loader to search recursively?

Adding a docs/web/postcss.config.js with module.exports = {} does seem to fix it. We probably won't add it to the template, but I think it's a good enough solution for your case.

[Kiyozz]

Is this something docusaurus should be aware (maybe in a faq or something?) or is this only for my use case?

[Josh-Cena]

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

[harish-sethuraman]

I don't think anyone has stumbled upon it

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.

Adding a docs/web/postcss.config.js with module.exports = {} does seem to fix it. We probably won't add it to the template, but I think it's a good enough solution for your case.

I fixed it by creating tailwind.config.js file and adding basic default tailwind config 😄

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

[harish-sethuraman]

@Kiyozz Do you use M1 mac by any chance?

[Kiyozz]

@Kiyozz Do you use M1 mac by any chance?

Indeed

[harish-sethuraman]

It worked on my intel MacBook pro and throws config error in m1 mac 😅 .

[Josh-Cena]

Meh, I'm M1 as well. Would be interesting to have any non-M1 contributor to investigate

[dhushyanth-s]

Can reproduce on a fresh install on an M1 machine. The commands I ran was

npx create-docusaurus@latest docs classic
cd docs
yarn start

Fixed by following @harish-sethuraman 's advice, creating a tailwind.config.js with default configs in the root of docusaurus folder.

yarn version: 1.22.5
node version: v16.13.2

[slorber]

So the init template (on which Tailwind is not installed) fails to start? Are you sure it's the full repro steps? 🤷‍♂️

[harish-sethuraman]

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

[slorber]

I have an M1 pro and can't reproduce this issue with those 3 commands 🤷‍♂️

[harish-sethuraman]

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?

[slorber]

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

[harish-sethuraman]

Also I was in v16.13.1 node version when this happened

[Josh-Cena]

@slorber You need to have Tailwind installed and configured through postcss.config.js and/or tailwind.config.js in your parent directory.

[vnugent]

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 postcss.config.js in the parent dir, docusarus yarn build will fail.

root_project (next.js + tailwind)
   | package.json
   | postcss.config.js. <--- Test: rename this file and the error will go away
   ...
   | --- docs (docusaurus)
         ...

Workaround:

• As suggested above, create tailwind.config.js in docs dir with the following content

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

I hope this helps.

[nvh95]

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:

Toggle

Loading 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)
[ERROR] Client bundle compiled with errors therefore further build is impossible.

If I run npm i at the root of the project, then re-run npm run build inside website, the error looks like this

Toggle

TypeError: 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, docusaurus traverses to its parent folders and if it sees a postcss.config.js, it uses that file. In this case, that behavior is not expected.

[nvh95]

Another workaround if your docusaurus site does not use TailwindCSS:

• Add an postcss.config.js under the docusaurus folder(e.g: website) (nvh95/jest-preview@d4ec483):

// website/postcss.config.js
module.exports = {};

[Josh-Cena]

This is postcss-loader's default behavior. You will see the same result if you have a babel.config.js (which we just happen to already have one by default).

[nvh95]

This is postcss-loader's default behavior. You will see the same result if you have a babel.config.js (which we just happen to already have one by default).

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 postcss.config.js file". A normal user thinks docusaurus folder should be in isolation. For example: I don't even use postcss/ tailwindcss for my docusaurus project, but when I "accidentally" put it as a child folder to a folder contains postcss.config.js, the app fails to build.

Again, if that how postcss-loader behaves, can we do anything to avoid the confusion for some users (who have already had this issue and who are going to have this issue)? Some of my initiatives:

• Somehow isolate/ encapsulate the docusaurus project, so it does not read postcss.config.js from parent folder.
• Note somewhere in the documentation so when encountering this bug, they can easily google it.

[Josh-Cena]

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.

[nvh95]

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.

[slorber]

@nvh95 your monorepo has an unusual shape:

• . contains the jest-preview project
• website contains the Docusaurus site

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.

[zavbala]

I'm here for a Sanity Studio V3 adding an empty tailwind.config.js fix the issue.

[roypearce]

Just encountered a similar issue where locally everything builds fine, but for whatever reason in CI (same node version, same yarn version) I get Error: Cannot find module 'autoprefixer'. That is because one level up there is a postcss.config.js file that expects autoprefixer. Adding the postcss.config.js file with module.exports = {} in it did fix it.

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?

[peiseng]

Hi, is there any update on this feature?

[peiseng]

I think I found the solution.

According to postcss-loader documentation, we can specify the format in:

["package_name", { parameter_key: "parameter_value" }]

where parameter_key and parameter_value are config and "path/to/tailwindcss.config.json" respectively by referencing to tailwindcss documentation.

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;
          },
        };
      },
    ],

[martygo]

I fix this issue, only install and config tailwindCss, how @Josh-Cena said.