TS2305: Module '"[...]node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.umd"' has no exported member 'grpc'.

This is probably a mistake my side, and it’s 4pm Friday so we’ll see if I can fix it after the beers make an appearance - but I thought I’d make a cry for help also!

package.json

"dependencies": {
    "@improbable-eng/grpc-web": "0.9.1",
    "@types/google-protobuf": "^3.2.5",
    "google-protobuf": "^3.2.0",

service / request user.ts file import {grpc} from "@improbable-eng/grpc-web";

Full browser log

./src/services/user.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: Typescript emitted no output for [...]src/services/user.ts.
    at successLoader ([...]node_modules/ts-loader/dist/index.js:41:15)
    at Object.loader ([...]node_modules/ts-loader/dist/index.js:21:12)
console.(anonymous function) @ console.js?00ac:35
errors @ client?81da:168
onmessage @ socket.js?e29c:41
EventTarget.dispatchEvent @ sockjs.js?9be2:170
(anonymous) @ sockjs.js?9be2:887
SockJS._transportMessage @ sockjs.js?9be2:885
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2961
console.js?00ac:35 [...]src/services/user.ts
./src/services/user.ts
[tsl] ERROR in [...]src/services/user.ts(1,9)
      TS2305: Module '"[...]node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.umd"' has no exported member 'grpc'.

Module import folder

[ '|-- node_modules',
  '    |-- grpc-web',
  '        |-- LICENSE.txt',
  '        |-- README.md',
  '        |-- package.json',
  '        |-- dist',
  '            |-- grpc-web-client.js',
  '            |-- grpc-web-client.umd.js',
  '            |-- typings',
  '                |-- ChunkParser.d.ts',
  '                |-- Code.d.ts',
  '                |-- client.d.ts',
  '                |-- debug.d.ts',
  '                |-- detach.d.ts',
  '                |-- index.d.ts',
  '                |-- invoke.d.ts',
  '                |-- message.d.ts',
  '                |-- metadata.d.ts',
  '                |-- service.d.ts',
  '                |-- unary.d.ts',
  '                |-- util.d.ts',
  '                |-- transports',
  '                    |-- Transport.d.ts',
  '                    |-- http',
  '                    |   |-- fetch.d.ts',
  '                    |   |-- http.d.ts',
  '                    |   |-- xhr.d.ts',
  '                    |   |-- xhrUtil.d.ts',
  '                    |-- websocket',
  '                        |-- websocket.d.ts',
  '' ]

• Vue app
• Yarn not npm

[awmichel]

I ran into this working on https://github.com/Dig-Doug/rules_typescript_proto/pull/13 as well. It looks like the examples use a ES module syntax import { grpc } from '@improbable-eng/grpc-web;`, but Webpack is generating a CommonJS export.

https://github.com/improbable-eng/grpc-web/blob/721eb32e2c2fef541a6cdd6e2e92e73b7471b861/client/grpc-web/webpack.config.js#L25

I believe historically tools like Webpack/Rollup gracefully handled this, however lately it seems more and more are refusing the transparently convert between CommonJS/ESM formats.

Configuring Webpack to generate a ESM lib and adding "module": "dist/grpc-web-client.mjs", to the package.json should do the trick. It’s also possible generating a .mjs version alone will work, but adding the module declaration to the package file can’t hurt.

References: ES Module Reference Hybrid NPM Packages Blog Post

[graup]

I have a similar issue with rollup. I had to define a namedExport to make this work withrollup-plugin-commonjs, otherwise it throws the same error as in the OP. This is for a browser (umd) build.

Something like

commonjs({
    namedExports: {'path/to/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.umd.js': ['grpc']}
}),