Created a React App using Vite, then ran npm run build and npm run preview, but it's not working. I get a totally blank page and an error that says:
TypeError: e is null and Uncaught TypeError: e is null
My vite.config.js file:
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
My package.json file (if that matters):
{
"name": "homepage",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#vitejs/plugin-react": "^3.1.0",
"vite": "^4.1.0"
}
}
EDIT: Got it solved! The react components in my project had some errors that didn't show up in the webpage created by npm run dev but they were the ones which caused the error. Some of them were component file name not being same as the component function name (the one which gets export default functioned) and importing the same file under two names. All-in-all some of the components had errors that didn't show in the dev window and did in the build. Check your components for errors people.
You have #types installed. Are you using a global typescript? That's not installed.
Also, what does your tsconfig.node.json look like? A valid one is:
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
Make sure your tsconfig.json links to the node tsconfig:
"references": [{ "path": "./tsconfig.node.json" }]
The rest of the code you showed looks fine. I hope that helps!
EDIT** Also take a look at this working example fairly similar to yours, it may help you track the issue down. There's a successfuil build and preview in this sandbox:
https://codesandbox.io/p/sandbox/zen-sammet-imfzl5
Related
I have created a monorepo using yarn#3 workspaces.
My root package.json:
{
"name": "hello-yarn-workspaces",
"packageManager": "yarn#3.1.1",
"workspaces": [
"apps/*",
"packages/*"
],
"devDependencies": {
"#commitlint/cli": "^16.0.1",
"#commitlint/config-conventional": "^16.0.0",
"husky": "^7.0.4"
},
"scripts": {
"postinstall": "husky install",
"prepublishOnly": "pinst --disable",
"postpublish": "pinst --enable"
}
}
The package.json in apps/ui:
{
"name": "ui",
"packageManager": "yarn#3.1.1",
"scripts": {
"dev": "vite"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#tailwindcss/forms": "^0.4.0",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"#vitejs/plugin-react": "^1.1.3",
"autoprefixer": "latest",
"postcss": "latest",
"tailwindcss": "latest",
"typescript": "^4.5.4",
"vite": "^2.7.10"
}
}
I have created a component inside my apps/ui/src folder and when I run yarn workspace ui run dev, the app can be started in the browser.
However, when opening my monorepo in VS Code, it fails to resolve npm packages in import statements:
// Cannot find module 'react' or its corresponding type declarations.ts(2307)
import React, { ReactElement, useState } from 'react'
The same happens for the vite.config.ts in apps/ui
// Cannot find module 'vite' or its corresponding type declarations.ts(2307)
import { defineConfig } from 'vite'
// Cannot find module '#vitejs/plugin-react' or its corresponding type declarations.ts(2307)
import react from '#vitejs/plugin-react'
When opening the monorepo in WebStorm, everything is ok.
The repro repository can be found here.
Update: It looks like it is related to the PnP mechanism. I came across this question and setting nodeLinker: node-modules in .yarnrc.yml followed by yarn install fixed it.
However, the ansers for this question didn't work for me.
I get this error in VS Code after running yarn dlx #yarnpkg/sdks vscode:
The path /Users/alexzeitler/src/hello-yarn-workspaces/.yarn/sdks/typescript/lib/tsserver.js doesn't point to a valid tsserver install. Falling back to bundled TypeScript version.
The files in .yarn/sdks/typescript/lib actually don't exist but I have a file integrations.yml in .yarn/sdks:
# This file is automatically generated by #yarnpkg/sdks.
# Manual changes might be lost!
integrations:
- vscode
Looks like the missing pieces have been due to the PnP configuration:
yarn add --dev typescript ts-node prettier
yarn dlx #yarnpkg/sdks vscode
Add a minimal tsconfig.json:
{
"compilerOptions": {
/* Basic Options */
"target": "es5",
"module": "commonjs",
"lib": ["ESNext"],
/* Strict Type-Checking Options */
"strict": true,
/* Module Resolution Options */
"moduleResolution": "node",
"esModuleInterop": true,
/* Advanced Options */
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true
}
}
Then install this VS Code extension followed by these steps:
Press ctrl+shift+p in a TypeScript file
Choose "Select TypeScript Version"
Pick "Use Workspace Version"
More details can be found in the docs.
I've just used create-react-app to start a new typescript react app and then installed firebase. I ran firebase init, selected the typescript option, enabled es lint and enabled functions.
As soon as I uncommented the boilerplate function code in functions/index.ts, I noticed some warnings in VS Code...
functions/eslintrc.js:
Giving error: "Parsing error: "parserOptions.project" has been set for #typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided"
functions/tsconfig.json:
functions/src/index.ts:
giving error: "Parsing error: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.eslint"
functions/package.json:
{
"name": "functions",
"scripts": {
"lint": "eslint --ext .js,.ts .",
"build": "tsc",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "14"
},
"main": "lib/index.js",
"dependencies": {
"firebase-admin": "^9.8.0",
"firebase-functions": "^3.14.1"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-import": "^2.22.0",
"firebase-functions-test": "^0.2.0",
"typescript": "^3.8.0"
},
"private": true
}
I don't understand these errors. Can someone please help?
Thanks
The first error from TypeScript ESLint is related to not being able to find a project tsconfig.json that matches your functions.
To fix this, we need to tell TypeScript ESLint where the other tsconfig.json is by editing your parserOptions.
.eslintrc.js
// [...]
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": [
"./tsconfig.json",
"./functions/tsconfig.json",
]
}
// [...]
To fix the parsing issue related to JSX for your React files, you must add the jsx compiler option to your tsconfig.json configurations that include JSX. This will likely be your non-function configuration, and you will most likely need to set it to react-jsx for React v17+ or react in all other cases for Create React App.
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx"
// [...]
}
// [...]
}
further to the above excellent suggestion by Evelyn Hathaway , and after I installed just the functions with no hosting and I changed the ".eslingrc.js: file
FROM
.eslingrc.js
parserOptions: {
project: ["tsconfig.json",
"tsconfig.dev.json"],
to
.eslingrc.js
parserOptions: {
project: ["./functions/tsconfig.json",
"./functions/tsconfig.dev.json"],
At last the seemed to work after I spent a frustrating day.....
I'm having an issue in VSCode using the out-of-the-box create-react-app my-app --template typescript project not recognizing any element. I constantly get the error cannot find name xxx with 'xxx' being whatever the HTML element I'm using in the JSX.
What's interesting is that the project will run initially with zero edits. As soon as I actually go into App.tsx and change anything or create a very basic new component it breaks.
Here's a very basic component I attempted to make following this tutorial from the TypeScript Handbook Github.
// src/components/Hello.tsx
import React from 'react';
export const Hello = () => {
return <h1>Hello < /h1>;
};
Once more this project is created directly from the recommended TypeScript template using create-react-app my-app --template typescript. No files were edited.
It came with their own tsconfig.json ready to go.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
Of course they had their own package.json as well.
{
"name": "ts-trial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.52",
"#types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"typescript": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Once more no files were edited - I ran the command, cded into my new project, created Hello.tsx and as soon as I put an element in the return statement it said Cannot find name 'h1'. ts(2304).
Then I went to App.tsx and as soon as I opened it the same error was showing all over too.
I filed an issue on GitHub as I don't see how I could be getting this error honestly. I've searched for hours and most of the solutions I found weren't relevant for my particular issue. Most solutions were forgetting to change file extensions from .js or .ts to .tsx for React. Or they had to specify "#types/node": "^12.0.0" in package.json, or target, lib, module or include in tsconfig.json, all of which I have.
Environment Info:
System:
OS: macOS 10.15.6
CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU # 2.50GHz
Binaries:
Node: 14.6.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.7 - /usr/local/bin/npm
Browser:
Firefox Developer Edition 82.0b7 (64-bit)
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: 3.4.3 => 3.4.3
npmGlobalPackages:
create-react-app: 3.4.1
Code Editor: VSCode
The file extension has to be .tsx in order for this to work.
Setting the VS Code typescript version to the version inside your workspace should fix it.
See: https://stackoverflow.com/a/64976666/6753500
I have renamed my file .tsx, but the problem persisted. it was with how i exported my component.
I tried this and it worked.
My component was
export default InsertDocuments = () =>
I changed it to
const InsertDocuments = () =>
//etc
export default InsertDocuments
or
export const InsertDocuments = () =>
I run into the same problem. I discovered that I had 100 extensions installed in VS Code and one of them was causing the problem. I dont know which one it was but, after I disabled all the extensions, it started working.
In my case, it was HCL AppScan Security extension which was causing trouble. Disabled it and then it worked like charm.
Extra space in close tag < /h1> -> </h1>
I have created basic next.js app using "npx create-next-app" and .eslintrc.json file created to add eslint rules.but it's not working.how to add linting rules to nextjs config
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"React": "writable"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/react-in-jsx-scope": "off"
}
}
I have tried this solution - https://medium.com/#joelmasters/setting-up-eslint-for-nextjs-37163d4cabaa
Update
NextJS now has official guide to add eslint to project: https://nextjs.org/docs/basic-features/eslint
Additionally you need to install ESLint extension.
Also, If you're looking for ESLint with typescript support: https://gourav.io/blog/nextjs-cheatsheet
Old answer:
Install ESLint
npm i eslint --save-dev
Install ESLint plugins:
npx install-peerdeps --dev eslint-config-airbnb
Above single command will install 6 plugins: eslint-config-airbnb, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. You can also install these plugins individually.
Install babel eslint
npm i -D babel-eslint
Install prettier plugin (optional, so that prettier doesn't mess up with linting)
npm i -D eslint-config-prettier eslint-plugin-prettier
Your "devDependencies" should look something like this:
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
Now, create a file .eslintrc.json at root of project.
Paste below config:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"airbnb",
"airbnb/hooks",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
// "plugin:react-hooks/recommended",
// always put prettier at last
"prettier"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true // enable linting for jsx files
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": ["react", "react-hooks"],
"rules": {
// NextJs specific fix: suppress errors for missing 'import React' in files for nextjs
"react/react-in-jsx-scope": "off",
// NextJs specific fix: allow jsx syntax in js files
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
"react/display-name": 1
}
}
Also, install ESLint extension for VSCode.
Reload VSCode window once to get proper linting
ESLint will automatically start detecting errors/warnings in *.js and *.jsx files. If that's not the case then either your project has no linting errors or ESLint is not properly setup.
To test if linting works run eslint command in terminal with folder path i.e. eslint pages/** and notice output.
To disable linting of some files/folders you can create a .eslintignore at the root of project.
.eslintignore:
# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage
Finally, you can also add linting to scripts in package.json as a part of your build/deploy process:
"scripts": {
"lint": "eslint ./components/** ./pages/** -c .eslintrc.json --ext js,jsx",
"lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.json --fix --ext js,jsx",
}
See my current ESLint configuration for NextJS Typescript project: https://github.com/GorvGoyl/Personal-Site-Gourav.io/blob/main/.eslintrc.js
you need to install required npm modules.
with Npm:
npm i -D babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
with Yarn:
yarn add -D babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
Here is related article about that
https://medium.com/#melih193/next-js-eslint-setup-tutorial-for-airbnb-config-c2b04183a92a
Official in-tree examples
As mentioned by GorvGoyl, some better integration was added around Next.js 11.
Although there is documentation at: https://nextjs.org/docs/basic-features/eslint being a eslint newbie I just couldn't understand what I was supposed to do, so I just looked under examples/ and found some actual working code:
examples/with-eslint
https://github.com/vercel/next.js/tree/v12.0.7/examples/with-eslint
Minimal eslint example.
The setup contains:
package.json
{
"name": "with-eslint",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"license": "MIT",
"dependencies": {
"next": "12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"eslint": "^7.24.0",
"eslint-config-next": "12.0.7"
}
}
.eslintrc
{
"extends": "next",
"root": true
}
pages/index.js
const Home = () => (
<div>
<script src="https://fake-script.com" />
<p>Home</p>
</div>
)
export default Home
For example doing:
cd examples/with-eslint
npm install
npm run lint
gives the desired error:
3:5 Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. #next/next/no-sync-scripts
We can modify pages/index.js a bit to add some more cases that we might want to fail:
import React from 'react'
const Home = () => {
let s = 'abc'
s = "abc"
let unused
if (false) {
React.useEffect(() => 1)
}
return (
<div>
<script src="https://fake-script.com" />
<p>Home</p>
</div>
)
}
export default Home
and the results are:
" vs ' on strings: unchecked
unused unused variable: unchecked
conditional React.useEffect: checked. I think this is because it includes the 'plugin:react-hooks/recommended', at: https://github.com/vercel/next.js/blob/v12.0.7/packages/eslint-config-next/index.js#L12
examples/with-typescript-eslint-jest
https://github.com/vercel/next.js/tree/v12.0.7/examples/with-typescript-eslint-jest
Exmple also with typescript.
Note that this example cannot be run in-tree otherwise it fails with:
ESLint couldn't find the plugin "eslint-plugin-jest".
which is must be picking up from repo toplevel:
The plugin "eslint-plugin-jest" was referenced from the config file in "../../.eslintrc.json#overrides[0]".
you have to first copy it outside somewhere like:
cp -rv examples/with-typescript-eslint-jest /tmp
cd /tmp/with-typescript-eslint-jest
But I think this examples is a bit outdated as it is not using the"
"extends": "next",
preset.
My recommended Next 12 typescript + prettier setup
Since the in-tree "examples/with-typescript-eslint-jest" doesn't look very up-to-date, here's a version of it that should be (just without jest):
package.json
{
"name": "with-eslint",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --ignore-path .gitignore --write .",
"type-check": "tsc"
},
"license": "MIT",
"dependencies": {
"install": "0.13.0",
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#types/node": "12.12.21",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.1",
"eslint": "8.5.0",
"eslint-config-next": "12.0.7",
"eslint-config-prettier": "7.2.0",
"eslint-plugin-prettier": "4.0.0",
"prettier": "2.5.1",
"typescript": "4.5.4"
},
"prettier": {
"printWidth": 80,
"semi": false,
"singleQuote": true
}
}
.eslintrc.json
{
"extends": ["eslint:recommended", "next", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
tsconfig.json (autogenerated by Next when you run npm run dev)
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# typescript
*.tsbuildinfo
pages/index.tsx
import React from 'react'
const Home = () => {
let n: number
let s = 'abc'
s = "abc"
let unused
if (false) {
React.useEffect(() => 1)
}
return (
<div>
<script src="https://fake-script.com" />
<p>Home</p>
</div>
)
}
export default Home
With this setup doing:
npm run lint
catches all issues as we would like:
4:7 Error: 'n' is defined but never used. no-unused-vars
6:3 Error: 's' is assigned a value but never used. no-unused-vars
6:7 Error: Replace `"abc"` with `'abc'` prettier/prettier
7:7 Error: 'unused' is defined but never used. no-unused-vars
8:7 Error: Unexpected constant condition. no-constant-condition
9:5 Error: React Hook "React.useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
13:7 Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. #next/next/no-sync-scripts
The prettier errors can be fixed automatically with autoformatting:
npm run format
which automatically patches for us:
--- a/pages/index.tsx
+++ b/pages/index.tsx
## -3,7 +3,7 ## import React from 'react'
const Home = () => {
let n: number
let s = 'abc'
- s = "abc"
+ s = 'abc'
let unused
if (false) {
Running:
npm run type-check
catches the type error:
pages/index.tsx:9:27 - error TS2322: Type 'number' is not assignable to type 'void | Destructor'.
9 React.useEffect(() => 1)
Both npm run lint and npm run type-check are automatically run by npm run build.
Lint is enabled only on pages/, components/ and lib/ by default
As mentioned at: https://nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files
To enable it everywhere in the projects:
module.exports = {
eslint: {
dirs: ['.'],
},
}
I have created a new project of React Native with a typescript template using the official command react-native init MyApp --template typescript (a couple of times) and I can't see the changes I apply when I run the app.
Looks like the hot reload its working on terms of refresh the screen but doesn't apply the changes. In the case I create the app without typescript all its working properly.
I don't get any error so I have no idea what I can do. Below its the package.json in case this help but its basically the autogenerated file from typescript template
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.4"
},
"devDependencies": {
"#types/jest": "^24.0.0",
"#types/react": "^16.8.2",
"#types/react-native": "^0.57.34",
"#types/react-test-renderer": "^16.8.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3",
"ts-jest": "^23.10.5",
"typescript": "^3.3.3"
},
"jest": {
"preset": "react-native"
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": ["node_modules", "babel.config.js"]
}
Any idea how I can get react-native working with typescript. Thanks!
I have find the solution, and basically when you create the react native app using the typescript template in the ./ of your project apperar 2 files named App (App.js and App.tsx) so basically the solution to get this working is go to the index.js and replace
import App from './App'; per import App from './App.tsx';
index.js
import {AppRegistry} from 'react-native';
import App from './App.tsx';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Also you can solve the problem removing the .js file so the index will point to the .ts
Seems like you didn't execute the post installation setup script which takes care of removing the App.js file. Anyway, that's not necessary anymore as with the release of React Native 0.59 the post installation setup script is being executed automatically.