Bug: all type imports not explicitly defined. moduleResolution setting required to import all types

[sambacha]

moduleResolution NodeNext only allows defined import paths

moduleResolution: NodeNext

only allows defined import paths

When setting moduleResolution in tsconfig.json to NodeNext. When this is enabled, the module resolution will only allow importing from paths that are defined within the exports config. Because only types/index.d.ts is available for import, it can cause these kinds of embedded imports to fail:

'use client';
import { Analytics } from '@vercel/analytics/react';

'use client';
import { Analytics } from '@vercel/analytics/react';

export function AnalyticsWrapper() {
  return <Analytics />;
}

VSCode

Solution

Document this tsconfig requirement. An alternative would be to ensure that all types are exported from the types/index.d.ts file.

[tobiaslins]

Hey @sambacha!

Can you please provide us a reproducible example? Or this this resolve already with our latest versions?

Thanks!

[mgallegoavi]

it happened to me with the latest version.

I just installed it with this command yarn add @vercel/analytics and is throwing me this error.

[tobiaslins]

Any special tsconfig/eslint config that you're using? https://stackblitz.com/edit/nextjs-nm6mbd?file=app%2Flayout.tsx

Would be nice to get a reproductive example before we ship this: 9499b91

[mgallegoavi]

tscofing.
{ "compilerOptions": { "sourceMap": true, "inlineSources": true, "sourceRoot": "/", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "baseUrl": ".", "paths": { "@/components/*": ["components/*"], "@/hooks/*": ["hooks/*"], "@/pages/*": ["pages/*"], "@/constants/*": ["constants/*"], "@/@types/*": ["@types/*"], "@/helper/*": ["helper/*"], "@/context/*": ["context/*"] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", "__tests__/NavBar.test.jsx", "pages/api/auth/[...nextauth].js", "__tests__/userData.test.jsx" ], "exclude": ["node_modules"] }

[mgallegoavi]

slint config
{ "plugins": ["@typescript-eslint", "prettier"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:import/recommended", "plugin:import/typescript", "plugin:cypress/recommended", "plugin:prettier/recommended", "next/core-web-vitals", "airbnb", "next", "prettier" ], "env": { "browser": true, "node": true, "jest": true, "cypress/globals": true }, "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module" }, "settings": { "import/resolver": { "node": { "paths": ["."], "extensions": [".js", ".jsx", ".ts", ".tsx", ".css", ".d.ts"] } }, "typescript": {} }, "rules": { "react/no-unknown-property": ["error", { "ignore": ["test-id"] }], "max-len": [ "error", { "code": 80, "tabWidth": 2, "ignoreStrings": true, "ignoreTemplateLiterals": true, "ignoreUrls": true } ], "semi": ["error", "always"], "react/jsx-filename-extension": [ 2, { "extensions": [".ts", ".tsx", ".jsx"] } ], "react/function-component-definition": "off", "import/prefer-default-export": "off", "cypress/unsafe-to-chain-command": "off", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": ["error"], "@typescript-eslint/no-explicit-any": "off", "import/extensions": [ "error", "ignorePackages", { "js": "never", "jsx": "never", "ts": "never", "tsx": "never" } ] } }