vue with ts-protoc-gen has Uncaught ReferenceError: exports is not defined

[lionelee]

When I using the latest version of ts-protoc-gen in my vue project I got Uncaught ReferenceError: exports is not defined.

Versions as follows:
Vue 3.0.0-rc.12/ts-protoc-gen 0.7.6/Node 10.7.0/yarn 1.7.0/macOS High Sierra

[nadilas]

+1

[jonnyreeves]

@lionelee the repo you have linked to 404's for me, is it private? Can anyone provide a minimal repro for me to debug? Thanks.

[HuangXiZhou]

@lionelee @nadilas @jonnyreeves

I have an imperfect solution here to solve this problem temporarily.

// src/service/grpcweb.ts
printer.printLn(`var ${service.name} = (function () {`); // line 251 
//  ||
//  ||
//  \/
printer.printLn(`export var ${service.name} = (function () {`);



printer.printLn(`exports.${service.name} = ${service.name};`); // line 270
//  ||
//  ||
//  \/
// delete



.printLn(`function ${service.name}Client(serviceHost, options) {`) // line 286
//  ||
//  ||
//  \/
.printLn(`export function ${service.name}Client(serviceHost, options) {`)



printer.printLn(`exports.${service.name}Client = ${service.name}Client;`); // line 304
//  ||
//  ||
//  \/
// delete

[jonnyreeves]

Thanks for the additional info @HuangXiZhou; I now understand the problem and this gives me an idea.

Please could you try adding the following patch to src/service/grpcweb.ts after L261:

printer.printEmptyLn();

printer.printLn(`var exports = (typeof module === 'object' && module != null) ? module.exports : {};`);

// Services.

This should work around exports being undefined, however it still assumes you have a node style module system present.

[HuangXiZhou]

@jonnyreeves But I think the problem is that I don't have a node style module system present in browser environment，so I think we need to generate multiple files with different module standard to support node and browser.

[jonnyreeves]

Thanks @HuangXiZhou; I think I have a better understanding of this problem now - put simply, the gRPC-Web Service Stubs generated by ts-protoc-gen expect a CommonJS environment/build system (eg: webpack).

It sounds like the ask here is for ts-protoc-gen to support alternate module systems; however I am confused as the original issue states that only the exports reference is causing a problem - shouldn't the require() call found at the top of each of generated file also be causing problems? Are you using any kind of module bundler in your build setup?

A small example which repros this issue would really help here.

[tiramiseb]

I have the exact same problem.
module exists but module.exports is undefined.

When I put console.log(module) at the top of the xxx_pb_service.js file after generation, I get:

{exports: undefined, webpackPolyfill: 1}

So, I have modified your suggestion and am using:

var exports = (typeof module === 'object' && module != null && module.exports !== undefined) ? module.exports : {};

I don't have this error anymore.

Of course, it also works with:

var exports = {};

I hope the problem will be fixed soon, because I cannot reasonably do that in production :)

---

EDIT: well, I still have a problem:

with:

import {XXX, XXXClient} from './service_pb_service';
console.log(XXX)
console.log(XXXClient)

... I get, in the console:

undefined
undefined

[tiramiseb]

I have essentially done what HuangXiZhou suggested above and it works.
I guess it is related to the fact that he does not "have a node style module system present in browser environment" and that I'm in the same situation.

[jonny-improbable]

@tiramiseb are you able to provide a repro of your issue? Details on the build system / module bundler that you are using would really help <3

[tiramiseb]

Here it is:
https://github.com/tiramiseb/grpcweb-exportsproblem

[jonny-improbable]

Thanks for the repro, it would appear that this vue-loader issue is related: vuejs/vue-loader#1337

[tiramiseb]

... which states "module.exports" is not supported anymore (vuejs/vue-loader#1337 (comment))

[jonny-improbable]

Wow, that was a fun bit of debugging! TL;DR the service generation code is invoking an ES6 function (Object.assign) which is tricking webpack into treating the modules as ES6 modules instead of ES5 modules.

[jonnyreeves]

If anyone wants to try this out and give feedback, please update your dependency on ts-protoc-gen to 0.7.7-pre.687bcc7

…

On Wed, 12 Sep 2018, 18:13 Jonny Reeves, ***@***.***> wrote: Closed #103 <#103> via #110 <#110>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#103 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMN-focOZQ_SY4jPIe6RkCH2D0haRO-ks5uaUCsgaJpZM4V5ynV> .

[tiramiseb]

Tried it. Works perfectly. Thanks!

[tiramiseb]

works perfectly, but only when I use "yarn serve" to serve stuff for development.
If I build for production, I have another similar problem.
See #111