Cannot read property '700' of undefined #214

alexmanzo · 2021-10-20T23:08:26Z

What version of @tailwindcss/typography are you using?

v0.5.0-alpha.2

What version of Node.js are you using?

v16.11.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/alexmanzo/alex

Describe your issue

I just set up this repo, so it's basically a blank slate. I installed both tailwindcss@next and @tailwindcss/typography@next. Attempting to run the project results in the following error:

TypeError: Cannot read properties of undefined (reading '700')
    at Object.module.exports [as typography] (alex/node_modules/@tailwindcss/typography/src/styles.js:16:65)

That particular line in the styles.js is:

color: theme('colors.gray.700', colors.gray[700]),

I haven't yet tried overriding the config or anything, but wanted to flag it since these versions are still in alpha! I'd love to be able to use the newest versions as I work on this... happy to try fixes/workarounds!

Edit to add tailwind.config.cjs

const config = {
  content: ['./src/**/*.{html,js,svelte,ts}'],

  theme: {
    extend: {},
  },

  plugins: [require('@tailwindcss/typography')],
}

module.exports = config

The text was updated successfully, but these errors were encountered:

dhaig · 2021-11-04T02:43:21Z

I got the exact same error and the issue was a version discrepancy. Can you run npm list to double-check what versions are installed?

alexmanzo · 2021-11-07T16:57:06Z

Aha - I will say it magically started working not long after this. I wish I could explain how or why. In any case, npm list does reveal a couple interesting errors that I'll look into with more time:

├── @sveltejs/kit@1.0.0-next.187 invalid: "next" from the root project
├── @tailwindcss/typography@0.5.0-alpha.2
├── autoprefixer@10.3.7
├── cssnano@5.0.8
├── postcss-load-config@3.1.0
├── postcss@8.3.10
├── svelte-check@2.2.7
├── svelte-preprocess@4.9.8
├── svelte@3.44.0
└── tailwindcss@3.0.0-alpha.1 invalid: "next" from the root project


npm ERR! code ELSPROBLEMS
npm ERR! invalid: @sveltejs/kit@1.0.0-next.187 /Users/alexmanzo/code/alex/node_modules/@sveltejs/kit
npm ERR! invalid: tailwindcss@3.0.0-alpha.1 /Users/alexmanzo/code/alex/node_modules/tailwindcss

chakerben · 2021-11-10T00:08:03Z

i got the same issue , how do you fixed it ?
Thaks

PeterPenz91 · 2021-11-10T13:51:24Z

I got the same issue. from one day to the other I got the error:
Found Tailwind CSS config file: /../vurnished-website/tailwind.config.js Loaded postcss v8.3.6: /../node_modules/postcss Loaded tailwindcss v2.2.7: /../node_modules/tailwindcss [Error - 1:11:21 PM] Tailwind CSS: Cannot read property '700' of undefined TypeError: Cannot read property '700' of undefined at Object.<anonymous> (/Users/pep/Documents/projects/Vloor/Apps/vurnished-website/node_modules/@tailwindcss/typography/src/styles.js:949:38) at Module._compile (internal/modules/cjs/loader.js:1125:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1155:10) at Module.load (internal/modules/cjs/loader.js:982:32) at Module._load (internal/modules/cjs/loader.js:823:14) at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at Module.require (internal/modules/cjs/loader.js:1006:19) at Module.A._require.t.require (/Users/pep/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.2/dist/server/tailwindServer.js:56:287667) at require (internal/modules/cjs/helpers.js:88:18)

building my site fails. I am using Gatsby as a site builder

atmonshi · 2021-11-10T20:37:47Z

for me, it fixed when I change the tailwindcss/typography to version 0.5.0-alpha.2

itsfaqih · 2021-11-11T09:28:59Z

I don't think this happen in 0.5.0-alpha.2 because the tailwind 3 color palette is included in 0.5.0-alpha.3 (see #217)
the cause of this error is because you use tailwind 2 which doesn't have the tailwind 3 colors yet

PeterPenz91 · 2021-11-11T13:02:16Z

Thanks for the quick reply. Sry i was not specific enough with my first comment.
I use tailwind version 2 in combination with @tailwind/typography 0.4.1. So yes this has nothing to do with 0.5.0-alpha.3,
but never the less I still get the error which should be not happening if those two versions are meant to be compatible with each other.

