Nu stiu din ce cauza idioată in ReactJS nu-mi mai compileaza decat anumite fisiere, cand salvez in IDE nu-mi mai compileaza… Am dat din nou “creat-react-app”, am dat din nou “npm install” dar problema e aceasi…
Spre exemplu aici, in “home2”, primul fisier “Create” mi-l compileaza, daca ma duc sa modific “LiveAuction” sau “PopularCollection” nu mai compileaza nimic…
Am incercat si cu “yarn start”, aceasi poveste… refuza sa-mi compileze fisierele, doar anumite fisiere le compileaza. Nu inteleg de ce, mergea corect in trecut.
Ai eroare in fisierul JSX, ce IDE ai ? Foloseste VSCode sau IntelliJ WebStorm/Ultimate.
Poți pune log-urile de la npm build (webpack) sau npm start intr-un pastebin aici ?
Cum ai ajuns la concluzia ca ‘nu compileaza’ ? Folosești în ceva componentă care apare ceva exportat din ce nu îți ‘compileaza’ ? Nu iti da eroare ?
Dacă e ceva de invatare îți recomand să incarci proiectul pe https://stackblitz.com sau https://codesandbox.io ca să te putem ajuta.
Folosesc Sublime Text.
E o imagine cu un folder mai sus, primul fisier “create.jsx” daca modific ceva si dau CTRL+S se compileaza, in consola vad compilarea, si se modifica si pe site.
La urmatorul “LiveAuction.jsx”, nu mai face nimic, modific, dau CTRL+S si nimic ramane la fel, nici in consola nimic.
Si asa este la alte multe fisiere, spre exemplu fisierele “.css” din public, nu se mai modifica.
Log npm start:
$ npm start
> [email protected] start
> react-scripts start
(node:3740) [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:3740) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!
You can now view MyProject in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.100.5:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
assets by info 2.01 MiB [immutable]
assets by path static/media/*.jpg 1.07 MiB
asset static/media/images-item-details3.0c2a44d4194d129e9c86.jpg 168 KiB [emitted] [immutable] [from: src/assets/images/box-item/images-item-details3.jpg] (auxiliary name: main)
asset static/media/images-item-details5.22a592358af8e6bc5bf0.jpg 145 KiB [emitted] [immutable] [from: src/assets/images/box-item/images-item-details5.jpg] (auxiliary name: main)
asset static/media/images-item-details2.079e7e182d9484c14c17.jpg 133 KiB [emitted] [immutable] [from: src/assets/images/box-item/images-item-details2.jpg] (auxiliary name: main)
+ 20 assets
assets by path static/media/*.png 967 KiB
asset static/media/a1.d712fbbb6c684edaac4c.png 238 KiB [emitted] [immutable] [from: src/assets/images/icon/a1.png] (auxiliary name: main)
asset static/media/item-h5.4.d1c678b18580a7c65f5f.png 189 KiB [emitted] [immutable] [from: src/assets/images/box-item/item-h5.4.png] (auxiliary name: main)
asset static/media/item-h5.1.28074c6c348ca4a57647.png 150 KiB [emitted] [immutable] [from: src/assets/images/box-item/item-h5.1.png] (auxiliary name: main)
+ 9 assets
asset static/js/bundle.js 4.12 MiB [emitted] (name: main) 1 related asset
asset asset-manifest.json 3.29 KiB [emitted]
asset static/media/coin.d9eb617f8d667f98d5cd6093850c70e3.svg 1.32 KiB [emitted] (auxiliary name: main)
asset index.html 632 bytes [emitted]
cached modules 3.44 MiB (javascript) 2.01 MiB (asset) [cached] 665 modules
runtime modules 28.2 KiB 13 modules
webpack 5.70.0 compiled successfully in 5048 ms
Da, dar tu acum daca faci schimbari nu o sa-ti apara in build. Trebuie sa executi npm build din nou ca sa-ti apara schimbarile. Schimbarile live le poti vedea in development. Acum vad ca pe npm start iti ruleaza build-ul. Poti sa ne arati comenzile din scripts package.json?
Da.
package.json:
{
"name": "MyProject",
"homepage": "https://localhost:3000",
"version": "1.0.1",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-bootstrap-accordion": "^1.0.0",
"react-countdown": "^2.3.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-tabs": "^3.2.3",
"react-transition-group": "^4.4.2",
"sass": "^1.45.1",
"swiper": "^7.4.1",
"web-vitals": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"typescript": "^4.6.2"
}
}
Din cate vad este ok, schimbarile iti apar atunci cand dai refresh la pagina?
Nu… nu are ce sa apara daca atunci cand salvez modificarea in consola nu-mi compileaza, ramane la fel.
Atunci o sa avem nevoie de mai mult context. Cum a spus si @isti37 daca acest proiect este pentru invatare il poti adauga in codesanbox sa vedem care este problemA
Dacă ești pe mac os x pune proiectul in alt folder ca Desktop sau folderele protejate precum My Documents.
Un loc bun e ~/Proiect
Dar stai putin, ai importat componenta undeva mai sus ? Nu o să îți facă nimic la un fișier care nu e folosit în ceva ce ajunge în main.jsx.
LiveAuction.jsx e inclus de create.jsx? React compiler se uita in copacul de dependinte, nu compileaza fiecare fisier din folder.
As putea sa recomand sa muti LiveAuction.jsx mai sus in copacul de foldere si sa incerci sa incerci cu VSCode, are si extensii foarte bune pentru sugestii si suport bun pentru React.