create-react-appで作成したReactアプリが起動できない

npx create-react-app my-appでReactのアプリを作成しVSCodeで開いて実行しようとしたところ下記のエラーが発生しました。
作成してからコードはいじっておらず原因が分かりませんので教えて下さい。
OSはWindowsです。

Uncaught SyntaxError c:\Users\デスクトップ\作業用フォルダー\react\my-app\src\App.js:1
import logo from './logo.svg';
^^^^^^

SyntaxError: Cannot use import statement outside a module

エラーの箇所のApp.jsの序盤を下記にのせます。

App.js
1import logo from './logo.svg';
2import './App.css';
3
4function App() {

試したことは
package.jsonに "type": "module",を追加することですが、それをするとエラメッセージが下記に変わりました。

C:\Program Files\nodejs\node.exe .\src\App.js
Uncaught SyntaxError SyntaxError: Unexpected token '<'

npm startを実行したところサーバーは起動したのですがhttp://localhost:3000/を開いたら画面に下記のようなメッセージがでてきました。

The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./src/index.js 8:0-24
Module not found: Error: Can't resolve './App' in 'C:\Users\デスクトップ\作業用フォルダー\react\my-app\src'
Did you mean 'App.js'?
BREAKING CHANGE: The request './App' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./src/index.js 9:0-48
Module not found: Error: Can't resolve './reportWebVitals' in 'C:\Users\デスクトップ\作業用フォルダー\react\my-app\src'
Did you mean 'reportWebVitals.js'?
BREAKING CHANGE: The request './reportWebVitals' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 2 errors