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

[nothingrandom]

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

[jonny-improbable]

First thing I note is that you are consuming the .umd file which is primarily intended to be used in browsers. Are you pre-processing your files with anything (ie: Webpack, rollup?).

[nothingrandom]

@jonny-improbable Yes, I too thought that was a little weird.
Webpack, as this is within a vue project. Created using the Vue CLI which runs a webpack configuration > https://cli.vuejs.org/

[jonny-improbable]

@nothingrandom I'd dig into why it's picking up the .umd file as a starting point; maybe try deleting the "browser": "dist/grpc-web-client.umd.js" entry in your local copy of grpc-web's package.json

[nothingrandom]

@jonny-improbable Weirdly that gives me an error with the other file instead / as well

TS2306: File '[...]/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js' is not a module.

[jonny-improbable]

Ah, I meant removing the line. Are you able to create a minimal repro for this?

[nothingrandom]

Yes, I did remove just that one line. The file now looks like this.

{
  "name": "@improbable-eng/grpc-web",
  "version": "0.9.1",
  "description": "gRPC-Web client for browsers (JS/TS)",
  "main": "dist/grpc-web-client.js",
  "types": "dist/typings/index.d.ts",
  "scripts": {
    "clean": "rm -rf dist",
    "postbootstrap": "npm run lib:build",
    "lib:build": "npm run clean && webpack"
  },
  "author": "Improbable",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "github.com/improbable-eng/grpc-web"
  },
  "keywords": [
    "grpc",
    "grpc-web",
    "protobuf",
    "typescript",
    "ts"
  ],
  "files": [
    "dist"
  ],
  "peerDependencies": {
    "google-protobuf": "^3.2.0"
  },
  "dependencies": {
    "browser-headers": "^0.4.0"
  },
  "devDependencies": {
    "@types/google-protobuf": "^3.2.5",
    "@types/node": "^7.0.5",
    "google-protobuf": "^3.2.0",
    "ts-loader": "^4.5.0",
    "typescript": "3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "gitHead": "a11641a4c05dcb97c06a36a62a0bcb98772dfb71"
}

I am able to do so, but it's not going to be quick. This is quite a heavy repo currently

[nothingrandom]

If things still aren't clear, I'm happy to make a test vue cli app using a basic import for this and share it? Might have a chance over the weekend, most likely Monday. If it'd help?

[jonnyreeves]

That would certainly help, although I seem to recall a similar issue over on the ts-protoc-gen with Vue which I recall being unable to root cause in the end :(

…

On Fri, 8 Mar 2019 at 16:05, Benjamin Hollway ***@***.***> wrote: If things still aren't clear, I'm happy to make a test vue cli app using a basic import for this and share it? Might have a chance over the weekend, most likely Monday. If it'd help? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#369 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMN-ZoEg0iMw_yRIYbLtuwDU86gqokGks5vUopRgaJpZM4bliHW> .

[nothingrandom]

Gonna ensure that's not the case here; I'll have to find a cause eventually. Internal product that's far too deep to switch to React / other and requires access to stream.

I'll get that sorted quickly. Ought I try base it off of grpc-web-react-example so that it can be useful for others in the future looking at this from a Vue / webpack POV?

[jonny-improbable]

That sounds like a great idea, I'd be happy to help you land it back into the repo :)

…

On Fri, 8 Mar 2019 at 16:24, Benjamin Hollway ***@***.***> wrote: Gonna ensure that's not the case here; I'll have to find a cause eventually. Internal product that's far too deep to switch to React / other and requires access to stream. I'll get that sorted quickly. Ought I try base it off of grpc-web-react-example so that it can be useful for others in the future looking at this from a Vue / webpack POV? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#369 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANga8UmgD4mPFXGYfagIUCBtLDkYUQaOks5vUo7BgaJpZM4bliHW> .

[nothingrandom]

Hey, couple of questions whilst I'm looking at my root repo. It appears it's aiming for the grpc-web-client.js / grpc-web-client.umd.js files. Is this correct? The reason for the TS2306 is that the .js file doesn't have any named exports, see https://stackoverflow.com/questions/32805559/typescript-es6-import-module-file-is-not-a-module-error

Is the import I make, aiming to hit the dist/typings/index.d.ts file? Or maybe the minification on the client file is causing me issues with webpack?

[nothingrandom]

@jonny-improbable @jonnyreeves. Got the test project "working" (gives the same error, but I guess that's a good thing?)

https://github.com/nothingrandom/grpc-vue-test-project

Let me know if you have any questions, some things are a little different to the react example you have; but they can all get sorted / aligned later

[jonny-improbable]

Morning @nothingrandom; thanks for the repro! I will try to take a look this week, work schedule permitting, although as always I'd welcome input from anyone else who has the time to dig in.

[ypoluektovich]

I encountered the same problem today when I tried to upgrade the grpc-web dependency.
My project is written in ES6 and transpiled to ES5 by rollup.
I tried to import grpc like this:

import { grpc } from '@improbable-eng/grpc-web';

It also decided to use the umd file and couldn't find the export.
I looked into the file and this is what it looks like (formatting is mine):

!function (e, t) {
	if ('object' == typeof exports && 'object' == typeof module) {
		module.exports = t();
	} else if ('function' == typeof define && define.amd) {
		define([], t);
	} else {
		var n = t();
		for (var r in n) ('object' == typeof exports ? exports : e)[r] = n[r];
	}
}(window, function () { ... });

Apparently, 'object' == typeof exports && 'object' == typeof module is not true in my case, even though I'd like it to be. And obviously setting things to window doesn't propagate to other modules' imports.
Now, I have no idea how that file is generated and why it is what it is, so my workaround is to add a build step that augments this file (using rollup-plugin-hypothetical) using this template:

const window = {};
${oldContents}
export const grpc = window.grpc;

Hope this helps somehow.

[nothingrandom]

@ypoluektovich; Looks like it could be a useful hotfix. What file are you adding that to?