Menu
I have set up a new project using npx create-react-app my-app --template typescript and I haven't changed any config settings.
If I type some code that has a TS error, my IDE (VS Code) will show the error. However, when I run start/build I do not get any compilation errors.
Further to this, npm run build does fail with the error when run on our GitLab CI/CD pipeline.
I have checked my TS versions, both in the project and where my global module is, both are the same version (4.1.3).
As I said, I haven't made any changes to what create react app has generated and I have tried creating a new project and get the same results. Does anyone have any ideas?
EDIT - To add to this, if I run tsc at the root I get the compilation errors, but npm start I do not.
EDIT 2 - This is my scripts in package.json (untouched from what CRA gives us)
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
657
New App From Scratch If you're building a new app and using create-react-app , the docs are great: You can start a new TypeScript app using templates. To use our provided TypeScript template, append --template typescript to the creation command.
The next time you get a white screen after deploying a React app, remember the steps you've learned today: Check the browser's console for errors. Check your javascript bundle files are loading properly. Update the “homepage” setting in your package.
Using Typescript to build our React applications will make our react applications more predictable as we will be able to catch a lot of errors at runtime (during compilation). In this article, I’ll explain the following while building a simple Todo Application:
parsing error, unexpected token, syntax error, create-react-app, private access modifier, failed to compile, typescript syntax error and tons of permutations of these. Edit App.tsx and add the following code under the import statements and above the function App () ... line:
Type cmd + shift + p to open quick settings in VSCode, and look for “TypeScript: Select TypeScript version…”. Click that, and choose “Use Workspace Version.” Hopefully now you are free of any errors, your code is compiling and you’re ready to get a fantastic app going!
React gives us access to some in-built types that we can use; one of them is the React.FC type which we use to tell Typescript that this function returns JSX and is a functional component. React.FC is a general type which means it takes in another Type.
I found I had to do this to see the tsc errors, but I don't like it
"test": "tsc && react-scripts test",
Edit: Looks like this is, in-fact, the suggested workaround according to https://github.com/facebook/create-react-app/issues/5626
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
