Mike Posts - Answer Overflow

Mike

•Created by Mike on 10/15/2024 in #❓・help

Using type aware `typescript-eslint` rules with nuxt eslint module

I'm trying to use the rule @typescript-eslint/no-unnecessary-condition. However when I add it to my eslint config, i get this error:

Oops! Something went wrong! :(

ESLint: 9.11.1

Error: Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: (unknown)
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

Oops! Something went wrong! :(

ESLint: 9.11.1

Error: Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: (unknown)
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

My eslint config looks like this:

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt().append({
  rules: {
    "vue/multi-word-component-names": "off",
    "vue/html-self-closing": "off", // Prettier handles this
    "prefer-template": "error",
    "vue/prefer-template": "error",
    "vue/require-typed-ref": "error", // like noImplicitAny but for refs
    "vue/prefer-true-attribute-shorthand": "error",
    "@typescript-eslint/no-unnecessary-condition": "error",
    "vue/v-bind-style": [
      "error",
      "shorthand",
      {
        sameNameShorthand: "always",
      },
    ],
  },
})

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt().append({
  rules: {
    "vue/multi-word-component-names": "off",
    "vue/html-self-closing": "off", // Prettier handles this
    "prefer-template": "error",
    "vue/prefer-template": "error",
    "vue/require-typed-ref": "error", // like noImplicitAny but for refs
    "vue/prefer-true-attribute-shorthand": "error",
    "@typescript-eslint/no-unnecessary-condition": "error",
    "vue/v-bind-style": [
      "error",
      "shorthand",
      {
        sameNameShorthand: "always",
      },
    ],
  },
})

I have tried prepending parserOptions like this:

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt()
.prepend({
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
})
  .append({
    // same as before
  })

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt()
.prepend({
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
})
  .append({
    // same as before
  })

So basically: How do I forward parserOptions to typescript-eslint/parser?

1 replies

NNuxt

•Created by Mike on 8/29/2024 in #❓・help

How do I find origin of node module warnings?

Hello! When I start my app I get 4 console errors like this:

 ERROR  (node:8460) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

 ERROR  (node:8460) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

I've set "type": "module" in my package.json so I suspect this warning is coming from a dependency. However I don't know how to find which dependency. Is there a better way than removing dependencies one by one to find the culprit? I've tried running the app with NODE_OPTIONS='--trace-warnings' pnpm dev but this doesn't make a difference

3 replies

NNuxt

•Created by Mike on 8/2/2024 in #❓・help

Typing a custom `useFetch` to include null

18 replies

NNuxt

•Created by Mike on 7/11/2024 in #❓・help

Adding a watcher inside `useAsyncData`

Hi. I've wrapped useAsyncData in order to add some error handling:

  async function myAsyncData<T>(...args: AsyncArgs<T>) {
    const { error, ...rest } = await useAsyncData<T>(...args);
    return { error: computed(() => humanReadableError(error)), ...rest };
  }

  async function myAsyncData<T>(...args: AsyncArgs<T>) {
    const { error, ...rest } = await useAsyncData<T>(...args);
    return { error: computed(() => humanReadableError(error)), ...rest };
  }

However now I want to submit an error to sentry in case of errors. If I use error.value inside myAsyncData, i'll lose reactivity so I don't want to do that. However I can add a watcher on error and that seems to work:

  async function myAsyncData<T>(...args: AsyncArgs<T>) {
    const { error, ...rest } = await useAsyncData<T>(...args);
    watch(error, () => {
      console.error(error);
      // Error reporting here
    });
    return { error: computed(() => humanReadableError(error)), ...rest };
  }

  async function myAsyncData<T>(...args: AsyncArgs<T>) {
    const { error, ...rest } = await useAsyncData<T>(...args);
    watch(error, () => {
      console.error(error);
      // Error reporting here
    });
    return { error: computed(() => humanReadableError(error)), ...rest };
  }

However something about this approach seems wrong to me. Is using a watcher like this bad practice? If not, do I need to manually unsubscribe the watcher on unMount? Is there a better way to do this?

3 replies

NNuxt

•Created by Mike on 7/9/2024 in #❓・help

Using multiple workers causes project to be repeatably built despite using `server:true`

I am using Playwright and nuxt test utils. My playwright config looks like this:

/** Taken (but modified) from https://github.com/nuxt/test-utils/blob/main/examples/app-playwright/playwright.config.ts */
import { fileURLToPath } from "node:url"
import { defineConfig, devices } from "@playwright/test"
import type { ConfigOptions } from "@nuxt/test-utils/playwright"

const devicesToTest = ["Desktop Chrome"] satisfies Array<
  string | (typeof devices)[string]
>

/* See https://playwright.dev/docs/test-configuration. */
export default defineConfig<ConfigOptions>({
  testDir: "./tests",
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  workers: 1,
  retries: 0,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: "html",
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
    /* Nuxt configuration options */
    nuxt: {
      rootDir: fileURLToPath(new URL(".", import.meta.url)),
      server: true,
      browser: true,
      /* Don't conflict with dev server on 3001 */
      port: 4001,
    },
  },
  projects: devicesToTest.map((p) =>
    typeof p === "string" ? { name: p, use: devices[p] } : p,
  ),
})

/** Taken (but modified) from https://github.com/nuxt/test-utils/blob/main/examples/app-playwright/playwright.config.ts */
import { fileURLToPath } from "node:url"
import { defineConfig, devices } from "@playwright/test"
import type { ConfigOptions } from "@nuxt/test-utils/playwright"

const devicesToTest = ["Desktop Chrome"] satisfies Array<
  string | (typeof devices)[string]
>

/* See https://playwright.dev/docs/test-configuration. */
export default defineConfig<ConfigOptions>({
  testDir: "./tests",
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  workers: 1,
  retries: 0,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: "html",
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
    /* Nuxt configuration options */
    nuxt: {
      rootDir: fileURLToPath(new URL(".", import.meta.url)),
      server: true,
      browser: true,
      /* Don't conflict with dev server on 3001 */
      port: 4001,
    },
  },
  projects: devicesToTest.map((p) =>
    typeof p === "string" ? { name: p, use: devices[p] } : p,
  ),
})

I've set server: true to reuse the same server. However if i set workers > 1, the project is rebuilt and a new dev server is started in each worker. This causes an issue, since port 4001 is already in use after the first worker has been started. Thus the tests fail when using multiple workers. Also it just seems wasteful to rebuild the whole project in each worker. Is this expected behaviour? If so is there a way i can reuse the build and dev server on all workers? If not, should I create an issue?

2 replies

Gaming

Programming