Hivaga
Hivaga

Reputation: 4526

React appliction production build NX/Vite/Rollup with Sourcemaps from external npm package

Here is the case I have a React application which is within NX Monorepo

("@nx/react": "19.5.7", "@nx/rollup": "19.5.7", "@nx/vite": "19.5.7"). The application is built with Vite which under the hood uses Rollup for production builds. The React application uses my NPM package, and here is the problem. This NPM package consists of 2 files index.mjs (entry-point) of the package and library.js (actual-code), this NPM package was build from several *.ts files as well as other npm packages and but it has source-maps which are correct (checked those with Source Map Visualizer plugin in Visual Studio Code). Basically both index.mjs and library.js both have index.mjs.map and library.js.map which link correctly to the original source files (*.js and *.ts). The problem is that when this NPM Packages is used within the React Application, Rollup does not correctly build the application's sourcemaps, it produces a working JS code from the NPM Package as part of the app but it does not correctly make a linkage between the js and the NPM Package's Typescript files. I have tried several plugins like rollup-plugin-sourcemaps, and basically also wrote my own which intercepts the on 'load' hook in rollup the loading of index.mjs and library.js in rollup and provide a sourcemap object but still in the end any linkage to the original Typescript files from which my NPM Package was build is removed from the rollup generated source maps in the Application.

Anyone knows how properly to configure Rollup so that it can follow/include correctly the sourcemaps of 3th party NPM packages used within React application ?

PS It looks to me that rollup is only capable of building correctly source maps only for *.js which is compiled from *.ts at the same build, once Rollup consumes already bundled *.js files it can't use source-maps of those to link them properly to original *.ts files.

Upvotes: 0

Views: 70

Answers (0)

Related Questions