Using with Svelte-Kit, error: "The requested module does not provide an export name"

Hi @timostamm! Your work is great! Really, I’m speechless! ❤️

i tried both v1 and v2 (now I’m on 2.0.0-alpha.17) and using https://vitejs.dev I get this error:

The requested module '/node_modules/.vite/@protobuf-ts_runtime.js?v=e308126a' does not provide an export named 'BinaryReadOptions'

and also for:

• BinaryWriteOptions
• IBinaryReader
• IBinaryWriter
• and so on…

If I open the generated files and change this:

import { ServiceType } from "@protobuf-ts/runtime-rpc";
import { BinaryWriteOptions } from "@protobuf-ts/runtime";
import { IBinaryWriter } from "@protobuf-ts/runtime";
import { WireType } from "@protobuf-ts/runtime";
import { BinaryReadOptions } from "@protobuf-ts/runtime";
import { IBinaryReader } from "@protobuf-ts/runtime";
import { UnknownFieldHandler } from "@protobuf-ts/runtime";
import { MessageType } from "@protobuf-ts/runtime";

to this:

import { ServiceType } from "@protobuf-ts/runtime-rpc";
import type { BinaryWriteOptions } from "@protobuf-ts/runtime";
import type { IBinaryWriter } from "@protobuf-ts/runtime";
import { WireType } from "@protobuf-ts/runtime";
import type { BinaryReadOptions } from "@protobuf-ts/runtime";
import type { IBinaryReader } from "@protobuf-ts/runtime";
import { UnknownFieldHandler } from "@protobuf-ts/runtime";
import { MessageType } from "@protobuf-ts/runtime";

(and in the other file too… ex: import type { RpcTransport } from "@protobuf-ts/runtime-rpc";)

it works!

Why?

How can I automagically fix this? With a .tsconfig option, maybe?

[timostamm]

I can reproduce, thanks.

The root cause seems to be a limitation of svelte’s TypeScript preprocessor. It is not smart enough to figure out that an import of an interface for example can simply be omitted in Javascript. You have to explicitly use import type in svelte to import types. See this issue: https://github.com/sveltejs/svelte-preprocess/issues/206

I am not sure whether I would consider this limitation acceptable. As a user, I don’t want to think about whether I am using an import as a type or as a value.

For example, I have to use import type in this case:

import type {MyClass} from "./my-class";
let x: MyClass;

But not in this case:

import {MyClass} from "./my-class";
let x: MyClass = new MyClass();

The TypeScript compiler sorts this stuff out flawlessly by default. Maybe svelte should too.

There is an easy workaround:

npx protoc -I . --ts_opt long_type_string,force_optimize_code_size --ts_out ./src msg-scalar.proto 
                                          ^^^^^^^^^^^^^^^^^^^^^^^^

If you use the plugin parameter force_optimize_code_size, protobuf-ts will use reflection for the binary format. This results in much smaller code size (you probably want this in a web app), and by coincidence the code only uses value imports.

I am not sure if this works in all cases, but it certainly does work with msg-scalar.proto. Could you give this workaround a try? If you notice any problems, let me know.

[timostamm]

Hi Frederik,

not sure what is going on - I can’t reproduce, unfortunately:

I just created a simple app with npm init @vitejs/app with the react-ts template.

Then generated a simple message from msg-scalar.proto:

npx protoc -I . --ts_opt long_type_string --ts_out ./src msg-scalar.proto 

And use the message in App.tsx:

import {ScalarValuesMessage} from './msg-scalar';
console.log(
	ScalarValuesMessage.create()
);

npm run dev and npm run build work as expected, there are not compilation errors or warnings.

Vite 2.1.5, Typescript 4.2.3 got installed and tsconfig.json looks ok:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["./src"]
}

This might be related to https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues

It might be worth trying to set "importsNotUsedAsValues" : "remove" (the default behaviour) in a tsconfig.json for the generated code.

Do you have some more info so I can reproduce?