Typescript + Vue project works with npm run dev but not building in production

Support
,
1

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

> paint@0.0.0 build
> run-p type-check "build-only {@}" --


> paint@0.0.0 build-only
> vite build


> paint@0.0.0 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"]
  }
}
2

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?

3

It still results with the same error.

4

This issue is not with Netlify then.

You should debug the build process locally before building on Netlify.

5

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.