When I try to build and deploy, I get ts 2307 errors. When I run a dev server with npm run dev, it works perfectly, but building does not work.
Build log:
Netlify Build
────────────────────────────────────────────────────────────────
> Version
@netlify/build 29.26.6
> Flags
dry: false
offline: false
> Current directory
C:\Users\xxx\OneDrive\Documents\GitHub\vue-supabase-project-epic-games-fortnite-2\paint
> Config file
No config file was defined: using default values.
> Context
production
Build command from Netlify app
────────────────────────────────────────────────────────────────
$ npm run build
> [email protected] build
> run-p type-check "build-only {@}" --
> [email protected] build-only
> vite build
> [email protected] type-check
> vue-tsc --build --force
vite v5.2.8 building for production...
✓ 104 modules transformed.
dist/index.html 0.44 kB │ gzip: 0.29 kB
dist/assets/index-DLmPiY36.css 2.53 kB │ gzip: 1.00 kB
dist/assets/browser-BImCA5dO.js 0.63 kB │ gzip: 0.41 kB
dist/assets/index-FbjYx3Oh.js 193.04 kB │ gzip: 62.80 kB
✓ built in 1.58s
src/lib/supabaseClient.ts:2:31 - error TS2307: Cannot find module 'index' or its corresponding type declarations.
2 import type { Database } from 'index'
~~~~~~~
src/components/NavBar.vue:18:33 - error TS2307: Cannot find module '@/stores/user' or its corresponding type declarations.
18 import { useSessionStore } from '@/stores/user'
~~~~~~~~~~~~~~~
src/components/NavBar.vue:19:20 - error TS2307: Cannot find module '@/router' or its corresponding type declarations.
19 import router from '@/router'
~~~~~~~~~~
src/components/CreateWorld.vue:17:33 - error TS2307: Cannot find module '@/stores/user' or its corresponding type declarations.
17 import { useSessionStore } from '@/stores/user'
~~~~~~~~~~~~~~~
src/components/CreateWorld.vue:18:49 - error TS2307: Cannot find module 'index' or its corresponding type declarations.
18 import type { data, boardDisplay, placed } from 'index'
~~~~~~~
src/views/InWorld.vue:3:52 - error TS2307: Cannot find module 'index.d.ts' or its corresponding type declarations.
3 import type { boardDisplay, playerPos, data } from 'index.d.ts'
~~~~~~~~~~~~
src/views/InWorld.vue:4:26 - error TS2307: Cannot find module '@/lib/supabaseClient' or its corresponding type declarations.
4 import { supabase } from '@/lib/supabaseClient'
~~~~~~~~~~~~~~~~~~~~~~
src/views/InWorld.vue:6:33 - error TS2307: Cannot find module '@/stores/user' or its corresponding type declarations.
6 import { useSessionStore } from '@/stores/user'
~~~~~~~~~~~~~~~
src/views/UserLogin.vue:25:20 - error TS2307: Cannot find module '@/router' or its corresponding type declarations.
25 import router from '@/router'
~~~~~~~~~~
src/views/UserLogin.vue:27:33 - error TS2307: Cannot find module '@/stores/user' or its corresponding type declarations.
27 import { useSessionStore } from '@/stores/user'
~~~~~~~~~~~~~~~
src/views/UserRegister.vue:26:20 - error TS2307: Cannot find module '@/router' or its corresponding type declarations.
26 import router from '@/router'
~~~~~~~~~~
src/views/UserRegister.vue:27:33 - error TS2307: Cannot find module '@/stores/user' or its corresponding type declarations.
27 import { useSessionStore } from '@/stores/user'
~~~~~~~~~~~~~~~
src/views/WorldsView.vue:24:33 - error TS2307: Cannot find module '@/stores/user' or its corresponding type declarations.
24 import { useSessionStore } from '@/stores/user'
~~~~~~~~~~~~~~~
src/views/WorldsView.vue:27:20 - error TS2307: Cannot find module '@/router' or its corresponding type declarations.
27 import router from '@/router'
~~~~~~~~~~
src/router/index.ts:1:22 - error TS2307: Cannot find module '@/views/HomeView.vue' or its corresponding type declarations.
1 import HomeView from '@/views/HomeView.vue'
~~~~~~~~~~~~~~~~~~~~~~
src/router/index.ts:2:23 - error TS2307: Cannot find module '@/views/UserLogin.vue' or its corresponding type declarations.
2 import UserLogin from '@/views/UserLogin.vue'
~~~~~~~~~~~~~~~~~~~~~~~
src/router/index.ts:3:26 - error TS2307: Cannot find module '@/views/UserRegister.vue' or its corresponding type declarations.
3 import UserRegister from '@/views/UserRegister.vue'
~~~~~~~~~~~~~~~~~~~~~~~~~~
src/router/index.ts:4:24 - error TS2307: Cannot find module '@/views/WorldsView.vue' or its corresponding type declarations.
4 import WorldsView from '@/views/WorldsView.vue'
~~~~~~~~~~~~~~~~~~~~~~~~
src/router/index.ts:5:21 - error TS2307: Cannot find module '@/views/InWorld.vue' or its corresponding type declarations.
5 import InWorld from '@/views/InWorld.vue'
~~~~~~~~~~~~~~~~~~~~~
src/router/index.ts:9:41 - error TS2339: Property 'env' does not exist on type 'ImportMeta'.
9 history: createWebHistory(import.meta.env.BASE_URL),
Found 20 errors.
ERROR: "type-check" exited with 2.
Save updated config
────────────────────────────────────────────────────────────────
(options.onEnd completed in 3ms)
"build.command" failed
────────────────────────────────────────────────────────────────
Error message
Command failed with exit code 1: npm run build
Error location
In Build command from Netlify app:
npm run build
Resolved config
build:
base: C:\Users\xxx\OneDrive\Documents\GitHub\vue-supabase-project-epic-games-fortnite-2\paint
command: npm run build
commandOrigin: ui
publish: C:\Users\xxx\OneDrive\Documents\GitHub\vue-supabase-project-epic-games-fortnite-2\paint\dist
publishOrigin: ui
package.json:
"name": "paint",
"types": "/paint/index.d.ts",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
"dependencies": {
"@supabase/supabase-js": "^2.42.0",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node20": "^20.1.2",
"@types/node": "^20.12.12",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.5.1",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"netlify-cli": "^17.23.8",
"npm-run-all2": "^6.1.2",
"prettier": "^3.0.3",
"sass": "^1.77.1",
"supabase": "^1.165.0",
"typescript": "~5.4.0",
"vite": "^5.1.6",
"vue-tsc": "^2.0.6"
tsconfig:
"extends": "@tsconfig/node20/tsconfig.json",
"include": [
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"src/**/*.vue",
"./src/lib/supabaseClient.ts",
"paint/**/*",
"src/**/*.ts",
"paint/index.d.ts"
"exclude": ["node_modules"],
"compilerOptions": {
"forceConsistentCasingInFileNames": false,
"baseUrl": "paint",
"allowUnreachableCode": false,
"composite": true,
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"strict": true,
"target": "ES6",
"lib": ["dom"],
"outDir": "./dist/",
"rootDir": "./src",
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "node",
"types": ["node"]
shatterdest:
When I run a dev server with npm run dev, it works perfectly, but building does not work.
Have you tested building this locally?
Step 1. Remove local output directory.
Step 2. Run build command npm run build
Step 3. Do you observe the same errors or does it build without issue?
Likely because of module resolution in typescript (I assume atleast), when coding typescript if you include a .ts extension the file won’t be found, but after converting it to js with compile the extensions must be present or the file won’t be found. It likely has something to do with you tsconfig.json, my ts config that works for building looks something like:
"compilerOptions": {
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"esModuleInterop": true,
"module": "ES2022",
/* Bundler mode */
"moduleResolution": "bundler",
"noEmit": true,
"allowImportingTsExtensions": false,
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules/**"]
I assume the setting you’re looking for moduleResolution: "bundler"
instead of moduleResolution: "node"
, I may be very mistaken and this won’t help at all, but try it, see if it does anything at all? There is a setting for including .js extensions when compiling back into JavaScript, but I’m not exactly sure what causes it. I write my TypeScript like you though with no file.ts extension, just import test from "file"
and on build it gets compiled into import test from "file.js"
, I’m not exactly sure the setting but there is something to do it, no matter what github comments say, I’m pretty sure it’s moduleResolution: "bundler"
though so I guess try it out and see what happens, I can try to provide more insight if need be, just know it’s possible, it could be target, it could be module, maybe esModuleInterop, but I think it’s moduleResolution.