opentelemetry-js: Grpc OpenTelemetry Collector Exporter not showing traces with webpack

Please answer these questions before submitting a bug report.

What version of OpenTelemetry are you using?

    "@opentelemetry/core": "^1.0.1",
    "@opentelemetry/api": "^1.0.4",
    "@opentelemetry/exporter-trace-otlp-grpc": "^0.27.0",
    "@opentelemetry/resources": "1.0.1",
    "@opentelemetry/sdk-metrics-base": "^0.27.0",
    "@opentelemetry/sdk-trace-base": "^1.0.1",
    "@opentelemetry/semantic-conventions": "1.0.1"

What version of Node are you using?

v16.13.2

Please provide the code you used to setup the OpenTelemetry SDK

Converted the sample app to ts

// tracing.ts
import opentelemetry from "@opentelemetry/api";
import { BasicTracerProvider, ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-grpc";
import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
import { Resource } from "@opentelemetry/resources";

const exporter = new OTLPTraceExporter();

const provider = new BasicTracerProvider({
    resource: new Resource({
        [SemanticResourceAttributes.SERVICE_NAME]: "basic-service",
    }),
});
provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register();

const tracer = opentelemetry.trace.getTracer("example-otlp-exporter-node");

// Create a span. A span must be closed.
const parentSpan = tracer.startSpan("main");
for (let i = 0; i < 10; i += 1) {
    doWork(parentSpan);
}
// Be sure to end the span.
parentSpan.end();

// give some time before it is closed
setTimeout(() => {
    // flush and close the connection.
    exporter.shutdown();
}, 2000);

function doWork(parent: any) {
    // Start another span. In this example, the main method already started a
    // span, so that'll be the parent span, and this will be a child span.
    const ctx = opentelemetry.trace.setSpan(opentelemetry.context.active(), parent);
    const span = tracer.startSpan("doWork", undefined, ctx);

    // simulate some random work.
    for (let i = 0; i <= Math.floor(Math.random() * 40000000); i += 1) {
        // empty
    }
    // Set attributes to the span.
    span.setAttribute("key", "value");

    // Annotate our span to capture metadata about our operation
    span.addEvent("invoking doWork");

    // end span
    span.end();
}

What did you do?

Added a webpack file, with the following content, and tried running the tracing on the dist/index.js file.

const path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "app.js"),
    target: "node",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.js",
    },
    module: {
        rules: [
            {
                test: /.(ts|js)$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
            { test: /\.node$/, loader: "node-loader" },
        ],
    },
};

What did you expect to see?

I expected to see the tracing from both the Otel Exporter and Console Exporter.

What did you see instead?

The Otel Exporter traces are not showing in localhost:4317, only the console exporter displays in console.

Additional context

This warning is always displayed - opentelemetry/proto/collector/trace/v1/trace_service.proto not found in any of the include paths js-app\protos I tried moving the protos folder into the path the warning displays… solves nothing still.

The traces display fine without webpack.