Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Source Maps in node_modules package

See original GitHub issue

I haven’t had much luck being able to debug/set breakpoints in source compiled with create-scripts and thought my use case may be somewhat unique, so I wanted to ask it here. If it’s something I should take up with VSCode, I will, but I needed to start somewhere.

My setup is VS Code with an app created by create-react-app. I can debug it just fine, and I hit my breakpoints, as expected, so source maps are indeed working. However, I recently moved some of our components out into its own libraries, so they can be published separately and used by multiple apps. So, now they look like (I’ve simplified the example):



Now, I can only set breakpoints in lib/componentA.js instead of src/componentA.js (pre-compiled source). Is this something that I should be able to get working?

Any direction would be helpful. Thanks in advance!

Edit: perhaps it’s related to ?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:34 (11 by maintainers)

github_iconTop GitHub Comments

JordanPawlettcommented, Feb 12, 2021

On going for over a year now. Has anyone got any interest in fixing support for source-map from imported modules? My dev team and I use a private npm registry to split separation of concern into many packages, and i’m positive many many others do too! I imagine this issue has led to many people moving away from CRA.

justingrantcommented, Dec 16, 2019

Also, if you’re looking for a workaround in the meantime, I use customize-cra to inject source-map-loader into my CRA config. Below is a simplified version of the config-overrides.js file that I’ve been using for the last few months.

const { override, useEslintRc, addWebpackModuleRule, addWebpackPlugin } = require('customize-cra');
const { produce } = require('immer');

const updateWebpackModuleRules = config => {
  const rules = config.module.rules;
  if (rules.length !== 3) {
    throw new Error('Unexpected CRA config. Exiting.');

  const newConfig = produce(config, cfg => {
    const sourceMapLoader = {
      enforce: 'pre',
      exclude: /@babel(?:\/|\\{1,2})runtime/,
      test: /\.(js|mjs|jsx|ts|tsx|css)$/,
      use: 'source-map-loader',
    const rules = cfg.module.rules;
    rules.splice(1, 0, sourceMapLoader);

  return newConfig;

const overrides = [updateWebpackModuleRules];
module.exports = override(...overrides);

If you’re not familiar with customize-cra, here’s how to use the code above:

  1. save it into config-overrides.js in your project’s root folder
  2. install the following packages: npm i -D github:volune/source-map-loader#fixes immer customize-cra react-app-rewired
  3. Update your package.json scripts to use react-app-rewired instead of react-scripts. Like this:
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
Read more comments on GitHub >

github_iconTop Results From Across the Web

Source maps in Node.js. Supporting the many flavors of…
The Source Map V3 specification. Source maps provide a method for translating from generated source back to the original, via meta-information ...
Read more >
source-map - npm
This is a library to generate and consume the source map format described here. Use with Node. $ npm install source-map. Use on...
Read more >
How to use source maps in node js? - Stack Overflow
I've seen that there are mapping files in the tronweb\dist directory. I started again using --inspect and opened the chrome ...
Read more >
Node modules source maps specifying location without ...
I'm using cheap-module-source-map and I can understand that webpack might not check the sources specified in the package's source map file.
Read more >
Source Maps for Node.js - Sentry Documentation
Uploading Source Maps to Sentry. We've compiled a list of guides on how to upload source maps to Sentry for the most popular...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found