Project generation with --scripts-version=react-native-scripts-ts and --with-web-support not working

[codeflowee]

Description

When generating new project with create-react-native-app my-new-app --scripts-version=react-native-scripts-ts --with-web-support

Observed Behavior

I ran npm run web and problems were following:

• Wrong path for index file in webpack config

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
Module not found: Error: Can't resolve 'path-to/payrest/my-new-app/src/index.js' in 'path-to/payrest/my-new-app'
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

For this I just changed

entry: path.resolve(appDirectory, 'src/index.js'),

to

entry: path.resolve(appDirectory, 'src/index.tsx'),

• After changing entry problems with registerServiceWorker.js, it should be changed to typescript relevant, for an example I took one generated with create-react-app and changed to registerServiceWorker.ts

• Need to install yarn add @types/react-dom -D to get rid of TypeScript errors in index.tsx

• Then when running npm run web once again I get:

ERROR in ./src/index.tsx
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import registerServiceWorker from './registerServiceWorker';
|
| ReactDOM.render(<App />, document.getElementById('root'));
| registerServiceWorker();
|
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.tsx

This is the place where I stopped.

Is there any easier solution to get it running?

Environment

• npm ls react-native-scripts-ts: [email protected]
• npm ls react-native: [email protected]
• npm ls expo: [email protected]
• node -v: v8.11.3
• npm -v: 6.4.0
• yarn --version: 1.9.4
• watchman version: "version": "4.9.0"

1. Operating system:

ProductName:    Mac OS X
ProductVersion: 10.13.6
BuildVersion:   17G65