Is there a way to debug a typescript app? about create-react-app-typescript HOT 27 CLOSED

Thanks @mikebridge! That was the missing link. Breakpoints are working now in Visual Studio Code!

From that link:

In your launch.json, change webpack:///src/* to webpack:///./src/*

from create-react-app-typescript.

Hey! Not 100% sure what you're question is? Typescript is definitely debuggable, and should be source mapped properly.

Have you tried this package yet? If you give it a go and still have issues let me know! 😀

from create-react-app-typescript.

Hello, thanks for fast reply, and sorry for my unclear question.
We usually use the create-react-app with default setup in our team. But we would like to try typescript instead of javascript. So I have create app with your repository and it works nice. But I don't know how to debug this application in the VS Code (I don't have any experience with typescript). I'm curious to know how to debug typescript with this repository webpack setup.

from create-react-app-typescript.

How would you debug it with regular cra? I'm not super familiar with vs code but I'm pretty sure it has debugging capability for typescript built in. Webpack complicates things but then the same thing is true of stock cra.

from create-react-app-typescript.

I'm not sure what you mean by debug?

from create-react-app-typescript.

hey @adam-bernau any progress on this? I'd like to try and help where possible 😄

from create-react-app-typescript.

I am closing this issue, @adam-bernau if you have a more specific question feel free to open a new issue 😄

from create-react-app-typescript.

I'm assuming that what he meant was "How do you debug Typescript code from an IDE like Visual Studio Code?", which is also what I'm trying to do.

create-react-app has a section on debugging in the editor in the README.md, but when I insert the recommended snippet of JSON into Visual Studio Code's launch.json file, although it is able to launch Chrome, I can't set breakpoints.

The breakpoint marker turns grey when you run and mousing over the marker, it shows the message: Breakpoint ignored because generated code not found (source map problem?).

I think we need to change launch.json to point VSC to the source map , but am not sure what that would be.

The snippet added to launch.json was the following:

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "userDataDir": "${workspaceRoot}/.vscode/chrome",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

from create-react-app-typescript.

I haven't tried debugging with VS Code, but it's straightforward to debug apps created with create-react-app-typescript using IntelliJ Ultimate or WebStorm, with no config modifications.

from create-react-app-typescript.

... however I haven't been able to figure out how to step through a jest test---the jest runner is javascript-only. Is there a way to connect to the test runner?

from create-react-app-typescript.

@mindjuice This might be relevant to setting launch.json up with vs-code.

from create-react-app-typescript.

For the record, I am able to debugcreate-react-app-typescript applications from IntelliJ Ultimate 2017.1.2 using the Jest runner ( Run -> Edit Configurations... ->Add -> Jest) by adding "Compile TypeScript" to the "Before launch..." section, and adding the following to package.json (cribbed from createJestConfig.js). This allows me to set breakpoints. Presumably this would work from WebStorm too.

  "jest": {
    "transform": {
      "^.+\\.css$": "react-scripts-ts/config/jest/cssTransform.js",
      ".(ts|tsx)": "react-scripts-ts/config/jest/typescriptTransform.js",
      "^(?!.*\\.(css|json)$)": "react-scripts-ts/config/jest/fileTransform.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.ts"
  }

from create-react-app-typescript.

For the record, after upgrading to react-scripts-ts 2.2.0, my IntelliJ/jest debugging setup conflicts with yarn test / npm test:

> yarn test
yarn test v0.24.5
$ react-scripts-ts test --env=jsdom
Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • transform
  • testRegex
  • moduleFileExtensions
  • setupTestFrameworkScriptFile

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

from create-react-app-typescript.

Any update @mikebridge ?
I have the same message when I want to configure tests for WebStorm IDE. Is there any possibility to run tests script from react-scripts-ts in the WebStorm? Or maybe we should be able to override these options? @wmonk

from create-react-app-typescript.

I'm afraid I don't use webstorm, or vscode so can't really help with these issues. If you can present a valuable PR to help with this stuff I can look at it.

from create-react-app-typescript.

I resolved it with custom jest config:

{
  "transform": {
    "^.+\\.css$": "react-scripts-ts/config/jest/cssTransform.js",
    ".(ts|tsx)": "react-scripts-ts/config/jest/typescriptTransform.js",
    "^(?!.*\\.(css|json)$)": "react-scripts-ts/config/jest/fileTransform.js"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "mapCoverage": true,
  "collectCoverageFrom": ["src/**/*.{ts,tsx}"],
  "setupFiles": ["react-scripts-ts/config/polyfills.js"],
  "testEnvironment": "node",
  "testURL": "http://localhost",
  "transformIgnorePatterns": [
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$"
  ],
  "moduleNameMapper": {
    "^react-native$": "react-native-web"
  },
  "globals": {
    "ts-jest": {
      "tsConfigFile": "./tsconfig.test.json"
    }
  }
}

from create-react-app-typescript.

@dakolech I'm using IntelliJ 2017.3.2 and it looks like it currently does not work for me from within the IDE. Last time I had it working I think I was running it via npm test with the --runInBand flag.

from create-react-app-typescript.

@dakolech I tried my original package.json setup from this comment and it looks like it now works again in IntelliJ 2017.2.3 with TypeScript 2.4.2. I'm able to set a breakpoint too.

from create-react-app-typescript.

@mikebridge do we still need your custom config for debugging jest in webstorm?

from create-react-app-typescript.

@quantuminformation I've been doing all my debugging on the console lately. :(

from create-react-app-typescript.

Does Visual Studio Code not work for debugging?

from create-react-app-typescript.

yeah console for me for now

from create-react-app-typescript.

Had anyone any luck with the jest debugging in Webstorm? The console is not fun for debugging.

from create-react-app-typescript.

Facebook added debugging instructions. They worked great for me using visual studio code.

• facebook/create-react-app@b555192

from create-react-app-typescript.

@bootstraponline did you have any luck with this and typescript?

from create-react-app-typescript.

Yeah, it worked fine on Visual Studio code. I debugged my TypeScript project without issue.

from create-react-app-typescript.

Ok thx, I've asked webstorm for some tips.

from create-react-app-typescript.