{"id":675,"hash":"8d31b4b79c9bca2b4eee2ac38b9e60b6a57297585ea0abe1d9f758ca32c36413","pattern":"Error in vitest config with NextJS13: failed to resolve import","full_message":"I'm integrating vitest with a NextJS13 app, but running into problems with a simple test run.\n\nNot sure what the problem is, I tried to do some tweaking with the vitest.config.ts but no luck. I tried adding the dir option, modified the include option to grab files from the source file but no luck.\n\nI thought maybe it had to do with the tsconfig.json file, but it's still outputting the error.\n\nThis is the directory of the file\n\nHere are the files in question:\n\nvitest.config.ts\n\n/// <reference types=\"vitest\" />\n\nimport { defineConfig } from 'vitest/config'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  test: {\n    globals: true,\n    environment: 'jsdom',\n    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],\n    setupFiles: 'setupTests.ts',\n    // dir: './src'\n    // includeSource: ['src/**/*.{js,ts,tsx}'],\n  },\n});\n\ntsconfig.json\n\n{\n\"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\"es6\", \"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"ESNEXT\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"baseUrl\": \".\",\n    \"incremental\": true,\n    // \"paths\": {\n    //     \"src\": [\"./src/*\"]\n    // }\n},\n\"exclude\": [\"node_modules\"],\n\"include\": [\"vitest.config.ts\",\"**/*.ts\", \"**/*.tsx\", \"next-env.d.ts\", \n\"next.config.js\"]\n}\n\nDataTable.test.tsx - src/common/components/DataTable/DataTable.test.tsx\n\n// components\n\nimport DataTable from 'src/common/components/DataTable';\n\n// dependencies\nimport {describe, it} from 'vitest'\nimport {screen, render} from '@testing-library/react'\n\ndescribe('DataTable test', () => {\n\n    it('render the app', () => {\n        // arrange\n            render(<DataTable />)\n        // act\n            const assetText = screen.getByText(\"asset\")\n        // assert\n            // expect(assetText).toBeInTheDocument()\n    })\n})\n\nDataTable component - src/common/components/DataTable/DataTable.tsx\n\nexport const DataTable = () => {\n\n    return (\n        <div>\n            <h1>assets</h1>\n        </div>\n    );\n};\n\nIndex.tsx - src/common/components/DataTable/index.tsx\n\nimport { DataTable } from 'src/common/components/DataTable/DataTable';\n\nexport default DataTable;\n\nI'm new to vitest and nextjs, your help/guidance will be appreciated.","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"There are two things needed here to make the import DataTable from 'src/common/components/DataTable'; import work:\n\nTypeScript needs the paths compilerOption set.\nVite needs to have the same alias set.\n\nThe \"paths\" compilerOption in TypeScript will need a /* on the end of the \"src\" key to be able to resolve paths underneath the \"src\" directory (see tsconfig.json reference):\n\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"src/*\": [\"./src/*\"]\n    }\n  }\n}\n\nVite/Vitest will also need to know how to resolve \"src/common/components/DataTable\", and that would usually be done with the resolve.alias setting, but rather than duplicating the alias here, you could also use a plugin, like vite-tsconfig-paths, to add the path aliases found in relevant tsconfig.json files:\n\nimport react from \"@vitejs/plugin-react\";\nimport tsconfigPaths from \"vite-tsconfig-paths\";\n\nexport default {\n  plugins: [tsconfigPaths(), react()],\n};","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/75380295/error-in-vitest-config-with-nextjs13-failed-to-resolve-import","votes":10,"created_at":"2026-04-19T04:51:28.854423+00:00","updated_at":"2026-04-19T04:51:28.854423+00:00"}