Comments (27)
Thanks @mikebridge! That was the missing link. Breakpoints are working now in Visual Studio Code!
From that link:
In your
launch.json
, changewebpack:///src/*
towebpack:///./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.
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.
Related Issues (20)
- Browserlist error
- CRA 2.0 HOT 31
- Include nodejs v8 for for Travis CI build
- Remove dependency on babel HOT 2
- Using jest-extended? HOT 1
- Husky hooks not working HOT 1
- Update webpack-dev-server HOT 10
- Add documentation detailing differences between CRA 2.0 and CRA-TS HOT 10
- Source Maps don't work for `js` or `jsx` files in live dev mode.
- Version 4.0.8: Internet Explorer no working anymore HOT 2
- Build process is almost 20 minutes long HOT 1
- postcss support? HOT 1
- Why is Jest's version hard coded to "20.0.4"? HOT 1
- Jest doesn't work when I add lint-staged
- Maintenance
- Tslint rules are barriers to entry HOT 2
- [Help] Compatibility IE + Firefox old versions problems
- Are 4.X.X versions are legit? HOT 1
- Jest doesn't resolve absolute paths from tsconfig HOT 1
- npm start dont work on freeBSD
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app-typescript.