tailwindlabs / tailwindui-issues

A place to report bugs discovered in Tailwind UI.
236 stars 4 forks source link

Protocol - build type error #1512

Closed Mazowiecki closed 1 year ago

Mazowiecki commented 1 year ago

https://tailwindui.com/templates/protocol I don't really know where I should create issues for templates.

After the initial download project can't build because of a type error in /mdx-components.tsx

Please add @types/mdx package to package.json. This resolves this bug

RobinMalfait commented 1 year ago

Hey!

I just downloaded a fresh copy of protocol, and ran npm install and npm run build in both the protocol-js and protocol-ts directories:

protocol-js:

❯ npm install

added 624 packages, and audited 625 packages in 21s

250 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.
❯ npm run build

> tailwindui-protocol@0.1.0 build
> next build

- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
- info Generating static pages (16/16)
- info Finalizing page optimization

Route (app)                                Size     First Load JS
┌ ○ /                                      2.41 kB         135 kB
├ ○ /_not-found                            0 B                0 B
├ ○ /attachments                           226 B           101 kB
├ ○ /authentication                        226 B           101 kB
├ ○ /contacts                              226 B           101 kB
├ ○ /conversations                         226 B           101 kB
├ ○ /errors                                226 B           101 kB
├ ○ /favicon.ico                           0 B                0 B
├ ○ /groups                                226 B           101 kB
├ ○ /messages                              226 B           101 kB
├ ○ /pagination                            224 B           101 kB
├ ○ /quickstart                            226 B           101 kB
├ ○ /sdks                                  392 B           106 kB
└ ○ /webhooks                              227 B           101 kB
+ First Load JS shared by all              84.2 kB
  ├ chunks/596-f5252376bb02fb7b.js         26 kB
  ├ chunks/685-00eaf189776e499f.js         5.77 kB
  ├ chunks/fd9d1056-0462299d818c8abc.js    50.5 kB
  ├ chunks/main-app-7117ceec1b3f524c.js    218 B
  └ chunks/webpack-20d51ebe8717ae16.js     1.81 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          75.9 kB
+ First Load JS shared by all              75.7 kB
  ├ chunks/framework-8883d1e9be70c3da.js   45.1 kB
  ├ chunks/main-06dd9ab33e806ed7.js        28.6 kB
  ├ chunks/pages/_app-52924524f99094ab.js  195 B
  └ chunks/webpack-20d51ebe8717ae16.js     1.81 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

protocol-ts:

❯ npm install

added 626 packages, and audited 627 packages in 5s

250 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.
❯ npm run build

> tailwindui-protocol@0.1.0 build
> next build

- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
- info Generating static pages (16/16)
- info Finalizing page optimization

Route (app)                                Size     First Load JS
┌ ○ /                                      2.41 kB         135 kB
├ ○ /_not-found                            0 B                0 B
├ ○ /attachments                           226 B           101 kB
├ ○ /authentication                        226 B           101 kB
├ ○ /contacts                              227 B           101 kB
├ ○ /conversations                         227 B           101 kB
├ ○ /errors                                227 B           101 kB
├ ○ /favicon.ico                           0 B                0 B
├ ○ /groups                                227 B           101 kB
├ ○ /messages                              227 B           101 kB
├ ○ /pagination                            227 B           101 kB
├ ○ /quickstart                            226 B           101 kB
├ ○ /sdks                                  391 B           106 kB
└ ○ /webhooks                              227 B           101 kB
+ First Load JS shared by all              84.2 kB
  ├ chunks/596-f5252376bb02fb7b.js         26 kB
  ├ chunks/685-00eaf189776e499f.js         5.77 kB
  ├ chunks/fd9d1056-0462299d818c8abc.js    50.5 kB
  ├ chunks/main-app-705254c9965f1cb6.js    217 B
  └ chunks/webpack-0d5db1c3f83d3736.js     1.81 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          75.9 kB
+ First Load JS shared by all              75.7 kB
  ├ chunks/framework-8883d1e9be70c3da.js   45.1 kB
  ├ chunks/main-06dd9ab33e806ed7.js        28.6 kB
  ├ chunks/pages/_app-52924524f99094ab.js  195 B
  └ chunks/webpack-0d5db1c3f83d3736.js     1.81 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

Running tsc --noEmit to do type checking in the protocol-ts folder results in no errors:

❯ tsc --noEmit

We also use @next/mdx which comes with its own types already so that shouldn't be the problem.

Some questions for you:

Thanks!

Mazowiecki commented 1 year ago

I have used pnpm. Maby this is the problem

RobinMalfait commented 1 year ago

Hey!

I can reproduce this with pnpm, I have published a fix which you can download here: https://tailwindui.com/templates/protocol

Or you can apply the fix yourself by running:

pnpm add @types/mdx

Next time you run pnpm build it should work as expected:

❯ pnpm build

> tailwindui-protocol@0.1.0 build /Users/robin/Downloads/tailwindui-protocol/protocol-ts
> next build

- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
- info Generating static pages (16/16)
- info Finalizing page optimization

Route (app)                                Size     First Load JS
┌ ○ /                                      2.41 kB         135 kB
├ ○ /_not-found                            0 B                0 B
├ ○ /attachments                           225 B           101 kB
├ ○ /authentication                        225 B           101 kB
├ ○ /contacts                              225 B           101 kB
├ ○ /conversations                         225 B           101 kB
├ ○ /errors                                226 B           101 kB
├ ○ /favicon.ico                           0 B                0 B
├ ○ /groups                                225 B           101 kB
├ ○ /messages                              225 B           101 kB
├ ○ /pagination                            225 B           101 kB
├ ○ /quickstart                            226 B           101 kB
├ ○ /sdks                                  388 B           106 kB
└ ○ /webhooks                              225 B           101 kB
+ First Load JS shared by all              84.2 kB
  ├ chunks/229-d80f3dc7133068ab.js         5.76 kB
  ├ chunks/567a805a-72dc512b07f4bcfc.js    50.5 kB
  ├ chunks/694-58163ab95b7c2f4b.js         26 kB
  ├ chunks/main-app-0131785b0bf10473.js    220 B
  └ chunks/webpack-33bef516eeece42f.js     1.81 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          75.9 kB
+ First Load JS shared by all              75.7 kB
  ├ chunks/framework-510ec8ffd65e1d01.js   45.1 kB
  ├ chunks/main-1fd882ef505da22a.js        28.6 kB
  ├ chunks/pages/_app-9712f2f23a2ca5b3.js  195 B
  └ chunks/webpack-33bef516eeece42f.js     1.81 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

Thanks!

Mazowiecki commented 1 year ago

Thanks :)