create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

programing

create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

randomtip 2023. 4. 1. 15:14

create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

create-react-app을 사용한 리액트 튜토리얼을 따르고 있습니다.응용 프로그램은 create-react-app v1.3.0에 의해 생성됩니다.

create-react-app my-app

개발 서버는 다음 사용자에 의해 실행됩니다.

npm start

코드를 여러 번 변경한 후 브라우저는 실시간 업데이트/핫 새로고침되지 않습니다.브라우저를 새로 고치는 것은 도움이 되지 않습니다.개발 서버를 중지하고 다시 시작하면 코드에 대한 새로운 변경 내용이 캡처됩니다.

나는 무의식적으로 많은 것을 읽고 있었다.

리액트 17을 사용하고 있습니다.

그리고 나의 문제는 페이지가 새로운 컴포넌트를 추가했을 뿐 브라우저가 페이지를 새로 고치지 않았다는 것입니다.

단말기가 다음과 같은 경우Compiling...안 더 .★★★★★★★★★★★★★★★★★,.env하고 추가하세요.FAST_REFRESH=false.

핫 리프레시는 기본적으로 고속 리프레시로 대체되었습니다.

유저 가이드의 「트러블 슈팅」섹션을 참조해 주세요.
이 문제의 일반적인 원인에 대해 설명합니다.

「」에 을 보존했을 .npm start을 사용하다이치노

이 문제가 해결되지 않는 경우는, 다음의 몇개의 회피책을 시험해 주세요.

프로젝트가 Dropbox 폴더에 있는 경우 프로젝트를 이동해 보십시오.

을 표시하지index.js폴더명으로 참조하고 있는 경우는, Web 팩의 버그로 인해 워처를 재기동할 필요가 있습니다.

Vim이나 IntelliJ와 같은 일부 편집자는 현재 감시자를 깨는 "안전한 쓰기" 기능을 가지고 있습니다.비활성화해야 합니다."vim에서 스왑 파일 생성 비활성화"의 지침을 따릅니다.

프로젝트 경로에 괄호가 포함된 경우 괄호가 없는 경로로 프로젝트를 이동해 보십시오.이는 웹 팩 워처 버그로 인해 발생합니다.

Linux 및 MacOS에서는 더 많은 감시자를 허용하기 위해 시스템 설정을 조정해야 할 수 있습니다.

