create-react-app에서 빌드 실행 후 공백 페이지

create-react-app에서 빌드 실행 후 공백 페이지

netlify에서 create-react-app을 배포하려고 하는데 빌드가 공백 페이지입니다.firebase api key를 로드하기 위해 .env 파일을 사용하고 있는데 빌드 시 문제가 있나요?

컴퓨터에서 로컬로 열려고 해도 빈 페이지가 콘솔에 "file://event-app/static/js/main.1087a0.js"라는 오류가 출력됩니다.

패키지.json: https://gist.github.com/Verthon/f82371ad2bb636b2e95c5b7697aa0bb5

➜  event-app git:(master) ✗ npm run build

> event-app@0.1.0 build /home/jurr/Projects/event-app
> node scripts/build.js

Creating an optimized production build...
Compiled with warnings.

./src/components/Router.js
  Line 12:  'withFirebase' is defined but never used  no-unused-vars

./src/components/Firebase.js
  Line 21:  'Firebase' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  282.86 KB  build/static/js/main.108757a0.js
  3.1 KB     build/static/css/main.8e671453.css

나는 세팅으로 문제를 해결했다.

"homepage": "."

package.json본서에 의하면

★★★★★★★★★를 사용하고 있는 경우는react-router.index.html 접속으로는 전자 ), (즉, 전자 (전자 사용),homepage처럼 '바꾸다'로 .BrowserRouter a HashRouter.

---

create-create-contract-app을 작성하다 때는 정상이었지만, 한 후 을 CRA의 앱을 .index.html파, 、 빈가 、 이이 、 요요요요 。

걸 알게 됐어요index.html이치노들 '셋'이라고 해요homepagepackage.json 난 있었어하지만 난 이미 그걸 가지고 있었어.★★★★★★★★★★★★★★★!?

는 결국 가 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★」react-router가 쓰고 게 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ . . . . . 。BrowserRouter로의 전환HashRouter츠키노

더하다

"homepage": ".",

안에서package.json시시시빌빌빌다다

@Verthon이 말한 것처럼"homepage": ".",당신의 패키지에.json 파일은 다음과 같이 최상위 레벨에 있습니다.

{
     "name": "myApp",
     "homepage": ".",
     // all other package.json stuff...
}

제가 몇 번이고 반복하고 있다는 것을 방금 알게 되었기 때문에, OOOor:빌드 폴더 대신 공용 폴더를 게시했습니다.

제제 my my my my에 가 있었다.return그리고 이것이 나에게 문제를 일으켰습니다.

브라우저 콘솔의 오류 메시지가

최소 반응 오류 #152;

그런 다음 내부 코멘트를return방법이 내 문제처럼 너의 문제를 해결해 줄지도 몰라.

homepage

  "homepage":"."

포장되어 있습니다.json

다른 폴더에 있는 경우https://example.com/admin 쓰시면 됩니다.

  "homepage":"https://example.com/admin"

다음 오류가 발생하여 인라인 런타임 스크립트가 실행되지 않는 것이 문제였습니다.

"script-src 'self' 컨텐츠 보안 정책 지시문을 위반하므로 인라인 스크립트 실행을 거부했습니다.인라인 실행을 이노블로 만들려면 'hash-hash' 키워드, 해시('sha256-5=') 또는 난스('nonce-...')가 필요합니다.

는 이 , 즉, 이 문제를 해결한 것입니다.INLINE_RUNTIME_CHUNK=false수입니니다다

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",

이는 브라우저의 콘텐츠보안 정책에 의한 것입니다.「 CSP 호환 브라우저는, 허가 리스트 도메인으로부터 수신한 소스 파일에 로드된 스크립트만을 실행하고, 그 외의 스크립트(인라인 스크립트나 이벤트 처리 HTML 어트리뷰트등)는 모두 무시합니다.」

나도 비슷한 문제에 직면했다.그러나 React-Deployment를 올바르게 실행하면 "homepage":"가 있음을 알 수 있습니다.// User ". 로컬머신에 전개하고 있지만 호스트된 서버에서는 도메인 또는 IP 주소를 홈페이지 필드에 사용할 수 있습니다.

{
  "homepage":"https://example.com"
}

저도 같은 문제가 있었습니다.use Context를 잘못 Import했기 때문입니다.

내가 풀었어.GitHub 페이지에 전개하고 나서, 나에게 일어난 일입니다.

로컬로 동작하고 있습니다만, 전개 후에 빈 페이지가 열립니다.

문제는 우리가 홈페이지 경로를 변경했다는 것이다.그래서 코드에 있는 경로를 업데이트해야 합니다.

예를 들면, 다음과 같은 「package.json」파일에 홈페이지를 추가했습니다.

"homepage": "https://[YourGitHubAccountName].github.io/[YourProjectName]"

그래서 이것을 추가한 후 내 코드 안에 있는 경로를 변경해야 하기 때문에 앱이 작동하지 않습니다.

예를 들어 다음과 같습니다.

'/' 경로는 '/[Your Project Name]' 또는

'/test'는 '/[Your Project Name]/test'가 되어야 합니다.

정의되지 않은 속성을 매핑하려고 할 때 검은 화면이 표시되었습니다.

import_file.displays

<MediaImage  />

imported_file.syslog

export const MediaImage = props => {
    console.log("areas", props.areas)
    return (

        <div className={props.className} id={props.id}>

        <img src="../../favicon-flat.png" alt="Workplace" useMap={"#mapa"+props.id}/>

        <map name={'element'props.id}>
 {props.areas.map(m=>{} )}

        </map>

        </div>)

}**

★★★★★★★★★★★★★의 현용 솔루션Reacttypescript을 "homepage": "."package.json

  {
  "name": "todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  },
  "scripts": {    
  },
  "eslintConfig": {    
  },
  "browserslist": {
  },
  "homepage": "."
}

을 제제어 the the the the the now now now now 。npm run build을 htmlfilename을 클릭합니다.

패키지의 개인 자산 값을 변경하기만 하면 됩니다.false에 json.

따라서 브라우저의 앱 캐싱에 문제가 있습니다.

는 이 를 이이 i이문 i i 。serviceWorker()create-react-app.

츠키다.index.js worker register(파일 및 삭제 서비스 워커 )

import { unregister } from './registerServiceWorker';
unregister();

빌드 후 index.html을 더블클릭하여 애플리케이션을 열려고 했지만, 역시 작동하지 않았습니다만, 빌드된 파일이 서버 환경에서 동작하고 있는 경우는 빈 페이지가 표시됩니다.https://create-create-contrace-app.dev/deployment/

1. 실행합니다.npm run eject

2. config 폴더에서 webpack.config 파일을 편집합니다.

3. 파일에 "static/" 또는 "static/js/" 또는 "static/css/"가 있는 경로를 찾아 해당 경로를 삭제합니다.

4. 프로젝트를 다시 빌드하다

난 이게 좋아.이게 너한테도 효과가 있길 바라.

언급URL : https://stackoverflow.com/questions/55568697/blank-page-after-running-build-on-create-react-app