Fail to bundle when using Rollup for esm libraries in browser environment #32430

v-jiaodi · 2025-01-06T09:59:02Z

Desciption: fail to bundle when using Rollup for esm libraries in browser environment.

Repro steps:

Use petstore js sdk client : https://github.com/allenjzhang/typespec-e2e-demo/tree/main/petstore/clients/javascript.
Execute step by step according to the document：https://github.com/Azure/azure-sdk-for-js/blob/main/documentation/Bundling.md#using-rollup.
when run rollup --config, get error as follow:
Execute rollup --config --bundleConfigAsCjs according to the prompt successfully. But when accessed from a browser, the following error occurs:

The text was updated successfully, but these errors were encountered:

MaryGao · 2025-01-06T13:27:04Z

@jeremymeng Could you help investigate the bundling issue? We tried the webpack steps and it succeeded. but for tool rollup we failed with above message.

jeremymeng · 2025-01-06T18:53:53Z

@v-jiaodi @MaryGao thanks for the issue! We should rename the config to rollup.config.mjs. Also, for most packages we can just use a simpler configuration. Could you please see the doc improvement in this PR and try it out? #32440

v-jiaodi · 2025-01-07T02:33:43Z

@jeremymeng It works for Rollup with TypeScript, but for Rollup with JavaScript , execute rollup --config successfully, when accessed from a browser, the following error occurs:

v-jiaodi · 2025-01-07T06:40:37Z

For Parcel with Javascript, run parcel index.html works, but run parcel build index.html, get error as follow:

jeremymeng · 2025-01-07T18:34:20Z

@v-jiaodi interesting! Can you look at the Sources tab of your browser and show where export is? In my bundle.js there's no export keyword. You can also try changing the format from esm back to iife.

Oh I DID make some changes to the pet store client by add files section to pack.

diff --git a/petstore/clients/javascript/package.json b/petstore/clients/javascript/package.json
index ac5cb12..8f3deda 100644
--- a/petstore/clients/javascript/package.json
+++ b/petstore/clients/javascript/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unbranded/petstore",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "A generated SDK for PetStoreClient.",
   "engines": {
     "node": ">=18.0.0"
@@ -277,6 +277,11 @@
       }
     }
   },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ],
   "main": "./dist/commonjs/index.js",
   "types": "./dist/commonjs/index.d.ts",
   "module": "./dist/esm/index.js"

jeremymeng · 2025-01-07T20:00:35Z

@v-jiaodi I updated the bundling samples in the same PR. If you are still having issues please share a repro project.

v-jiaodi · 2025-01-09T02:31:40Z

For Parcel with Javascript, run parcel index.html works, but run parcel build index.html, get error as follow:

@jeremymeng The same issue still exists for Parcel with Javascript now. This is my repro project: https://github.com/v-jiaodi/petstore

jeremymeng · 2025-01-09T18:27:40Z

@v-jiaodi I made some changes to your project and was able to build for parcel/js. There was some error in the first build (known issue) but second build is green. I did not see the same error as the one in your screenshot.

diff --git a/parcel/js/index.html b/parcel/js/index.html
index a4bba5f..9126607 100644
--- a/parcel/js/index.html
+++ b/parcel/js/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Azure SDK Storage Example</title>
-    <script src="index.js"></script>
+    <script type="module" src="index.js"></script>
   </head>
   <body>
       <h1>Azure SDK Storage Example</h1>
