npx create-react-app report errors

Maicarons2022 commented 2 years ago

Hello developer,

I'm a new in the react and while using templates, I got many errors.

env

nodejs:16.14.0 npm/npx:8.6.0 os:windows10

output

init:

$ npx create-react-app smireact --template windows-ui
npm WARN exec The following package was not found and will be installed: create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in D:\GitHub\smireact.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-windows-ui...

added 1395 packages in 3m

Initialized a git repository.

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: smireact@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from react-windows-ui@4.1.0
npm ERR! node_modules/react-windows-ui
npm ERR!   react-windows-ui@"^4.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\xxxxxxxx\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxxxxxxx\AppData\Local\npm-cache\_logs\2022-08-11T14_42_58_602Z-debug-0.log
`npm install --no-audit --save react-windows-ui@^4.1.0 react-router-dom@^6.3.0 web-vitals@^2.1.4` failed

start:

$ npm start

> smireact@0.1.0 start
> react-scripts start

(node:9092) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:9092) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

Failed to compile.

Module not found: Error: Can't resolve 'react-router-dom' in 'D:\GitHub\smireact\src'
ERROR in ./src/App.js 7:0-74
Module not found: Error: Can't resolve 'react-router-dom' in 'D:\GitHub\smireact\src'

ERROR in ./src/App.js 8:0-117
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src'

ERROR in ./src/index.js 6:0-48
Module not found: Error: Can't resolve 'react-windows-ui/config/app-config.css' in 'D:\GitHub\smireact\src'

ERROR in ./src/index.js 7:0-56
Module not found: Error: Can't resolve 'react-windows-ui/dist/react-windows-ui.min.css' in 'D:\GitHub\smireact\src'

ERROR in ./src/index.js 8:0-52
Module not found: Error: Can't resolve 'react-windows-ui/icons/fonts/fonts.min.css' in 'D:\GitHub\smireact\src'

ERROR in ./src/pages/page0/index.js 5:0-52
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src\pages\page0'

ERROR in ./src/pages/page1/index.js 5:0-58
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src\pages\page1'

ERROR in ./src/pages/page2/index.js 5:0-104
Module not found: Error: Can't resolve 'react-windows-ui' in 'D:\GitHub\smireact\src\pages\page2'

webpack compiled with 8 errors

How to resolve it? pls

virtualvivek commented 2 years ago

Hi @Maicarons2022 , Thanks for opening this issue. I just checked and there was a dependencies version conflict in the CRA-Template.

Worked on it and now it has been Fixed.

Windows PowerShell
Copyright (C) 2013 Microsoft Corporation. All rights reserved.

PS E:\Github\react-windows-ui> cd ../
PS E:\Github> npx create-react-app my-app --template file:./react-windows-ui/src/cra-template

Creating a new React app in E:\Github\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-windows-ui...

added 1389 packages in 2m

205 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 5 packages in 8s

205 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...

removed 1 package, and audited 1395 packages in 6s

205 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created my-app at E:\Github\my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!
PS E:\Github>

After Successful Setup

cd my-app
npm start

Windows PowerShell
Copyright (C) 2013 Microsoft Corporation. All rights reserved.

PS E:\Github\my-app> npm start

> my-app@0.1.0 start
> react-scripts start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.43.209:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Do let us know if its all set from your side.

Maicarons2022 commented 2 years ago

It's ok now, thank you!

In fect, I used the yarn after npm reported errors, however, yarn could reslove the conflicts and the project could run well by the yarn :)

virtualvivek / react-windows-ui