Debugging a react-library build using Vite

Question

I have a library build using reactJS and vite https://github.com/gsharath/sample-for-st-lib , which I am using in another react project https://github.com/gsharath/sample-for-st . When I do npm install , it installs the minified version of the library, which seems good so far.

This is what I have in my sample-for-st-lib library:

export const Button = ()=>{
  return(
    <button>My Button</button>
  )
}

This is my vite.config for my library

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: {
        components: path.resolve(__dirname, './src/components/index.js')
      },
      name: 'sample-for-st-lib',
    },
    rollupOptions: {
      external: ['react','react-dom'],
    },
    emptyOutDir: true,
  },
  plugins: [react()],
});

I am referring this in my project using:

import { Button } from "sample-for-st-lib/components"

function App() {

  return (
   <>
    <Button />
    Test library
   </>
  )
}

Now while doing dev work and to debug issues, I am using npm link to create link between the library and project, so that

• I need not publish the package every time
• Assumed, I can open developer tools and find out the component from my-new-package and debug it in developer tools ( chrome ). Adding a screenshot of dev tools where I can find the component that I am looking for.

I looked at sourcemap option in vite.config which doesn't seem to be helping here.

I understand that since I am using this as a library, we need to rely on storybook to see how the components looks during dev mode or write something in library as a wrapper which helps me to debug it there, but I am looking to find out a way to debug the components from where my library is used. Did someone encounter this before and have something to guide me.

Any help is highly appreciated. Sorry for the not-so-good-formatting

Answer 1

In order to help debug during development with your current workflow, there are two key things to change from the github repos you linked to:

• npm uninstall sample-for-st-lib within sample-for-st (so you can properly link them with npm)
• add sourcemap to the vite build in sample-for-st-lib, ideally behind some env var

From fresh checkouts, starting with sample-for-st-lib:

1. npm install
2. Add sourcemap to your vite build ('inline')
3. npm run build
4. npm link

Now a fresh checkout of sample-for-st:

1. npm install
2. npm uninstall sample-for-st-lib
3. npm link sample-for-st-lib
4. npm run dev

From here you can go back to sample-for-st-lib make changes to Button and then, here is the key, remember to run npm run build, so the changes can be picked up by the vite dev server running for sample-for-st.

Intentionally cause an error in Button by calling a function that doesn't exist, rebuild, and you should be able to see the source code for Button in your dev tools.