Vite: Unable to use es6 generated protobuf.js code

[delaneyj]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

Using protobuf.js cli tools converts a .proto into an api.pb.js file

/*eslint-disable*/
import * as $protobuf from "protobufjs/minimal";

// Common aliases
const $Reader = $protobuf.Reader, $Writer = $protobuf.Writer, $util = $protobuf.util;

// Exported root namespace
const $root = $protobuf.roots["default"] || ($protobuf.roots["default"] = {});

export const example = $root.example = (() => {

    /**
     * Namespace example.
     * @exports example
     * @namespace
     */
    const example = {};

    example.Test = (function () {

        /**
         * Properties of a Test.
         * @memberof example
         * @interface ITest
         * @property {string|null} [foo] Test foo
         */

        /**
         * Constructs a new Test.
         * @memberof example
         * @classdesc Represents a Test.
         * @implements ITest
         * @constructor
         * @param {example.ITest=} [properties] Properties to set
         */
        function Test(properties) {
            if (properties)
                for (let keys = Object.keys(properties), i = 0; i < keys.length; ++i)
                    if (properties[keys[i]] != null)
                        this[keys[i]] = properties[keys[i]];
        }

        /**
         * Test foo.
         * @member {string} foo
         * @memberof example.Test
         * @instance
         */
        Test.prototype.foo = "";

        /**
         * Creates a new Test instance using the specified properties.
         * @function create
         * @memberof example.Test
         * @static
         * @param {example.ITest=} [properties] Properties to set
         * @returns {example.Test} Test instance
         */
        Test.create = function create(properties) {
            return new Test(properties);
        };

        /**
         * Encodes the specified Test message. Does not implicitly {@link example.Test.verify|verify} messages.
         * @function encode
         * @memberof example.Test
         * @static
         * @param {example.ITest} message Test message or plain object to encode
         * @param {$protobuf.Writer} [writer] Writer to encode to
         * @returns {$protobuf.Writer} Writer
         */
        Test.encode = function encode(message, writer) {
            if (!writer)
                writer = $Writer.create();
            if (message.foo != null && Object.hasOwnProperty.call(message, "foo"))
                writer.uint32(/* id 1, wireType 2 =*/10).string(message.foo);
            return writer;
        };

        /**
         * Encodes the specified Test message, length delimited. Does not implicitly {@link example.Test.verify|verify} messages.
         * @function encodeDelimited
         * @memberof example.Test
         * @static
         * @param {example.ITest} message Test message or plain object to encode
         * @param {$protobuf.Writer} [writer] Writer to encode to
         * @returns {$protobuf.Writer} Writer
         */
        Test.encodeDelimited = function encodeDelimited(message, writer) {
            return this.encode(message, writer).ldelim();
        };

        /**
         * Decodes a Test message from the specified reader or buffer.
         * @function decode
         * @memberof example.Test
         * @static
         * @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
         * @param {number} [length] Message length if known beforehand
         * @returns {example.Test} Test
         * @throws {Error} If the payload is not a reader or valid buffer
         * @throws {$protobuf.util.ProtocolError} If required fields are missing
         */
        Test.decode = function decode(reader, length) {
            if (!(reader instanceof $Reader))
                reader = $Reader.create(reader);
            let end = length === undefined ? reader.len : reader.pos + length, message = new $root.example.Test();
            while (reader.pos < end) {
                let tag = reader.uint32();
                switch (tag >>> 3) {
                    case 1:
                        message.foo = reader.string();
                        break;
                    default:
                        reader.skipType(tag & 7);
                        break;
                }
            }
            return message;
        };

        /**
         * Decodes a Test message from the specified reader or buffer, length delimited.
         * @function decodeDelimited
         * @memberof example.Test
         * @static
         * @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
         * @returns {example.Test} Test
         * @throws {Error} If the payload is not a reader or valid buffer
         * @throws {$protobuf.util.ProtocolError} If required fields are missing
         */
        Test.decodeDelimited = function decodeDelimited(reader) {
            if (!(reader instanceof $Reader))
                reader = new $Reader(reader);
            return this.decode(reader, reader.uint32());
        };

        /**
         * Verifies a Test message.
         * @function verify
         * @memberof example.Test
         * @static
         * @param {Object.<string,*>} message Plain object to verify
         * @returns {string|null} `null` if valid, otherwise the reason why it is not
         */
        Test.verify = function verify(message) {
            if (typeof message !== "object" || message === null)
                return "object expected";
            if (message.foo != null && message.hasOwnProperty("foo"))
                if (!$util.isString(message.foo))
                    return "foo: string expected";
            return null;
        };

        /**
         * Creates a Test message from a plain object. Also converts values to their respective internal types.
         * @function fromObject
         * @memberof example.Test
         * @static
         * @param {Object.<string,*>} object Plain object
         * @returns {example.Test} Test
         */
        Test.fromObject = function fromObject(object) {
            if (object instanceof $root.example.Test)
                return object;
            let message = new $root.example.Test();
            if (object.foo != null)
                message.foo = String(object.foo);
            return message;
        };

        /**
         * Creates a plain object from a Test message. Also converts values to other types if specified.
         * @function toObject
         * @memberof example.Test
         * @static
         * @param {example.Test} message Test
         * @param {$protobuf.IConversionOptions} [options] Conversion options
         * @returns {Object.<string,*>} Plain object
         */
        Test.toObject = function toObject(message, options) {
            if (!options)
                options = {};
            let object = {};
            if (options.defaults)
                object.foo = "";
            if (message.foo != null && message.hasOwnProperty("foo"))
                object.foo = message.foo;
            return object;
        };

        /**
         * Converts this Test to JSON.
         * @function toJSON
         * @memberof example.Test
         * @instance
         * @returns {Object.<string,*>} JSON object
         */
        Test.prototype.toJSON = function toJSON() {
            return this.constructor.toObject(this, $protobuf.util.toJSONOptions);
        };

        return Test;
    })();

    return example;
})();

