blitz install tailwind fails with TSError: ⨯ Unable to compile TypeScript

[zayenz]

What is the problem?

In a new blitz project with default options using yarn, the recipe for installing Tailwind fails with a TSError: ⨯ Unable to compile TypeScript error.

Potentially relevant is that I use yarn managed by Volta. See full details below.

Paste all your error logs here:

$ blitz install tailwind
    TSError: ⨯ Unable to compile TypeScript:
    .blitz/recipe-install/index.ts:43:33 - error TS2345: Argument of type 'import("/Users/zayenz/timoptim/tmp/tailwind-recipe-test/.blitz/recipe-install/node_modules/@types/jscodeshift/node_modules/ast-types/gen/namedTypes").namedTypes.ImportDeclaration' is not assignable to 
    parameter of type 'import("/Users/zayenz/timoptim/tmp/tailwind-recipe-test/.blitz/recipe-install/node_modules/ast-types/gen/nodes").ImportDeclaration'.
      Types of property 'specifiers' are incompatible.
        Type '(ImportSpecifier | ImportNamespaceSpecifier | ImportDefaultSpecifier)[] | undefined' is not assignable to type '(ImportSpecifier | ImportNamespaceSpecifier | ImportDefaultSpecifier)[]'.
          Type 'undefined' is not assignable to type '(ImportSpecifier | ImportNamespaceSpecifier | ImportDefaultSpecifier)[]'.

    43       return addImport(program, stylesImport)

Paste all relevant code snippets here:

$ blitz new tailwind-recipe-test
$ cd tailwind-recipe-test/
$ blitz install tailwind

What are detailed steps to reproduce this?

1. Create a new Blitz project
2. Install tailwind using blitz install tailwind

Run blitz -v and paste the output here:

$ blitz -v
macOS Big Sur | darwin-x64 | Node: v14.15.1

blitz: 0.42.4 (global)
blitz: 0.42.4 (local)

  Package manager: yarn 
  System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 35.63 MB / 16.00 GB
    Shell: 5.1.4 - /usr/local/bin/bash
  Binaries:
    Node: 14.15.1 - ~/.volta/tools/image/node/14.15.1/bin/node
    Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
    npm: 6.14.9 - ~/.volta/tools/image/npm/6.14.9/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.x => 3.4.2 
    blitz: 0.42.4 => 0.42.4 
    prisma: 3.x => 3.4.2 
    react: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    react-dom: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    typescript: ~4.4 => 4.4.4 

Please include below any other applicable logs and screenshots that show your problem:

A full log of the steps taken is shown below

$ blitz new tailwind-recipe-test
✔ You have the latest Blitz version
✔ Pick a new project's language · TypeScript
✔ Pick your new app template · full
✔ Install dependencies? · yarn
✔ Pick a form library (you can switch to something else later if you want) · React Final Form

Hang tight while we set up your new Blitz app!

CREATE    .env
CREATE    .env.local
CREATE    .env.test.local
CREATE    .eslintrc.js
CREATE    README.md
CREATE    app/auth/components/LoginForm.tsx
CREATE    app/auth/components/SignupForm.tsx
CREATE    app/auth/mutations/changePassword.ts
CREATE    app/auth/mutations/forgotPassword.test.ts
CREATE    app/auth/mutations/forgotPassword.ts
CREATE    app/auth/mutations/login.ts
CREATE    app/auth/mutations/logout.ts
CREATE    app/auth/mutations/resetPassword.test.ts
CREATE    app/auth/mutations/resetPassword.ts
CREATE    app/auth/mutations/signup.ts
CREATE    app/auth/pages/forgot-password.tsx
CREATE    app/auth/pages/login.tsx
CREATE    app/auth/pages/reset-password.tsx
CREATE    app/auth/pages/signup.tsx
CREATE    app/auth/validations.ts
CREATE    app/core/components/Form.tsx
CREATE    app/core/components/LabeledTextField.tsx
CREATE    app/core/hooks/useCurrentUser.ts
CREATE    app/core/layouts/Layout.tsx
CREATE    app/pages/404.tsx
CREATE    app/pages/_app.tsx
CREATE    app/pages/_document.tsx
CREATE    app/pages/index.test.tsx
CREATE    app/pages/index.tsx
CREATE    app/users/queries/getCurrentUser.ts
CREATE    babel.config.js
CREATE    blitz-env.d.ts
CREATE    blitz.config.ts
CREATE    db/index.ts
CREATE    db/schema.prisma
CREATE    db/seeds.ts
CREATE    jest.config.ts
CREATE    mailers/forgotPasswordMailer.ts
CREATE    package.json
CREATE    public/favicon.ico
CREATE    public/logo.png
CREATE    test/setup.ts
CREATE    test/utils.tsx
CREATE    tsconfig.json
CREATE    types.ts

⚠️  Failed to fetch latest version of 'zod', falling back to '3.x'.
⚠️  Failed to fetch latest version of 'prisma', falling back to '3.x'.
⚠️  Failed to fetch latest version of '@prisma/client', falling back to '3.x'.
✔ Retrieving the freshest of dependencies
✔ Resolving packages
✔ Fetching packages
✔ Linking dependencies
✔ Building fresh packages
✔ Initializing SQLite database
✔ Committing your app

Your new Blitz app is ready! Next steps:

   1. cd tailwind-recipe-test
   2. blitz dev

$ cd tailwind-recipe-test/
$ blitz install tailwind
    TSError: ⨯ Unable to compile TypeScript:
    .blitz/recipe-install/index.ts:43:33 - error TS2345: Argument of type 'import("/Users/zayenz/timoptim/tmp/tailwind-recipe-test/.blitz/recipe-install/node_modules/@types/jscodeshift/node_modules/ast-types/gen/namedTypes").namedTypes.ImportDeclaration' is not assignable to 
    parameter of type 'import("/Users/zayenz/timoptim/tmp/tailwind-recipe-test/.blitz/recipe-install/node_modules/ast-types/gen/nodes").ImportDeclaration'.
      Types of property 'specifiers' are incompatible.
        Type '(ImportSpecifier | ImportNamespaceSpecifier | ImportDefaultSpecifier)[] | undefined' is not assignable to type '(ImportSpecifier | ImportNamespaceSpecifier | ImportDefaultSpecifier)[]'.
          Type 'undefined' is not assignable to type '(ImportSpecifier | ImportNamespaceSpecifier | ImportDefaultSpecifier)[]'.

    43       return addImport(program, stylesImport)
                                       ~~~~~~~~~~~~

[beerose]

Fixed via blitz-js/blitz#2952. We'll do a release soon!