updating to tailwind 3.0.0-alpha.2
and @tailwind/typography 0.5.0-alpha.3 are not really an option right now as using two alpha versions in production is not a great solution.

To be more specific:
As soon as I add tailwind/typography to the tailwind config get the error even through the TailwindCSS IntelliSense Extension, which points to this line in /node_modules/@tailwindcss/typography/src/styles.js:949:38:

// Gray color themes

  slate: {
    css: {
      '--tw-prose-body': colors.slate[700],

chakerben · 2021-11-12T22:49:42Z

fixed by using:
npm install -D tailwindcss@next
npm install -D @tailwindcss/typography@next

adamwathan · 2021-11-21T15:25:54Z

Closing as this is definitely due to version mismatch — using next for both packages will resolve 👍🏻

sureshjoshi · 2021-12-09T19:51:48Z

I know this is closed, but just a heads up that I ran into this on a fresh repo as well today. It also pops up in VSCode when I load the Tailwind CSS Intellisense plugin (updated 2 days ago).

Using yarn 3.1.1:

"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@tailwindcss/typography": "^0.5.0",
"@tailwindcss/ui": "^0.7.2",
"tailwindcss": "^3.0.0",

In my application and also in VSCode (from Tailwind CSS Intellisense) I get this:

Cannot read property '700' of undefined
    at Object.<anonymous> (/Users/sj/Developer/tailwind3/.yarn/__virtual__/@tailwindcss-typography-virtual-2494e377dc/0/cache/@tailwindcss-typography-npm-0.2.0-a2f9b30b81-0f38d799cb.zip/node_modules/@tailwindcss/typography/src/styles.js:15:40)
    at Module._compile (internal/modules/cjs/loader.js:1125:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1155:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.external_module_.Module._load (/Users/sj/Developer/tailwind3/.pnp.cjs:15467:14)
    at Module.require (internal/modules/cjs/loader.js:1006:19)
    at Module.T._require.t.require (/Users/sj/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.3/dist/server/tailwindServer.js:56:289296)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/sj/Developer/tailwind3/.yarn/__virtual__/@tailwindcss-typography-virtual-2494e377dc/0/cache/@tailwindcss-typography-npm-0.2.0-a2f9b30b81-0f38d799cb.zip/node_modules/@tailwindcss/typography/src/index.js:4:16)
    at Module._compile (internal/modules/cjs/loader.js:1125:30)

I think I tracked it to my Tailwind UI dep.

yarn.lock

"@tailwindcss/ui@npm:^0.7.2":
  version: 0.7.2
  resolution: "@tailwindcss/ui@npm:0.7.2"
  dependencies:
    "@tailwindcss/custom-forms": ^0.2.1
    "@tailwindcss/typography": ^0.2.0
    hex-rgb: ^4.1.0
    postcss-selector-parser: ^6.0.2
  peerDependencies:
    tailwindcss: ^1.8.3
  checksum: 375966b7ae0e32047a6c1cf35fb3d71a53a5f49fb2410e049ba1adac7393574051d2fddc5ee19bff6892371c1ab1ca18a3cfa6f000372593fc20eb74a8198c04
  languageName: node
  linkType: hard

I was able to workaround by setting the resolutions to typography 0.5.0 - but 🤷🏽‍♂️

sureshjoshi · 2021-12-09T19:54:27Z

Whiiiiiiichhhhhh I now realize may have been incorrectly copied in from an old project, and probably should have been removed 1 whole version ago. 🤦🏽‍♂️

meri-leeworthy · 2021-12-10T20:52:07Z

I had this 'cannot read property' problem, just tried installing both tailwind and typography plugin @next and now getting an "unclosed bracket" error when I try to add the prose class...

edit: actually this only happens when trying to add it in an @apply rule

pgarzina · 2021-12-11T10:55:24Z

I got the same issue. from one day to the other I got the error: Found Tailwind CSS config file: /../vurnished-website/tailwind.config.js Loaded postcss v8.3.6: /../node_modules/postcss Loaded tailwindcss v2.2.7: /../node_modules/tailwindcss [Error - 1:11:21 PM] Tailwind CSS: Cannot read property '700' of undefined TypeError: Cannot read property '700' of undefined at Object.<anonymous> (/Users/pep/Documents/projects/Vloor/Apps/vurnished-website/node_modules/@tailwindcss/typography/src/styles.js:949:38) at Module._compile (internal/modules/cjs/loader.js:1125:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1155:10) at Module.load (internal/modules/cjs/loader.js:982:32) at Module._load (internal/modules/cjs/loader.js:823:14) at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at Module.require (internal/modules/cjs/loader.js:1006:19) at Module.A._require.t.require (/Users/pep/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.2/dist/server/tailwindServer.js:56:287667) at require (internal/modules/cjs/helpers.js:88:18)
building my site fails. I am using Gatsby as a site builder

exactly what happened to us as well. A repo that was working yesterday stopped working today. We use a lock file so our lib version are locked, but the app still started to fail, which should not happen.

adamwathan · 2021-12-11T11:20:56Z

Remove the @tailwindcss/ui package, that is only needed if you are using Tailwind v1 and has been deprecated for over a year:

https://tailwindui.com/changes-for-v2#remove-tailwindcss-ui-then-update-tailwindcss

purplecandy · 2021-12-14T19:43:59Z

Facing the same issue with install typography plugin. I'm using an old version 2.x @tailwindcss/postcss7-compat it says it has support for 2.0 and I'm exactly sure what's causing it.

I have also tried upgrading it to @next and downgrading it to all above mentioned version but no luck.

Edit:

apparently these colors slate, zinc, neutral and stone are not present when importing from tailwind/colors

if you comment those colors configs it works without any issues

adamwathan · 2021-12-14T20:15:50Z

@tailwindcss/typography 0.5.0 is for v3 and up, if you are using v2 make sure you use @tailwindcss/typography@0.4.* 👍

woutercouvaras · 2021-12-15T09:10:05Z

Thanks Adam, using @tailwindcss/typography@0.4.1 sorted this issue out for me!

vesper8 · 2021-12-29T13:03:32Z

Removing "@tailwindcss/ui": "^0.7.2", did the trick for me

JunyaoC · 2022-01-25T18:58:46Z

@tailwindcss/typography 0.5.0 is for v3 and up, if you are using v2 make sure you use @tailwindcss/typography@0.4.* 👍

Works for me!

georgeraveen · 2023-08-01T09:44:05Z

@tailwindcss/typography 0.5.0 is for v3 and up, if you are using v2 make sure you use @tailwindcss/typography@0.4.* 👍

it worked for me

adamwathan closed this as completed Nov 21, 2021

sirvine mentioned this issue Dec 11, 2021

TypeError: Cannot read property '700' of undefined tailwindlabs/tailwindcss#6335

Closed

Cannot read property '700' of undefined #214

Cannot read property '700' of undefined #214

Comments

alexmanzo commented Oct 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What version of @tailwindcss/typography are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

Reproduction repository

Describe your issue

dhaig commented Nov 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexmanzo commented Nov 7, 2021

Uh oh!

chakerben commented Nov 10, 2021

Uh oh!

PeterPenz91 commented Nov 10, 2021

Uh oh!

atmonshi commented Nov 10, 2021

Uh oh!

itsfaqih commented Nov 11, 2021

Uh oh!

PeterPenz91 commented Nov 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chakerben commented Nov 12, 2021

Uh oh!

adamwathan commented Nov 21, 2021

Uh oh!

sureshjoshi commented Dec 9, 2021

Uh oh!

sureshjoshi commented Dec 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meri-leeworthy commented Dec 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pgarzina commented Dec 11, 2021

Uh oh!

adamwathan commented Dec 11, 2021

Uh oh!

purplecandy commented Dec 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamwathan commented Dec 14, 2021

Uh oh!

woutercouvaras commented Dec 15, 2021

Uh oh!

vesper8 commented Dec 29, 2021

Uh oh!

JunyaoC commented Jan 25, 2022

Uh oh!

georgeraveen commented Aug 1, 2023

Uh oh!

alexmanzo commented Oct 20, 2021 •

edited

Loading

dhaig commented Nov 4, 2021 •

edited

Loading

PeterPenz91 commented Nov 11, 2021 •

edited

Loading

sureshjoshi commented Dec 9, 2021 •

edited

Loading

meri-leeworthy commented Dec 10, 2021 •

edited

Loading

purplecandy commented Dec 14, 2021 •

edited

Loading