가 (Box 되는 경우 (Vagrant Provisioned)를 ..env 경우 디렉토리에 하고 ""을 추가합니다.CHOKIDAR_USEPOLLING=true you음음음음을 실행할 때npm start워처는 VM 내에서 필요에 따라 폴링 모드를 사용합니다.

이러한 솔루션이 도움이 되지 않는 경우는, 이 스레드에 코멘트를 남겨 주세요.

도움이 됐으면 좋겠네요!

의 추가.env 및 파일 FAST_REFRESH=false.

이것에 의해, 고속 리프레시가 디세블이 되어, 핫 새로고침으로 돌아옵니다.

기본 경로에 .env 파일을 추가하지 않으려면 다음 옵션을 선택할 수 있습니다.

"start": "FAST_REFRESH=false react-scripts start" package에 되어 있습니다.조나단
FAST_REFRESH=false npm run start에 . , ,줄에 , , , , 。
FAST_REFRESH=false환경변수로 내보냅니다.

리액트 17

리액트 스크릿 4

슈퍼 사용자 권한으로 npm start를 시도해보셨습니까?나는 내 프로젝트에 문제가 있었고 이렇게 해결했다.

$sudo bash
#npm  start

가 (Box WSL2를 하십시오. (Vagrant Provisioned (Vagrant Provisioned) Virtual Box를 하십시오..env 경우 디렉토리에 하고 ""을 추가합니다.CHOKIDAR_USEPOLLING=true you음음음음을 실행할 때npm startVM 에 따라 모드를 라고 말합니다.

다음 명령을 실행합니다.$ CHOKIDAR_USEPOLLING=true npm start

몇 시간 동안 이 문제를 해결했습니다.

1. .env 파일을 만듭니다(패키지 이외).json file) 아래 내용을 추가합니다.

파일: .env

FAST_REFRESH=false

2. 이제 서버를 정지하고 기동합니다.

(Ctrl + C to start, if in CMD, on Windows OS)
npm start

4. 이제 App.js에서 텍스트를 변경합니다.

파일: App.js

from "Learn React"
to "Learn React And it's working"

합니다.1 이치노
변경사항이 되지 않으면 고칩니다.2 . 변경사항이 표시되지 않으면 브라우저 탭을 새로 고칩니다.

제 경우 파일 워치 수가 부족했습니다.수동으로 설정을 변경해야 합니다.

터미널에서 다음 명령을 사용하여 활성 파일 워처 제한을 참조하십시오.

cat /proc/sys/fs/inotify/max_user_watches

/etc/sysctl.conf 파일에 다음 행을 추가합니다.

fs.inotify.max_user_watches = 524288

다음 명령을 사용하여 변경 내용을 적용합니다.

sudo sysctl -p

달리는 동안 이 문제가 발생했습니다.npmWSL の [ WSL ]WSL 의 npm 의 Windows Desktop 의 설정.
프로젝트 폴더를 WSL 사용자 디렉토리로 이동한 후 문제가 해결되었습니다.

창조하다.env앱의 루트에 파일을 저장하고 다음 파일을 추가합니다.

.env

FAST_REFRESH=false

WSL2의 win10에서는 루트 폴더에 .env를 생성하여 둘 다 포함시켜야 했습니다.

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

설정에 가상 머신이 포함되어 있지 않습니다(WSL2가 VM으로 간주되지 않는 한).단, 위의 2개의 엔트리를 가진 .env는 기동하여 가동하고 있습니다.

★ (Find your find your ★)index.js이 파일의 내용을 변경합니다(예: 공백 추가 후 저장)."그냥..."이라고 표시되어야 합니다."를 클릭합니다.

그런 다음 다른 파일을 수정하면 저장 시 새로 고쳐집니다.

npm은 처음 index.js의 변경을 찾고 있는 것 같습니다.폴더 구조를 리팩터링하면 index.js를 놓칠 수 있습니다.index.js 파일을 강제로 업데이트하면 문제가 해결됩니다.

적어도 이건 나한테는 효과가 있었어

WSL2 사용자의 경우 프로젝트가 Windows 시스템(C: 또는 D:)에 있는 경우 작동하지 않습니다.

해결책 1:

WSL 공유를 통해 이러한 파일에 액세스합니다.\ wsl $ \Windows로부터의 DISTRO_NAME.

솔루션 2:

패키지 안에.json

발견하다

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

로 대체한다.

"scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

크레딧은 https://github.com/facebook/create-react-app/issues/10253에 있습니다.

5. react-scripts 5.x.x 의 CHOKIDAR_USEPOLLING=true하지 않게 .부러워하다, 이제 '어울릴 수 없다'를 해야 합니다.WATCHPACK_POLLING=true.env 파일에 저장되어 있습니다.이 실에 따라서.

Studio 코드를 하는 경우 새하여 Visual Studio로 할 수 ..env 안에..env를 쓰다FAST_REFRESH=false저장해 주세요.다음 ''를 실행합니다.' ''를 클릭합니다.npm start이게 나한테 효과가 있었어

편집: 권장되는 솔루션이 아닐 수 있습니다.Docker의 솔루션은 유효했다.

에 .는 src .env 입니다.CHOKIDAR_USEPOLLING=true.

/app/src/App.js: '@babel/parser' 모듈을 찾을 수 없습니다.

에러를 하려면 , 「」를 "react-scripts": "3.4.3"로로 합니다."react-scripts": "3.4.0"worked.file worked.json 。따라서 상황에 따라서는 .env 파일을 추가하고 react-scripts 버전을 변경해야 할 수도 있습니다.

주의: 좀 더 자세히 설명하자면, 도커와 작업하고 있었는데, 리액트 앱 파일이 도커 이미지에 볼륨으로 마운트되어 있었습니다(도커 이미지를 재구축하지 않고 앱 변경 내용이 앱에 직접 반영됩니다).위의 솔루션은 사람들이 리액트 스크립트 버전을 변경할 것을 제안했던 도커용 커뮤니티에 게시된 기타 솔루션에 기초하고 있습니다.저는 이것이 권장되는 해결책이 아니라고 생각합니다.하지만 저는 튜토리얼 시리즈를 하고 있었기 때문에 시간을 절약하고 다른 것에 집중하고 싶었습니다.

리버스 프록시 / nginx(예를 들어 https를 로컬로 활성화하기 위해) 뒤에서 앱을 실행하는 경우 웹소켓도 활성화하여 새로 고침을 감지할 수 있도록 해야 합니다.

location /sockjs-node {
    proxy_pass http://dockerhost:5000/sockjs-node;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

포장되어 있습니다.json, "syslog" 사용: "3.4.4"
package-lock.json을 삭제합니다.
rm - rf node _ modules & npm install을 실행합니다.

npm 시작

.env 파일을 어떻게 작성해야 할지 혼란스러웠고 작성해도 작동하지 않았습니다.단말기에서 이 명령을 실행하여 문제를 해결할 수 있었습니다.

npm run start -FAST_REFRESH=false

누군가에게 도움이 됐으면 좋겠군

더 나은 해결책을 찾는 사람들이 여기에 올 경우 WSL2 파일 시스템 내에서 파일을 이동함으로써 문제가 해결되었습니다.핫 새로고침은 .env 파일을 추가할 필요 없이 바로 실행되었습니다.

나는 결국 비슷한 문제에 대한 답을 찾아 여기에 왔다.내 페이지는 핫 새로고침이 아닌 한 페이지에 한정되어 있지만.이것은 Nextjs를 사용하고 있으며, 이것은 subscribe.js(/pages/subscribe.js)라는 이름의 /pages 아래에 있는 페이지입니다.

그것은 매우 좌절스러웠고 분명히 알아내는 데 시간이 걸렸다.

여기에는 많은 기술적인 답변이 있습니다만, 흥미롭게도 기능적인 컴포넌트가 대문자로 시작되지 않았습니다.

import React from 'react'

export default function subscribe() {
  return (
    <div>
      
    </div>
  )
}

함수 이름은 대문자여야 합니다.

import React from 'react'

export default function Subscribe() {
  return (
    <div>
      
    </div>
  )
}

사람들이 말하듯이, 당신은 매일 새로운 것을 배운다.이 게임에서는 10가지에 가깝습니다.문제는 배운 것을 기억하는 것입니다.

한 후 하여 repo를 실행합니다.npm install ★★★★★★★★★★★★★★★★★」yarn install이 가 해결되었습니다.

이 명령어를 사용해 보세요.

echo fs.inotify.max_user_watches=524288 
sudo tee -a /etc/sysctl.conf && sudo sysctl -p

그래도 오류가 발생할 경우 노드 모듈을 분리한 후 다시 분리해야 합니다.

npm install

그리고 나서.

npm start

{"start"}에 -w를 추가할 수 있습니다: "react-scripts start -w".같은 문제가 있었는데 --watch를 추가하여 수정했습니다.

create-react-app 툴체인을 사용하여 신규 프로젝트 생성 후

꼭 뛰어가세요

npm install (그래서)
npm start

"dependencies": { "dependencies": { "^17.0.1", "dependences": "4.0.1", } 이러한 버전을 사용하는 경우 프로젝트의 루트 디렉터리에 .env 파일을 생성하고 FAST_REFRESH=false를 입력하여 저장합니다.그럼 실타래 OR NPM 시작.

linux의 경우 먼저 다음을 사용하여 허용되는 파일 수를 확인합니다.

cat / cat / sys / fs / inotify / max _ user _ displays

8192라서 524288로 바꿨는데 완벽하게 작동했어요.

변경에 사용하는 명령어는 다음과 같습니다.

cd /cd/sys/fs/inotify sudo nano max_user_max

no를 524288로 변경하여 저장한 후 이 명령을 사용하여 변경을 적용합니다.

sudo sysctl -p

https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/에서 참조

을 어디에 .env env env 、 env env env env env env 。했을 때create-react-app app-name반응하다

./root
   ./app-name
      ./node_modules
      ./public
      ./src
      package.json
      README.md

는 . 파일env 파일 포함)을FAST_REFRESH=false디렉토리 /root 디렉토리 아래에 있습니다.파일을 ./app-name 폴더에 저장하면 문제가 해결되었습니다.

위의 모든 제안을 시도했지만 코드 변경 시 리액션 앱이 갱신되지 않습니다.그런 다음 이전에 작업하던 리액트 프로젝트 폴더(프런트 엔드만)를 복사하여 시작할 새 프로젝트에 붙여 넣었습니다.이전 프로젝트와 관련된 모든 코드를 삭제하고 사용을 시작했습니다.이것으로 내 문제는 해결되었다.

이것이 가능하다면 당신도 같은 방법을 채택할 수 있습니다.새로운 심플한 솔루션을 발견하신 분은, 여기에 게재해 주세요.

했다npm build매번 새로고침하고 싶을 때마다.npm으로 하다이 프로젝트는 구획이라고 불리는 빌드 도구를 사용했습니다.된 파일 예: 음음 。.parcel-cache ★★★★★★★★★★★★★★★★★」dist츠키노

저의 해결책은 자동 생성된 추적되지 않은/무시 파일을 삭제하는 것이었습니다.될 수 .git status --ignored

리눅스를 사용하는 경우 루트 액세스와 함께 작동하는지 확인합니다. " " " " " " " " " " " " " " " " " " 。man selinux를 참조해 주세요.

sudo setenforce 0

(루트를 사용하지 않고) 서버를 다시 시작합니다.기능할 수 있습니다.

언급URL : https://stackoverflow.com/questions/43274925/development-server-of-create-react-app-does-not-auto-refresh

저작자표시

'programing' 카테고리의 다른 글

재스민은 약속을 시험한다.그 후 기능하다 (0)	2023.04.01
JSON 날짜 문자열을 Python 날짜/시간으로 변환 (0)	2023.04.01
Word press는 사용자가 사이트 내용을 보기 전에 강제로 로그인하도록 합니다. (0)	2023.04.01
Spring WebFlux WebClient JSON 역직렬화 커스터마이즈 방법 (0)	2023.04.01
쉼표로 구분된 문자열을 PL/SQL에서 배열로 변환 (0)	2023.04.01

현재글create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

각종 프로그래밍 정보를 다루는 블로그입니다.

jQuery, spring, C++, C#, spring3, Java, javascript,

Today :
Yesterday :

randomtip

create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

create-react-app의 개발 서버가 자동으로 새로 고쳐지지 않음

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바