[BUG]: use-funnel peer dependence not found module 이슈

[KIMSEUNGGYU]

Package Scope

Package name: @toss/use-funnel

Describe the bug

nextjs 가 아닌 react 기반 환경에서도 에러가 발생함.
nextjs v14+ 부터 app dir 로 전환되기 때문에 router 제대로 사용하지 못함

• react18 , vite4, @toss/[email protected] 을 사용하는 codesandbox 환경에서 depence 파일을 못 불러오는 이슈

• https://codesandbox.io/p/sandbox/festive-kilby-swmh75

에러 로그

✘ [ERROR] Could not resolve "next/router"

    node_modules/@toss/use-funnel/esm/useFunnel.mjs:7:26:
      7 │ import { useRouter } from 'next/router';
        ╵                           ~~~~~~~~~~~~~

  You can mark the path "next/router" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "react-query"

    node_modules/@toss/use-funnel/esm/useFunnel.mjs:9:25:
      9 │ import { useQuery } from 'react-query';
        ╵                          ~~~~~~~~~~~~~

  You can mark the path "react-query" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "next/router"

    node_modules/@toss/use-query-param/esm/hooks/useNextRouter.mjs:1:26:
      1 │ import { useRouter } from 'next/router';
        ╵                           ~~~~~~~~~~~~~

  You can mark the path "next/router" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "next/router"

    node_modules/@toss/use-query-param/esm/utils/waitForRouterReady.mjs:1:19:
      1 │ import Router from 'next/router';
        ╵                    ~~~~~~~~~~~~~

  You can mark the path "next/router" as external to exclude it from the bundle, which will remove
  this error.

/workspaces/workspace/node_modules/esbuild/lib/main.js:1639
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 4 errors:
node_modules/@toss/use-funnel/esm/useFunnel.mjs:7:26: ERROR: Could not resolve "next/router"
node_modules/@toss/use-funnel/esm/useFunnel.mjs:9:25: ERROR: Could not resolve "react-query"
node_modules/@toss/use-query-param/esm/hooks/useNextRouter.mjs:1:26: ERROR: Could not resolve "next/router"
node_modules/@toss/use-query-param/esm/utils/waitForRouterReady.mjs:1:19: ERROR: Could not resolve "next/router"
    at failureErrorWithLog (/workspaces/workspace/node_modules/esbuild/lib/main.js:1639:15)
    at /workspaces/workspace/node_modules/esbuild/lib/main.js:1051:25
    at /workspaces/workspace/node_modules/esbuild/lib/main.js:1515:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 26,
        file: 'node_modules/@toss/use-funnel/esm/useFunnel.mjs',
        length: 13,
        line: 7,
        lineText: "import { useRouter } from 'next/router';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "next/router" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "next/router"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 25,
        file: 'node_modules/@toss/use-funnel/esm/useFunnel.mjs',
        length: 13,
        line: 9,
        lineText: "import { useQuery } from 'react-query';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "react-query" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "react-query"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 26,
        file: 'node_modules/@toss/use-query-param/esm/hooks/useNextRouter.mjs',
        length: 13,
        line: 1,
        lineText: "import { useRouter } from 'next/router';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "next/router" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "next/router"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 19,
        file: 'node_modules/@toss/use-query-param/esm/utils/waitForRouterReady.mjs',
        length: 13,
        line: 1,
        lineText: "import Router from 'next/router';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "next/router" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "next/router"'
    }
  ],
  warnings: []
}

Expected behavior

To Reproduce

Possible Solution

문제 분석

• package-lock을 확인하니 "next": "^11.1 || ^12 || ^13", 구문으로 인해 최신 ^13 이 install 됩니다.
  next13 app dir 버전에서 router 부분이 변경되어 발생된 이슈로 보입니다.

• 설치된 next 를 보니 [email protected] 으로 설치된 것으로 확인되었습니다.

제안

• next app dir router 로 마이그레이션 또는 nextjs 버전을 지정!
  => nextjs 가 아닌 react 기반 환경에서도 에러가 발생함

Additional context

[BasixKOR]

use-funnel은 Next.js 전용 디펜던시로, Next 외 환경에서 사용은 지원되지 않습니다.

Since use-funnel is expected to be used with Next.js, I'm closing this issue as invalid.