Create-react-app: Loading sourcemaps in a monorepo

[ggascoigne]

I have a mono repo structured like this:

.
├── node_modules
├── package.json
├── packages
│   ├── app
│   │   ├── dist
│   │   │   ├── App.css
│   │   │   ├── App.js
│   │   │   ├── App.js.map
│   │   │   ├── index.js
│   │   │   └── index.js.map
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── App.css
│   │   │   ├── App.js
│   │   │   └── index.js
│   │   └── yarn.lock
│   └── ui
│       ├── node_modules
│       │   └── @taxi
│       │       └── app -> ../../../app
│       ├── package.json
│       ├── public
│       ├── src
│       ├── tsconfig.json
│       └── yarn.lock
├── tsconfig.build.json
├── tsconfig.json
├── tslint.json
├── tslint.prod.json
├── tslint.test.json
├── yarn-error.log
└── yarn.lock

the packages/app/package.json file contains:

{
  "name": "@taxi/app",
  "version": "1.0.0",
  "description": "Main application",
  "private": true,
  "main": "/dist/index.js",
  "license": "MIT",
  "peerDependencies": {
    "react": "^16.5.1",
    "styled-components": "^3.4.6"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  }
}

Peer dependencies (i.e. other packages) are linked into node_modules using lerna link.

packages/app is built with:

BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .js,.ts,.tsx --no-comments --copy-files

packages/ui is a create-react-app application. The app runs correctly and loads objects from packages/app seemingly fine.

I have sourcemap files for the files in packages/app/dist, but I can't get create-react-app to appear to use them correctly. I say correctly, since it does appear to be using them (in Chrome), since the debugger is finding the sourcemap and mapping from the webpack hosted chunk file to the file in dist, but I want to map it to the file in src. I'd really like to debug the source and not the transpiled code.

This seems like a pretty common use case, without ejecting, is there something that I can do to get this working?

[ggascoigne]

I've been looking at the reverted monorepo PRs (#3741, #3997, #4001), which appear to do exactly what I'd have desired. I do understand why they were pulled from V2, but they were reverted with a comment that the issue would be solved by "excellent documentation", and as yet, I can't see any, excellent or otherwise.

Can someone who understand how, write some? This is frustrating since my build basically works, but not being able to get sourcemaps working really is a huge stumbling block - and I expect that fixing sourcemaps is specifically an issue with the create-react-app managed webpack config.

[dogancana]

@ggascoigne did you find any solution for this? I'm currently facing the exact same issue. I tried inline source maps and then started to go over open issues, no luck so far.

[artyomsv]

Same here, hope to get some answers in this thread

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[bugzpodder]

[EDIT] actually build suffers the same problem. I was building it directly from source. I agree that at some point first class monorepo support would be great to have.

[morgs32]

@ggascoigne looking at those PRs above, can you spot which webpack/babel options made this possible? If I were to eject and try to remedy this myself?

[morgs32]

This is also breaking any support from services like bugsnag or sentry. They don't think that the sourcemaps match up with the code (and they are right).

[morgs32]

The sourcemaps are right in dev though...

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.