export { $root as default };

as a declaration pb.d.ts

import * as $protobuf from "protobufjs";
/** Namespace example. */
export namespace example {

    /** Properties of a Test. */
    interface ITest {

        /** Test foo */
        foo?: (string|null);
    }

    /** Represents a Test. */
    class Test implements ITest {

        /**
         * Constructs a new Test.
         * @param [properties] Properties to set
         */
        constructor(properties?: example.ITest);

        /** Test foo. */
        public foo: string;

        /**
         * Creates a new Test instance using the specified properties.
         * @param [properties] Properties to set
         * @returns Test instance
         */
        public static create(properties?: example.ITest): example.Test;

        /**
         * Encodes the specified Test message. Does not implicitly {@link example.Test.verify|verify} messages.
         * @param message Test message or plain object to encode
         * @param [writer] Writer to encode to
         * @returns Writer
         */
        public static encode(message: example.ITest, writer?: $protobuf.Writer): $protobuf.Writer;

        /**
         * Encodes the specified Test message, length delimited. Does not implicitly {@link example.Test.verify|verify} messages.
         * @param message Test message or plain object to encode
         * @param [writer] Writer to encode to
         * @returns Writer
         */
        public static encodeDelimited(message: example.ITest, writer?: $protobuf.Writer): $protobuf.Writer;

        /**
         * Decodes a Test message from the specified reader or buffer.
         * @param reader Reader or buffer to decode from
         * @param [length] Message length if known beforehand
         * @returns Test
         * @throws {Error} If the payload is not a reader or valid buffer
         * @throws {$protobuf.util.ProtocolError} If required fields are missing
         */
        public static decode(reader: ($protobuf.Reader|Uint8Array), length?: number): example.Test;

        /**
         * Decodes a Test message from the specified reader or buffer, length delimited.
         * @param reader Reader or buffer to decode from
         * @returns Test
         * @throws {Error} If the payload is not a reader or valid buffer
         * @throws {$protobuf.util.ProtocolError} If required fields are missing
         */
        public static decodeDelimited(reader: ($protobuf.Reader|Uint8Array)): example.Test;

        /**
         * Verifies a Test message.
         * @param message Plain object to verify
         * @returns `null` if valid, otherwise the reason why it is not
         */
        public static verify(message: { [k: string]: any }): (string|null);

        /**
         * Creates a Test message from a plain object. Also converts values to their respective internal types.
         * @param object Plain object
         * @returns Test
         */
        public static fromObject(object: { [k: string]: any }): example.Test;

        /**
         * Creates a plain object from a Test message. Also converts values to other types if specified.
         * @param message Test
         * @param [options] Conversion options
         * @returns Plain object
         */
        public static toObject(message: example.Test, options?: $protobuf.IConversionOptions): { [k: string]: any };

        /**
         * Converts this Test to JSON.
         * @returns JSON object
         */
        public toJSON(): { [k: string]: any };
    }
}

Vite build using import { example } from "./messages/api.pb"; the message but at runtime fails with

Uncaught ReferenceError: module is not defined
    at minimal.js:4

Which fails on the import * as $protobuf from "protobufjs/minimal"; line and it appears to use require. Is there anyway to support this? Is this related to #490 ?

Reproduction

System Info

• required vite version: 1.0.0-beta.11
• required Operating System: Mac
• required Node version: 14.5.0

[underfin]

Have a try with this https://github.com/vitejs/vite/issues/490#issuecomment-652791632 :)

[delaneyj]

@underfin tried both protobufjs and protobufjs/minimal and the error changes to index-minimal.js:2 Uncaught ReferenceError: exports is not defined coming from index-minimal.ts.

"use strict";
var protobuf = exports;

/**
 * Build type, one of `"full"`, `"light"` or `"minimal"`.
 * @name build
 * @type {string}
 * @const
 */
protobuf.build = "minimal";

// Serialization
protobuf.Writer       = require("./writer");
protobuf.BufferWriter = require("./writer_buffer");
protobuf.Reader       = require("./reader");
protobuf.BufferReader = require("./reader_buffer");

// Utility
protobuf.util         = require("./util/minimal");
protobuf.rpc          = require("./rpc");
protobuf.roots        = require("./roots");
protobuf.configure    = configure;

/* istanbul ignore next */
/**
 * Reconfigures the library according to the environment.
 * @returns {undefined}
 */
function configure() {
    protobuf.util._configure();
    protobuf.Writer._configure(protobuf.BufferWriter);
    protobuf.Reader._configure(protobuf.BufferReader);
}

// Set up buffer utility according to the environment
configure();

[underfin]

...Look like there are many cjs module in deps,it is better for ask maintainer provider an esm package.Or have a try with config the cjs module into optimizeDeps....That is quiet :(

[lifeng1992]

I have the same problem，the following ways can work，but expect a universal solution

  <script src="/protobuf.js"></script>
  <script>$protobuf = protobuf;</script>

pbjs -t static -w es6

[sapphi-red]

This worked for me.

1. Add protobufjs/minimal to optimizeDeps
2. Rewrite import * as $protobuf from "protobufjs/minimal"; to import $protobuf from "protobufjs/minimal";.

[yyx990803]

Closing, see @sapphi-red 's comment.

Don't use import * as x for CJS modules.