Lint errors after creating new project (with-tailwind)

[joggienl]

Summary

Hello!

Setting up a new turbo repo project I am noticing that linting and building does not work as expected. I might be doing something wrong, not sure at this point.

For example some steps:

pnpm dlx create-turbo@latest -m pnpm -e with-tailwind some-turbo-project

cd some-turbo-project

turbo lint

this is the result of the failing turbo lint

turbo lint
• Packages in scope: @repo/eslint-config, @repo/tailwind-config, @repo/typescript-config, @repo/ui, docs, web
• Running lint in 6 packages
• Remote caching disabled
web:lint: cache miss, executing 165c8fd918a6d0fe
docs:lint: cache miss, executing ff38304022a3ad53
@repo/ui:lint: cache miss, executing 9cbfa2c1b06fd5f4
@repo/ui:lint:
docs:lint:
docs:lint: > [email protected] lint /the/path/to/some-turbo-project/apps/docs
docs:lint: > next lint
docs:lint:
@repo/ui:lint: > @repo/[email protected] lint /the/path/to/some-turbo-project/packages/ui
@repo/ui:lint: > eslint src/
@repo/ui:lint:
web:lint:
web:lint: > [email protected] lint /the/path/to/some-turbo-project/apps/web
web:lint: > next lint
web:lint:
@repo/ui:lint: =============
@repo/ui:lint:
@repo/ui:lint: WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
@repo/ui:lint:
@repo/ui:lint: You may find that it works just fine, or you may not.
@repo/ui:lint:
@repo/ui:lint: SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.3.0
@repo/ui:lint:
@repo/ui:lint: YOUR TYPESCRIPT VERSION: 5.3.3
@repo/ui:lint:
@repo/ui:lint: Please only submit bug reports when using the officially supported version.
@repo/ui:lint:
@repo/ui:lint: =============
web:lint: =============
web:lint:
web:lint: WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
web:lint:
web:lint: You may find that it works just fine, or you may not.
web:lint:
web:lint: SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.3.0
web:lint:
web:lint: YOUR TYPESCRIPT VERSION: 5.3.3
web:lint:
web:lint: Please only submit bug reports when using the officially supported version.
web:lint:
web:lint: =============
docs:lint: =============
docs:lint:
docs:lint: WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
docs:lint:
docs:lint: You may find that it works just fine, or you may not.
docs:lint:
docs:lint: SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.3.0
docs:lint:
docs:lint: YOUR TYPESCRIPT VERSION: 5.3.3
docs:lint:
docs:lint: Please only submit bug reports when using the officially supported version.
docs:lint:
docs:lint: =============
docs:lint:
docs:lint: ./src/app/layout.tsx
docs:lint: 2:8  Error: Unable to resolve path to module '@repo/ui/styles.css'.  import/no-unresolved
docs:lint:
docs:lint: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
web:lint:
web:lint: ./src/app/layout.tsx
web:lint: 2:8  Error: Unable to resolve path to module '@repo/ui/styles.css'.  import/no-unresolved
web:lint:
web:lint: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
docs:lint:  ELIFECYCLE  Command failed with exit code 1.
docs:lint: ERROR: command finished with error: command (/the/path/to/some-turbo-project/apps/docs) /opt/homebrew/bin/pnpm run lint exited (1)
web:lint:  ELIFECYCLE  Command failed with exit code 1.
docs#lint: command (/the/path/to/some-turbo-project/apps/docs) /opt/homebrew/bin/pnpm run lint exited (1)

 Tasks:    1 successful, 3 total
Cached:    0 cached, 3 total
  Time:    5.121s
Failed:    docs#lint

 ERROR  run failed: command  exited (1)

Initially, the turbo lint error (2:8 Error: Unable to resolve path to module '@repo/ui/styles.css') can be "fixed" by running turbo build.

But if you upgrade the versions of the packages, all except eslint because of the flat config, this does not even work anymore. I have tried this to select an upgrade interactively for all packages in the monorepo via npm-check-updates.

ncu -i --root -ws

this is the result

Using pnpm
Upgrading /the/path/to/some-turbo-project/package.json
[====================] 4/4 100%

✔ Choose which packages to update ›

 prettier-plugin-tailwindcss  ^0.5.11  →  ^0.5.14
Upgrading /the/path/to/some-turbo-project/apps/docs/package.json
[====================] 11/11 100%

✔ Choose which packages to update ›

 @next/eslint-plugin-next    ^14.1.1  →   ^14.2.2
 @types/node               ^20.11.24  →  ^20.12.7
 @types/react               ^18.2.61  →  ^18.2.79
 @types/react-dom           ^18.2.19  →  ^18.2.25
 autoprefixer               ^10.4.18  →  ^10.4.19
 next                        ^14.1.1  →   ^14.2.2
 postcss                     ^8.4.35  →   ^8.4.38
 tailwindcss                  ^3.4.1  →    ^3.4.3
 typescript                   ^5.3.3  →    ^5.4.5
Upgrading /the/path/to/some-turbo-project/apps/web/package.json
[====================] 11/11 100%

✔ Choose which packages to update ›

 @next/eslint-plugin-next    ^14.1.1  →   ^14.2.2
 @types/node               ^20.11.24  →  ^20.12.7
 @types/react               ^18.2.61  →  ^18.2.79
 @types/react-dom           ^18.2.19  →  ^18.2.25
 autoprefixer               ^10.4.18  →  ^10.4.19
 next                        ^14.1.1  →   ^14.2.2
 postcss                     ^8.4.35  →   ^8.4.38
 tailwindcss                  ^3.4.1  →    ^3.4.3
 typescript                   ^5.3.3  →    ^5.4.5
Upgrading /the/path/to/some-turbo-project/packages/config-eslint/package.json
[--------------------] 0/2 0%
[====================] 2/2 100%

✔ Choose which packages to update ›

 @vercel/style-guide   ^5.2.0  →   ^6.0.0
 eslint-config-turbo  ^1.12.4  →  ^1.13.2
Upgrading /the/path/to/some-turbo-project/packages/config-tailwind/package.json
[====================] 1/1 100%

✔ Choose which packages to update ›

 tailwindcss  ^3.4.1  →  ^3.4.3
Upgrading /the/path/to/some-turbo-project/packages/config-typescript/package.json

No dependencies.
Upgrading /the/path/to/some-turbo-project/packages/ui/package.json
[====================] 6/6 100%

✔ Choose which packages to update ›

 @types/react  ^18.2.61  →  ^18.2.79
 autoprefixer  ^10.4.18  →  ^10.4.19
 postcss        ^8.4.35  →   ^8.4.38
 tailwindcss     ^3.4.1  →    ^3.4.3
 typescript      ^5.3.3  →    ^5.4.5

✔ Run pnpm install to install new versions? … yes
Installing dependencies...
 WARN  This project is configured to use v8.9.0 of pnpm. Your current pnpm is v9.0.4
Scope: all 7 workspace projects
Progress: resolved 0, reused 1, downloaded 0, added 0
Progress: resolved 201, reused 188, downloaded 0, added 0
Progress: resolved 403, reused 390, downloaded 0, added 0
Progress: resolved 525, reused 512, downloaded 0, added 0
Progress: resolved 528, reused 515, downloaded 0, added 0
Packages: +117 -96
+++++++++++++++++++++++++++++++++++++++++++-------------------------------------
Progress: resolved 534, reused 521, downloaded 0, added 18
Progress: resolved 534, reused 521, downloaded 0, added 116
Progress: resolved 534, reused 521, downloaded 0, added 117, done

devDependencies:
- prettier-plugin-tailwindcss 0.5.11
+ prettier-plugin-tailwindcss 0.5.14

Done in 6.8s

Consequently running turbo build now also fails.

see the details

turbo build
• Packages in scope: @repo/eslint-config, @repo/tailwind-config, @repo/typescript-config, @repo/ui, docs, web
• Running build in 6 packages
• Remote caching disabled
@repo/ui:build: cache miss, executing dce495fa6e76a75f
@repo/ui:build:
@repo/ui:build: > @repo/[email protected] build /the/path/to/some-turbo-project/packages/ui
@repo/ui:build: > tailwindcss -i ./src/styles.css -o ./dist/index.css
@repo/ui:build:
@repo/ui:build:
@repo/ui:build: Rebuilding...
@repo/ui:build:
@repo/ui:build: Done in 101ms.
web:build: cache miss, executing fd6ff53e55c73625
docs:build: cache miss, executing f054ab2fd3cc2047
docs:build:
docs:build: > [email protected] build /the/path/to/some-turbo-project/apps/docs
docs:build: > next build
docs:build:
web:build:
web:build: > [email protected] build /the/path/to/some-turbo-project/apps/web
web:build: > next build
web:build:
docs:build:   ▲ Next.js 14.2.2
docs:build:
web:build:   ▲ Next.js 14.2.2
web:build:
docs:build:    Creating an optimized production build ...
web:build:    Creating an optimized production build ...
web:build:  ✓ Compiled successfully
docs:build:  ✓ Compiled successfully

web:build: Failed to compile.

web:build: ./src/app/layout.tsx
web:build: 2:8  Error: Unable to resolve path to module '@repo/ui/styles.css'.  import/no-unresolved
web:build:
web:build: ./src/app/page.tsx
web:build: 17:43  Error: Invalid type "string | undefined" of template literal expression.  @typescript-eslint/restrict-template-expressions
web:build:
web:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
web:build:    Linting and checking validity of types  . ELIFECYCLE  Command failed with exit code 1.
web:build: ERROR: command finished with error: command (/the/path/to/some-turbo-project/apps/web) /opt/homebrew/bin/pnpm run build exited (1)
   Linting and checking validity of types  .
web#build: command (/the/path/to/some-turbo-project/apps/web) /opt/homebrew/bin/pnpm run build exited (1)

 Tasks:    1 successful, 3 total
Cached:    0 cached, 3 total
  Time:    10.807s
Failed:    web#build

 ERROR  run failed: command  exited (1)

Interestingly, besides the module not found error, there is also a new error to be seen on the apps/web package, but not on the apps/doc (same code, different error).

web:build: ./src/app/page.tsx
web:build: 17:43  Error: Invalid type "string | undefined" of template literal expression.  @typescript-eslint/restrict-template-expressions

I also tried the canary version via pnpm dlx create-turbo@canary -m pnpm -e with-tailwind some-turbo-project but that gives me the same kind of errors.

I might be doing something wrong that is why I try this via discussion before opening an issue.

Running on a Mac, node@20 and [email protected] (today).

Thanks!

Additional information

No response

Example

No response