Can't set breakpoints on NPM Link'ed library - reactjs

I learn React JavaScript and now I have this problem
I Fork the notistack library in GitHub then download my fork with Git Desktop so the project are on Windows 10 here D:/git/notistack.
After following npm-link doc it all work ok I can debug run the notistack library typescript project in VScode.
I "npm link" on my notistack library and "npm link notistack" in my ReactJs project all standard procedure and I can debug run the library ok.
I make changes and rebuild notistack library and I see it's working ok.
But when I set up launch.json like this, with the runtimeArgs, that suppose to enable debugging I can't make breakpoints work in the Library.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "https://localhost:6545",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--preserve-symlinks"
],
}
]
}
I set breakpoints in the ReactJs project node_module/notistack library but VSCode is setting them as unbound breakpoints.
I suspekt it has something to do with that that notistack library is a Typescript project maybe and I link to a ReactJs project. any idea?
Please advice what I need to check and do?

I looked this up, and saw some possible fixes,
Did you try disabling this setting in VSCode?
"debug.javascript.usePreview": false
Try these properties to your launch.json file
{
"trace": true,
"sourceMaps": true,
"webRoot": "${workspaceFolder}/src",
}
Restarting VSCode or Downgrading the version
Run -> Disable All Breakpoints, then Enable All Breakpoints

None of the solutions I saw for this problem worked for me. I am a windows user ; I precise cause it works without this solution, on linux, for my colleagues.
So I tried to found a configuration that works, the important parameter is outFiles :
"outFiles": [
"${workspaceFolder}/**/*.js",
"**/my-npm-linked-library/**/*.js"
"!**/node_modules/**",
]
The second line of outFiles array is the most important. You can adapt the path to one who match better with the project you work on.
The order of the paths is important, here "!**/node_modules/**" is the last one cause we don't want to add "**/my-npm-linked-library/node_modules/*.js" in our outFiles.
! Important note ! : You must remove "--preserve-symlinks" and "--preserve-symlinks-main" inside runtimeArgs parameter. My understanding about that is limited, but it doesn't work whith these options.

Try adding the --preerve-symlinks-main to the runtimeArgs. It may solve the problem.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "https://localhost:6545",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--preserve-symlinks",
"--preserve-symlinks-main"
],
}
]
}
If you wanna read the docs before implementing, here is the link: https://nodejs.org/api/cli.html#cli_preserve_symlinks_main

This can be a difficult question to answer without an example repo to view your setup. For example we don't know if you're trying to debug something for SSR or Client.
First question, are you debugging this module because it's not showing up in your App? If that's the case, and you're using Webpack to compile you may need to try resolve.symlinks: true.
Generally speaking, I try to debug my code via the software I'm using to view the compiled code. For React projects, that's usually a Browser. For stuff like Unit tests, debugging within VSCode is handy. The below suggestions are for debugging via the Browser.
For SSR
Any node_modules should show up in your Sources panel, just as they would on your file system.
Here's an article on setting Chrome up to debug Server code.
Basically, start your Server with the --inspect flag.
In an empty Browser tab go to chrome://inspect
If the Server was started with --inspect, it'll be listening for a debugging session to connect, and you should see your Server listed under the Remote Target section.
Some articles suggest clicking on the item listed under Remote Target, but I just use that as an indicator that my Server is listening. Instead I click on the Open dedicated DevTools for Node. Doing that has the same result, with the benefit of not having to reopen a debugging window if your Server restarts via something like nodemon.
Navigate to the Sources tab, and you can search for a specific source file or module to place a breakpoint in.
For Client
You'll have to ensure that your compiler (Webpack, Rollup, Parcel - whatever you use), has source maps set up correctly. Also, compilers may have default settings to strip out any inlined debugger; statements, so you'll need to look into that and disable that when building for Local.
If your source maps are set up, you should be able to go to the Sources tab (in Chrome's Devtools) and search for the file you want to debug and place some breakpoints.
If source maps aren't set up, you most likely have a giant bundle file with all your node_modules and source files all compiled together (which could be why your breakpoints aren't firing currently).
In this case, you can try adding a debugger; line within your node_modules file, and see if the debugger stops now. Don't forget to reset the node_modules file after this testing step, it was purely for debugging and shouldn't remain of course.

