Skip to content

Cannot read property '700' of undefined #214

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

Closed
alexmanzo opened this issue Oct 20, 2021 · 20 comments
Closed

Cannot read property '700' of undefined #214

alexmanzo opened this issue Oct 20, 2021 · 20 comments

Comments

@alexmanzo
Copy link

alexmanzo commented Oct 20, 2021

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
@dhaig
Copy link

dhaig commented Nov 4, 2021

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
Copy link
Author

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
Copy link

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

@PeterPenz91
Copy link

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
Copy link

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

@itsfaqih
Copy link

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
Copy link

PeterPenz91 commented Nov 11, 2021

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
Copy link

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

@adamwathan
Copy link
Member

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

@sureshjoshi
Copy link

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
Copy link

sureshjoshi commented Dec 9, 2021

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
Copy link

meri-leeworthy commented Dec 10, 2021

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
Copy link

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
Copy link
Member

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
Copy link

purplecandy commented Dec 14, 2021

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
Copy link
Member

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

@woutercouvaras
Copy link

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

@vesper8
Copy link

vesper8 commented Dec 29, 2021

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

@JunyaoC
Copy link

JunyaoC commented Jan 25, 2022

@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
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests