qwikifiers / qwik-nx

Nx plugin for Qwik
133 stars 24 forks source link

Errors/Warnings after generating a brand new workspace/project #201

Closed brunos3d closed 1 year ago

brunos3d commented 1 year ago

Current Behavior

Got some issues after generating a brand new repo, below are the commands and the given outputs. I managed to fix the missing "key" warnings by adding the key props to where spread props had occurrences.

Expected Behavior

Run the standard example after creating a brand new project without errors/warnings

GitHub Repo

No response

Steps to Reproduce

  1. Run npx create-nx-workspace@latest --preset=qwik-nx
  2. Provide the workspace and project name to the given cli prompts
  3. Run cd <WORKSPACE NAME>
  4. Run nx serve <PROJECT NAME>

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 16.17.0
   OS     : linux-x64
   npm    : 9.8.1

   nx (global)        : 16.2.2
   nx                 : 16.8.1
   @nx/js             : 16.8.1
   @nx/linter         : 16.8.1
   @nx/workspace      : 16.8.1
   @nx/devkit         : 16.8.1
   @nx/eslint-plugin  : 16.8.1
   @nrwl/tao          : 16.8.1
   @nx/vite           : 16.8.1
   typescript         : 5.1.6
   ---------------------------------------
   Community plugins:
   qwik-nx : 1.0.10

Failure Logs

No response

Additional Information

Commands used and console outputs

bruno in examples on  feat/add-nx-qwik-workspace [?] 
❯ npx create-nx-workspace@latest --preset=qwik-nx

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Where would you like to create your workspace? · qwik-org
✔ Enable distributed caching to make your CI faster · No

 >  NX   Creating your v16.8.1 workspace.

   To make sure the command works reliably in all environments, and that the preset is applied correctly,
   Nx will run "npm install" several times. Please wait.

✔ Installing dependencies with npm
✔ Successfully created the workspace: qwik-org.
✔ App Name · qwik-app
✔ Which stylesheet format would you like to use? · css
Fetching prettier...

 >  NX   Directory is already under version control. Skipping initialization of git.

 >  NX   Successfully applied preset: qwik-nx

bruno in examples on  feat/add-nx-qwik-workspace [?] took 1m 39s 
❯ cd qwik-org 

bruno in examples/qwik-org on  feat/add-nx-qwik-workspace [?] 
❯ nx serve qwik-app                              

> nx run qwik-app:serve

  ➜  Local:   http://127.0.0.1:4200/
  ➜  Network: use --host to expose

  ❗️ Expect significant performance loss in development.
  ❗️ Disabling the browser's cache results in waterfall requests.
7:38:25 PM [vite] warning: Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/components/icons/qwik.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
  Plugin: vite-plugin-qwik
  File: /run/media/examples/qwik-org/apps/qwik-app/src/components/icons/qwik.tsx:undefined:undefined
7:38:25 PM [vite] warning: Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/entry.ssr.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
  Plugin: vite-plugin-qwik
  File: /run/media/examples/qwik-org/apps/qwik-app/src/entry.ssr.tsx:undefined:undefined
7:38:25 PM [vite] warning: Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/root.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
  Plugin: vite-plugin-qwik
  File: /run/media/examples/qwik-org/apps/qwik-app/src/root.tsx:undefined:undefined
7:38:25 PM [vite] warning: Missing "key" prop for element in iterator
  Plugin: vite-plugin-qwik
  File: /run/media/examples/qwik-org/apps/qwik-app/src/components/router-head/router-head.tsx:20:9
  18 |  
  19 |        {head.meta.map((m) => (
  20 |          <meta {...m} />
     |           ^
  21 |        ))}
  22 |  
7:38:25 PM [vite] warning: Missing "key" prop for element in iterator
  Plugin: vite-plugin-qwik
  File: /run/media/examples/qwik-org/apps/qwik-app/src/components/router-head/router-head.tsx:24:9
  22 |  
  23 |        {head.links.map((l) => (
  24 |          <link {...l} />
     |           ^
  25 |        ))}
  26 |  
7:38:25 PM [vite] warning: Missing "key" prop for element in iterator
  Plugin: vite-plugin-qwik
  File: /run/media/examples/qwik-org/apps/qwik-app/src/components/router-head/router-head.tsx:28:9
  26 |  
  27 |        {head.styles.map((s) => (
  28 |          <style {...s.props} dangerouslySetInnerHTML={s.style} />
     |           ^
  29 |        ))}
  30 |      </>
dmitry-stepanenko commented 1 year ago

Thanks Bruno! Since the recent update of qwik it is now required to set tsconfigFileNames: ["tsconfig.app.json"] in the vite.config.ts, as by default it is resolved to tsconfig.json.

I've created a PR that should handle it in new apps and added a migration for existing apps