Related

Debugging a react app shows main.chunk.js instead of sources

First of all, I'd like to admit that I'm relatively new to react, node, npm and etc. And I learn it when I have free time. I saw similar topic but answers there don't work.
I use Visual Studio code. I created react app using create-react-app cli command.
To start debugging I use 'npm start' command and then I start debugger in visual studio code with following launch config:
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"url": "https://localhost:3000/",
"webRoot": "${workspaceFolder}",
}
It works as expected - breakpoints work, VS code shows sources. But if I do any change in the sources and save it VS code starts showing main.chunk.js instead of my sources. main.chunk.js is understandable but I believe it can be fixed.
I have spent couple of weeks on this issue and you are my last hope :)
I guess after recompiling changed source file something breaks. Seems like it can't find sources or map to source file. I tried to find something that can point to sources. I found sourceMapPathOverrides property of launch config and set it to:
"sourceMapPathOverrides": {
"/src/*": "${workspaceRoot}/src/*"
}
But it didn't help.
I thought it might be related to src folder in the solution. I tried to change "webRoot" to "${workspaceFolder}/src" but it didn't help.
I tried to set root folder in the browser's dev tools as advised somewhere here.
Using .scripts in VS code debug console I checked loaded scripts, and it says that main.chunk.js is mapped to App.js.
When I do a change in App.js instead of main.chunk.js it maps hot-update.js file to App.js.
And looks like main.chunk.js isn't mapped to App.js anymore.
So how can I fix it?)

Debugging a React Component Library in one vscode window while symlinked to a host application

Summary
I have a unique situation where we have created a (for lack of better term) "micro-ui" as a React component. The UI receives props so it can dynamically configure itself to work within several of our larger applications. Due to the nature of it being used in several applications, we have made the decision to distribute it as a component library that exports a single component. The implementation of it works really well, but the debugging has become a bit difficult/non-existent.
Currently we are using npm link to develop the dependency application locally, while running it within the host application. This has worked well, but we have had some issues with source mapping and getting breakpoints to catch. We have solved the source mapping problem with some Webpack configurations, but the breakpoints still won't catch within the linked dependency application. Currently the debugger is attached to the running host application, and the dependency application is simply linked as a local dependency. In an ideal world I would be able to find a solution that allows me to place a breakpoint either in the host application or the dependency application, and it would catch within the debugger.
Attempts So Far
My current attempt is to debug directly within vscode, and I think I am almost there.
So far I have tried several versions of a launch.json file, and have settled on one that works really well when attaching the host application (shown below).
As you can see, I have attempted to add mapping to the sourceMapOverrides key to see if I can explicitly point the node_modules folder for the dependency to the build folder in the root of my dependency project. I have tried this mapping a couple of different ways, but it doesn't catch the break point within the linked application. In addition there are no obvious errors that are thrown, so I am unable to tell if my configuration is invalid. I am certain that I am missing something obvious, but after searching all day I can't seem to find a good solution.
Thanks all in advance for your time and help, and please let me know if you need additional information.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"runtimeArgs": ["--preserve-symlinks"],
"sourceMapPathOverrides": {
"${webRoot}/node_modules/<dependency_project>/build": "/Users/<USER>/<path_to_dependency_project>/build",
}
}
]
}

Breakpoints in vscode debugger often fail for a React application

My React application is written in Typescript and I debug it using Chrome. After a fresh start of the application everything works fine. I can set breakpoints and the debugger stops at them.
The problems appear when I change source code. Existing breakpoints are moved to a wrong line and when I try to set new breakpoints they cannot be resolved. I have to close Chrome and re-open it to make things work again. My launch config is:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Shell GUI",
"url": "https://localhost:3001",
"webRoot": "${workspaceFolder}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///build/*": "${webRoot}/*"
}
}
]
}
I tried to fix the issue by specifying source map overrides, but that has not improved the situation at all. And if I haven't created a production build yet then there's no build folder at all. To me it looks as if Chrome doesn't get code changes (assuming here that breakpoints are evaluated by Chrome).
What do I have to change to make debugging working correctly, even after source code changes?
Unfortunately this is a known issue with create-react-app at the moment:
There's a link to track the issue here: https://github.com/facebook/create-react-app/issues/6074

