TypeError: Cannot read property 'config' of undefined

[marcin-stasiak]

What version of Tailwind CSS are you using?

v3.0.1

What build tool (or framework if it abstracts the build tool) are you using?

Next 12.0.7

What version of Node.js are you using?

v14.18.2

What browser are you using?

Chrome

What operating system are you using?

Linux

Describe your issue

Compile error after import globals.css

error - ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./stylesheets/globals.css
TypeError: Cannot read property 'config' of undefined

[bolshoytoster]

It appears the error is thrown in either src/lib/setupWatchingContext.js or src/lib/setupTrackingContext.js:

https://github.com/tailwindlabs/tailwindcss/blob/8a4b2f0627126d5ff160540f52d848ebec0c9cd7/src/lib/setupWatchingContext.js#L187-L189

The error occurs when a null/undefined value is passed to the tailwindcss function.

[bolshoytoster]

Adding a '?' to these should either remove the issue or just move it elsewhere.

[marcin-stasiak]

@bolshoytoster I tried your solution but i still get an error. This time:

error - ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./stylesheets/globals.css
TypeError: Cannot read properties of undefined (reading 'corePlugins')
    at Array.map (<anonymous>)

[bolshoytoster]

@marcin-stasiak That error comes from normalize in tailwindcss/src/util/resolveConfig.js

https://github.com/tailwindlabs/tailwindcss/blob/8a4b2f0627126d5ff160540f52d848ebec0c9cd7/src/util/resolveConfig.js#L222-L224

There should be a default config that is used if one isn't given.

Out of interest - could you give your tailwind.config,js (or just the module.exports = {} bit)

[reinink]

Is this still an issue? I can see that you submitted #6399, and then immediately closed it, so I am going to assume that you found out what was wrong with your local setup.

In these situations we really need a minimal reproduction as required in the issue template:

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways. Unfortunately we can't provide support without a reproduction, and your issue will be closed with no comment if this is not provided.

I am going to close this — but feel free to provide a minimal reproduction, and I'd be happy to have another look 👍

[vlechemin]

If you have this, create a file tailwind.config.js in the root folder.

[TimotiusAnrez]

it works, thank you.

I am working in Next.js and Electron stack, don't have much support on this stack so really glad to find an answer.

[wanjas]

Thank you for the hint.

But instead of putting tailwind.config to the root you can do the following:

/* postcss.config.js */
const path = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

/* tailwind.config.js */
const path = require('path');

module.exports = {
  content: [
    path.join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
    path.join(__dirname, './components/**/*.{js,ts,jsx,tsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[Explosion-Scratch]

This happened to me as well, it turned out to be due to a process.chdir(...) call that I had run, and then never changed back to the root dir. Somehow this was messing with tailwind.

[Nicholaiii]

Thank you for the hint.

But instead of putting tailwind.config to the root you can do the following:

/* postcss.config.js */
const path = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

/* tailwind.config.js */
const path = require('path');

module.exports = {
  content: [
    path.join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
    path.join(__dirname, './components/**/*.{js,ts,jsx,tsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This is clearly the superior solution than having to maintain two tailwind configs! :) Thank you.

Edit: This breaks if your build and dev process uses different cwd, such as is the case with several vite based Electron boilerplates. My solution was to check for the MODE env var:

const prod = process.env.MODE === 'production'

module.exports = {
  content: [
    `${prod ? '' : 'packages/renderer/'}src/index.html`,
    `${prod ? '' : 'packages/renderer/'}src/**/*.{vue,js,ts,jsx,tsx}`,
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

[Zest-Zhang]

0

I ran into this problem too and I solved it by:

Create a new project, move the important files in the old project (for me, all the src files in the Vue project), then start the project, success!

[njsaugat]

Thank you for the hint.

But instead of putting tailwind.config to the root you can do the following:

/* postcss.config.js */
const path = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

/* tailwind.config.js */
const path = require('path');

module.exports = {
  content: [
    path.join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
    path.join(__dirname, './components/**/*.{js,ts,jsx,tsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

this really worked for me. Thanks. Just a disclaimer don't forget to check the extension. It has to be .js and not .ts

[sk29110]

Sorry the issue is related to specific OS, npm version, or tailwind library? Why all the sudden I am seeing this problem?

[njsaugat]

I had this problem because I wasn't configuring the config file properly. I was using tailwind.config.ts instead of tailwind.config.js.