TypeError: Cannot read properties of undefined (read of undefined (reading 'config')

[tacolegs2004]

Verify canary release

• [X] I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Home Binaries: Node: 17.3.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.1.7-canary.38 react: 18.1.0 react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I get an error whenever I try to visit the local host link that prevents me from seeing the expected boilerplate.

Expected Behavior

I expecr to see the boilerplate nextjs site.

To Reproduce

does this help?

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css TypeError: Cannot read properties of undefined (reading 'config')

[balazsorban44]

This sounds similar to https://github.com/vercel/next.js/issues/32443 but as of then, there was no reproducible error on my side. I would be happy to investigate your case if you can provide a reproduction.

[tacolegs2004]

I'm not entirely sure how to provide a reproduction. I follow the instructions provided by the nextjs website to create a boilerplate next project.

[balazsorban44]

Does this happen on every project, even if you create one using our CLI?

[tacolegs2004]

Yes it does.

[maxwaiyaki]

Is there a walk around for this??

[FelipeBattistotti]

I have the same error!

[daverik]

I had this error but fixed it by removing a postcss.config and a tailwind.config that I had accidentally added to a parent directory.

[mickbut-ler]

Does anyone have a fix for this bug?

[vlukashov]

Accidentally I've stumbled on this (or a very similar) issue, and I have a reliable way to reproduce it.

In my case the NextJS project is in a subfolder of a larger repo. If the parent folder happens to have a postcss.config.js file with the tailwindcss and autoprefixer plugins, then the NextJS project fails to run or build.

Steps to reproduce

• create a parent folder: mkdir monorepo && cd monorepo
• install the PostCSS, TailwindCSS and Autoprefixer: npm init -y && npm install -D tailwindcss postcss autoprefixer
• create a postcss.config.js in the monorepo folder

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

• create a basic NextJS app in a subfolder: npx create-next-app@latest --typescript next-app (the nesting level does not seem to matter: the issue appears equally when the NextJS app is directly in monorepo/next-app or is nested in monorepo/packages/next-app)
• run the NextJS app: cd next-app && npm run dev
• see the error

  error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[4].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[4].use[2]!./styles/Home.module.css
  TypeError: Cannot read properties of undefined (reading 'config')
  

• remove the postcss config file and see that the error is gone

@balazsorban44, I hope a reproduction case would help you to investigate the issue and eventually get it fixed. Thanks for you support!

[inemiro]

creating tailwind.config.js file helped me in the similar monorepo case. content can be simple as that:

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

[spencerframe]

The tailwind and postcss files in a parent folder were causing the issue for me. Resolved! Thank heavens!

[blastZ]

Maybe helpful, In monorepo(I used nx), you should add specific tailwind config path for postcss config

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {
      config: 'apps/[app-name]/[your-path]/tailwind.config.js',
    },
    autoprefixer: {},
  },
};

You also need the full content path in tailwind.config.js to let css work

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    'apps/[app-name]/[your-path]/app/**/*.{js,ts,jsx,tsx}',
     // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[postoronnii]

I started getting the same issue from yesterday when I tried to build a new nextJS project🤔 npx create-next-app@latest I haven't faced it before. I also tried to install NextJS with app/ and with pages/ folders, but getting the same error. I haven't installed anything else, only NextJS. What can be the issue?

Params: MacOS Ventura, Next.js v13.1.5

error - ./src/app/page.module.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[7].use[3]!./src/app/page.module.css
TypeError: Cannot read properties of undefined (reading 'config')
    at runMicrotasks (<anonymous>)
Import trace for requested module:
./src/app/page.module.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[7].use[3]!./src/app/page.module.css
./src/app/page.module.css

[Jayant818]

Got the Same Error bro

[Steve-Reid]

In my case the NextJS project is in a subfolder of a larger repo. If the parent folder happens to have a postcss.config.js > file with the tailwindcss and autoprefixer plugins, then the NextJS project fails to run or build.

• remove the postcss config file and see that the error is gone

@vlukashov I can't than enough for posting this. I've been going nuts trying to figure out what happened. I don't think I would have ever spotted this if wasn't for your solution. Cheers

[douglasrcjames]

For me, the issue was directly tied to if I chose to NOT install tailwindcss. My default project ran just fine when I chose to install tailwind. I tried on the @canary version as well! Current @latest version is 13.3.2. I guess I will just learn tailwindcss until this is fixed lol!

Setup steps:

√ What is your project named? ... test-next-error
√ Would you like to use TypeScript with this project? ...Yes
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use Tailwind CSS with this project? ... No
√ Would you like to use `src/` directory with this project? ... Yes
√ Would you like to use experimental `app/` directory with this project? ...  Yes
√ What import alias would you like configured? ... @/*

Then I just ran npm run dev after navigating to new project directory, and the error below pops up:

Error: ./src/app/page.module.css TypeError: Cannot read properties of undefined (reading 'config') at runMicrotasks (<anonymous>)

EDIT: I found out that on my Mac the issue was not present, so I tried using the same repo from my mac on my desktop and still had issues. Ince I reinstalled Windows 11 from Win10 I didn't have the issues anymore!

[KarloZKvasin]

Hi, I had the same problem when I had cypress in a separate folder. I had to create the talwind configuration separately in the cypress folder as well. Hope this helps you.

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (xxx/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:85:63)
    at xxx/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:97:92
    at xxx/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11

in folder cypress I added tailwind.config.js with

import configuration from './../tailwind.config';

const testConfiguration = {
  ...configuration,
  content: ['../src/**'],
};

export default testConfiguration;

[iSuslov]

Having the same issue with firebase hosting emulator.

To reproduce simply:

npx create-next-app@latest

when creating a new app select tailwind.

After that, try to run it in firebase emulators

[francosopo]

I had the same issue, but it was kind of fixed by doing in postcss config file

module.exports = { plugins: { tailwindcss: { config:'./tailwind.config.js', }, autoprefixer: {}, }, }

but now the error is that it does not find 'blocklist'

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.