diff --git a/parcel/js/index.js b/parcel/js/index.js
index 9900ea0..17eb532 100644
--- a/parcel/js/index.js
+++ b/parcel/js/index.js
@@ -1,16 +1,16 @@
-const { PetStoreClient } = require("@unbranded/petstore");
+import { PetStoreClient } from "@unbranded/petstore";

 const client = new PetStoreClient("http://localhost:5118", {

diff --git a/parcel/js/package.json b/parcel/js/package.json
index 1ce6673..40a63a2 100644
--- a/parcel/js/package.json
+++ b/parcel/js/package.json
@@ -2,7 +2,6 @@
   "name": "example",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

Result:

 yumeng@CPC-yumen-VZ41N C:\....\js  main  dir

    Directory: C:\working\petstore-jiaodi\parcel\js

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---            1/9/2025 10:12 AM            301 index.html
-a---            1/9/2025 10:11 AM            504 index.js
-a---            1/9/2025 10:14 AM            456 package.json

 yumeng@CPC-yumen-VZ41N C:\....\js  main  npm install

added 5 packages, and audited 7 packages in 2s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 yumeng@CPC-yumen-VZ41N C:\....\js  main  parcel build .\index.html
⠧ Building index.js...
[Error: ENOENT: no such file or directory, open 'C:\working\petstore-jiaodi\client\node_modules\@typespec\ts-http-runtime\src\logger\logger.ts'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\working\\petstore-jiaodi\\client\\node_modules\\@typespec\\ts-http-runtime\\src\\logger\\logger.ts'
}
[Error: ENOENT: no such file or directory, open 'C:\working\petstore-jiaodi\client\node_modules\@typespec\ts-http-runtime\src\logger\debug.ts'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\working\\petstore-jiaodi\\client\\node_modules\\@typespec\\ts-http-runtime\\src\\logger\\debug.ts'
🚨 Build failed.

Error: ENOENT: no such file or directory, open 'C:\working\petstore-jiaodi\client\node_modules\@typespec\ts-http-runtime\src\logger\logger.ts'

  Error: ENOENT: no such file or directory, open 'C:\working\petstore-jiaodi\client\node_modules\@typespec\ts-http-runtime\src\logger\logger.ts'

Error: ENOENT: no such file or directory, open 'C:\working\petstore-jiaodi\client\node_modules\@typespec\ts-http-runtime\src\logger\debug.ts'

  Error: ENOENT: no such file or directory, open 'C:\working\petstore-jiaodi\client\node_modules\@typespec\ts-http-runtime\src\logger\debug.ts'

 yumeng@CPC-yumen-VZ41N C:\....\js  main  parcel build .\index.html
✨ Built in 1.04s

dist\index.html              276 B    512ms
dist\index.7188ddd0.js    51.25 kB    377ms
 yumeng@CPC-yumen-VZ41N C:\....\js  main 

v-jiaodi · 2025-01-14T06:21:55Z

@MaryGao @jeremymeng Double checked and found that the same error still occurred with the above changes. I'm not sure if it's my environmental issue.

github-actions bot added the needs-triage Workflow: This is a new issue that needs to be triaged to the appropriate team. label Jan 6, 2025

MaryGao mentioned this issue Jan 6, 2025

TypeScript Client Emitter Incorrectly Generates Browser Code with Direct Module Imports and Missing getClient Implementation Azure/autorest.typescript#2974

Open

jeremymeng self-assigned this Jan 6, 2025

jeremymeng added Client This issue points to a problem in the data-plane of the library. Docs labels Jan 6, 2025

github-actions bot removed the needs-triage Workflow: This is a new issue that needs to be triaged to the appropriate team. label Jan 6, 2025

MaryGao mentioned this issue Jan 7, 2025

[Docs] improve rollup section of the bundling guide #32440

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fail to bundle when using Rollup for esm libraries in browser environment #32430

Fail to bundle when using Rollup for esm libraries in browser environment #32430

v-jiaodi commented Jan 6, 2025 •

edited

Loading

MaryGao commented Jan 6, 2025

jeremymeng commented Jan 6, 2025

v-jiaodi commented Jan 7, 2025 •

edited

Loading

v-jiaodi commented Jan 7, 2025

jeremymeng commented Jan 7, 2025

jeremymeng commented Jan 7, 2025

v-jiaodi commented Jan 9, 2025

jeremymeng commented Jan 9, 2025 •

edited

Loading

v-jiaodi commented Jan 14, 2025

Fail to bundle when using Rollup for esm libraries in browser environment #32430

Fail to bundle when using Rollup for esm libraries in browser environment #32430

Comments

v-jiaodi commented Jan 6, 2025 • edited Loading

MaryGao commented Jan 6, 2025

jeremymeng commented Jan 6, 2025

v-jiaodi commented Jan 7, 2025 • edited Loading

v-jiaodi commented Jan 7, 2025

jeremymeng commented Jan 7, 2025

jeremymeng commented Jan 7, 2025

v-jiaodi commented Jan 9, 2025

jeremymeng commented Jan 9, 2025 • edited Loading

v-jiaodi commented Jan 14, 2025

v-jiaodi commented Jan 6, 2025 •

edited

Loading

v-jiaodi commented Jan 7, 2025 •

edited

Loading

jeremymeng commented Jan 9, 2025 •

edited

Loading