Vue 2 build error

[shyamsalimkumar]

Vue build error

The presence of type twice in the import leads to a build error.

To Reproduce

Getting a build error while trying to build code for production

vue-cli-service build


⠙  Building for production...Starting type checking service...
Using 1 worker with 2048MB memory limit
⠋  Building for production...

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                             5:37:20 PM

 error  in /Users/shyamkumar/Projects/vue-project/node_modules/@bufbuild/connect/dist/types/router.d.ts

ERROR in /Users/shyamkumar/Projects/vue-project/node_modules/@bufbuild/connect/dist/types/router.d.ts(3,15):
3:15 ',' expected.
    1 | import type { MethodInfo, ServiceType } from "@bufbuild/protobuf";
    2 | import type { MethodImpl, ServiceImpl } from "./implementation.js";
  > 3 | import { type UniversalHandler, type UniversalHandlerOptions } from "./protocol/universal-handler.js";
      |               ^
    4 | /**
    5 |  * ConnectRouter is your single registration point for RPCs.
    6 |  *

 error  in /Users/shyamkumar/Projects/vue-project/node_modules/@bufbuild/connect/dist/types/router.d.ts

ERROR in /Users/shyamkumar/Projects/vue-project/node_modules/@bufbuild/connect/dist/types/router.d.ts(3,38):
3:38 ',' expected.
    1 | import type { MethodInfo, ServiceType } from "@bufbuild/protobuf";
    2 | import type { MethodImpl, ServiceImpl } from "./implementation.js";
  > 3 | import { type UniversalHandler, type UniversalHandlerOptions } from "./protocol/universal-handler.js";
      |                                      ^
    4 | /**
    5 |  * ConnectRouter is your single registration point for RPCs.
    6 |  *

The issue goes away if I change node_modules/@bufbuild/connect/dist/types/router.d.ts:3 to

import type { UniversalHandler, UniversalHandlerOptions } from "./protocol/universal-handler.js";

Environment:

"@bufbuild/connect": "^0.11.0",
"@bufbuild/connect-web": "^0.8.5",
"@bufbuild/protobuf": "^1.3.0",

Bundling information

• Bundler and version: (for example, webpack@5.74.0)
• Bundler plugins and version: (for example compression-webpack-plugin@10.0.0)
• Bundler configuration file:

"@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
    "@vue/cli-plugin-babel": "^4.5.11",
    "@vue/cli-plugin-eslint": "^4.5.11",
    "@vue/cli-plugin-typescript": "^4.5.11",
    "@vue/cli-service": "^4.5.11",

// vue.config.js
transpileDependencies: ["vuetify"]

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "strictPropertyInitialization": false,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true
  },
  "include": [
    "@types/**/*.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "typeRoots": ["@types", "node_modules/@types"],
  "exclude": ["node_modules", "node_modules/@vue/runtime-dom"],
	"vueCompilerOptions": {
		"target": 2
	}
}

[timostamm]

TypeScript 4.5 added support for type modifiers on import names. It looks like you are using a pretty old version of TypeScript. We do intend to support older versions though, and ought to fix this.

[shyamsalimkumar]

I see. So if in older versions, the double type in import would error out, but in later versions it wouldn't. Gotcha.
Was using

"typescript": "^4.2.3",

And the error has indeed gone away on updating to 4.55.
Thanks 😄