Find original source file path from inspect element in dev tools

I am trying to add accessibility to a large web application built with react and webpack. This requires going back to the source files from the app. Is there a way to see which file the code originally came from? Inspect element and view source are nice but I can't find the path to the source file where the code was generated from. Is there a way to do this in dev tools (chrome or firefox developer edition) or am I stuck with searching my entire project src folder for code that will point me to the file? It is a single page application so it is not as easy as checking the url.
EDIT: we also use babel
EDIT2: changed name to clarify I am looking for the original source code path to the file
for that you have to use .babelrc and add this line into file
"sourceMaps": true
after adding this in chrome > source tab it will show all the files with same name as code and the code also will be in es6 or above (same as what you write).
example config:
{
"presets": ["es2015"],
"plugins": [
"transform-object-rest-spread",
[
"import",
{
"libraryName": "lib",
"libraryDirectory": "./src"
}
],
["module-resolver", {
"root": ["./src"],
"alias": {
"database": "./src/database",
"localization": "./localization",
"utils": "./utils"
}
}]
],
"sourceMaps": true
}
Let me know if you have any other issue still.
For getting file path you can right click on the file title tab and click on "Reveal in sidetab"
if you want to open file just press cmd + p and search for file name there you will see 2 files with same name. you have to open one witch dont have webpack-internal prefixed.
Also you can open side tab and there you will find your same folder structure as you do have in your project. in webpack dir.

What exactly I should do to make 'angular' resolved in .ts file in WebStorm

I wonder.. what exactly I should do to make WebStrom (or IntelliJ IDEA) resolve my 'angular' variable.
I follows this guy but that maybe deprecated already.
On my vendor.d.ts:
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/angularjs/angular.d.ts" />
My package json:
{
"name": "angular_ts",
"version": "0.1.0",
"description": "",
"repository": {},
"dependencies": {
"grunt": "~0.4.5",
"grunt-ts": "~3.0.0"
}
}
My issue on that screenshot ('angular' is not resolved.. can not go to definition of it, as a result - multiple implementations of 'module'):
So, what exactly I should do to make 'angular' resolved in .ts file in WebStorm?
UPDATE:
I do not have yet angularjs sources in my project. But one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.
You have to do a few things to get this to work correctly. I don't know what that tutorial told you to do, but it's not the WebStorm usual way of doing it.
Firstly, you need to make WebStorm ignore all the AngularJS source files in your project. This is why you're getting the multiple implementations warning.
Open your "project" side panel that displays the file tree.
Find where you put your angular.min.js source files, and right click the file.
Select "Mark as Plain Text". WebStorm will now ignore that file from intellisense for JavaScript.
You have to now add AngularJS to your list of External Libraries for that project.
Click "File / Settings"
Expand the "Languages & Frameworks" node
Expand the "JavaScript" node
Select the "Libraries" section.
This is where you install third-party TS files for libraries. Select the "angularjs-DefinitelyTyped" library, but this doesn't come with WebStorm. You have to download and install it.
Click the "Download..." button.
Change the dropdown on the dialog from "Official libraries" to "TypeScrypt community stubs".
Find "angularjs", select it and click "Download and Install".
That's basically what I do. The key is to exclude the JS files in your project that will interfere with intellisense.
When you install external libraries to a WebStorm project via the settings. It doesn't actually add those files to the project. They are only added to the intellisense space used by the IDE.
Ok.
Since I did not have yet angularjs sources (yet) in my project.
And one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.
My solution is to remove node_modules from the Project Structure -> Libraries there was reference to 'node_modules' (also)..
But it is basically the same principle as Mathew suggested.
(Hope that will not break another stuff in the project)

Resources