Create-React-App 빌드 - "Uncatched SyntaxError:예기치 않은 토큰 <"

Create-React-App 빌드 - "Uncatched SyntaxError:예기치 않은 토큰 <"

이 질문이 여러 번 나왔다는 건 알지만, 제게는 아무 것도 효과가 없었습니다.

인 빌드를 합니다.create-react-app하다

Uncaught SyntaxError: Unexpected token <     1.ca81c833.chunk.js:1
Uncaught SyntaxError: Unexpected token <     main.7ced8661.chunk.js:1

이 파일들은 최소화되어 있기 때문에 디버깅을 어디서 시작해야 할지 잘 모르겠습니다.

다른 SO 응답에 따르면, 제가 시도한 몇 가지 사항은 다음과 같습니다.

//Original index.html file, which gets included in the built file:
<script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

//package.json
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

//.babelrc file
{
  "presets": ["react", "es2015", "stage-1"]
}

이것이 관련이 있는지는 잘 모르겠습니다만, 익스프레스 서버에는 이것이 표준으로 설정되어 있습니다.

if (process.env.NODE_ENV === "production") {

    app.use(express.static('client/built'));
    app.get("*", (req, res) => {
        res.sendFile(require('path')
            .resolve(__dirname, 'client', 'build', 'index.html'));
    })
}

이 매우입니다. JSX는 그렇게 되지 create-react-appJSX는요?

업데이트: 방금 이 질문을 올렸는데 이미 관련 업데이트가 있습니다.실행함으로써 pm2를 통해 페이지를 정적으로 제공할 수 있습니다.pm2 serve build을 사용하다

많은 도움을 주셔서 감사합니다.동일한 솔루션을 사용한 Create-React-App 프로젝트의 예를 들어 여기에 추가하고자 합니다.헤로쿠에 전개한 후에도 같은 에러가 발생했습니다.

학습되지 않은 구문 오류:예기치 않은 토큰 < after serve -s 빌드

저는 packages.json 파일에 문제가 있었습니다.내가 준 "홈페이지" 매개 변수가 올바르지 않습니다.이것을 올바른 heroku URL로 변경하면 문제가 해결되었습니다.

"homepage": "https://myapp.herokuapp.com/"

이 추가가 도움이 되기를 바랍니다.

저는 여기서 답을 찾았습니다.https://github.com/facebook/create-react-app/issues/1812

위에서 전체 솔루션을 줄였지만 변경했습니다.

app.use(express.static('client/build'));
app.get("*", (req, res) => {
    res.sendFile(require('path')
        .resolve(__dirname, 'client', 'build', 'index.html'));
})

대상:

const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
    res.sendFile('index.html', { root });
})

첫 번째 블록이 작동하지 않았다는 것이 내게는 확실히 좀 이상하다.가 있을 은, 제가 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」index.html에러가 발생해도 파일이 브라우저로 전송되었습니다.첫 번째 블록에서는 완전 정적 파일이 작동하지만 정확한지 알고 싶습니다.

그냥 제거하다

"filename": "당신의 앱 URL"

패키지로부터.고쳐야 할 것 같아

를제 remove remove remove를 remove remove 를 remove 。"homepage": "app-url"json..package.json. ★★★★★★의 부재homepage서버하거나, 를 json으로 서비스합니다.serve -s build.

, 정, 지, 지, 지, 지, 지, 지, and, and, and.homepage서버 루트의 하위 디렉터리에 앱을 배포할 때 유용합니다.

somedomain.net이라는 이름의 IIS에서 앱을 호스팅하고 솔루션에 웹 API 프로젝트가 이미 있습니다.

1. 솔루션 폴더를 메인 웹 앱(somedomain)에 매핑합니다.그물
2. 웹 API 프로젝트를 IIS에서 응용 프로그램으로 변환합니다.
3. 그런 다음 리액트 앱의 빌드 폴더를 웹 API처럼 웹 앱으로 변환합니다.
4. 시키려면 , 「」를 합니다."homepage": "somedomain.net/React-Project/Client-App/build"

npm run build를 사용하여 리액트 앱 빌드 버전을 만들었습니다.서버(노드/익스프레스)가 있다.서버 측에 빌드를 포함시켜, 헤로쿠에 전개하고 싶다고 생각하고 있었습니다.빌드 폴더를 서버 루트 폴더에 복사하고 서버 측 스타트업 파일에 코드를 사용했습니다.

app.get('/*', function (req, res, next) {
    if (!req.path.includes('api'))
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    else next();
});

같은 에러가 발생하고 있습니다.시작할 때 정적 콘텐츠 경로를 설정합니다.

var app = express();
//here below
app.use(express.static(path.join(__dirname, 'build')));

그리고 나의 static index.html은 잘 제공되었고 리소스 css와 js를 찾을 수 있었습니다.

리액션 빌드를 실전 가동에 도입할 때도 같은 문제에 직면했습니다.이전에 동작하던 코드에서 무엇이 잘못되었는지를 알아내기 위해 몇 시간을 소비한 후, 저는 배치에서 저지른 실수를 발견했습니다.

static에 inside inside inside build할 수 .scp build/* scp -r build/*.

이 질문에 대한 정확한 답변이 아닌 것으로 알고 있습니다.하지만 저는 제가 하고 있는 오류를 알아차리기 전에 여기 전문가들이 제시한 답변에서 가능한 거의 모든 옵션을 시도해 보았습니다.따라서, 도입 순서도 검증하기 위해서, 같은 문제에 직면하고 있는 유저에게의 포인터로서 여기에 이것을 추가합니다.

갱신:

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★create-react-app클라이언트 도메인의 서브패스(http://example.com/foo/bar)에 프로젝트합니다.

이 접근법은 Nginx, React-Router를 사용하고 있습니다.

1. PUBLIC_URL로로 합니다..envfilename을 클릭합니다.

    + PUBLIC_URL=/foo/bar

2. basename로로 합니다.<BrowserRouter>.

    - <BrowserRouter>
    + <BrowserRouter basename={process.env.PUBLIC_URL}>

3. Nginx 설정을 변경합니다.

    location /foo/bar {
        alias /path/to/build;
        try_files $uri /$uri /foo/bar/index.html;
    }

, 여기 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ.create-react-app.env를 사용한 빌드 방법에 대한 문서: 환경 맞춤

이 솔루션이 도움이 되길 바랍니다!

---

할 때 하였습니다.create-react-appLinux 버 linux linux linux linux linux 。

cra's github에 대한 코멘트 및 cra의 프로덕션 빌드 도입 방법에 대한 공식 문서에 대한 이 문제를 해결했습니다.

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

생산 빌드 웹 사이트를 http://example.com/foo/bar 같은 곳에 배치하고 싶습니다.

디폴트 설정을 변경하지 않고 전개하면, 다음의 「Uncatched SyntaxError:」라고 표시됩니다.예기치 않은 토큰 <" 에러가 발생하여 화면에 아무것도 표시되지 않는다.

해결책은 다음과 같습니다.

1. package.json에 홈페이지 파라미터를 추가합니다.

    + "homepage": "/foo/bar"

2. css 내의 모든 스태틱리소스에 다음과 같은 "/foo/bar"를 추가합니다.

    .dummyimage {
     - content: url('/dummyimage.jpg');
     + content: url('/foo/bar/dummyimage.jpg');
    }

3. 모든 링크 및 경로에 "/foo/bar"를 추가합니다.

    - linkTo: '/contact'
    + linkTo: '/foo/bar/contact'

4. node.js/express에서 서비스 프로그램의 코드를 약간 변경하면 다음과 같습니다.

    - app.use(express.static(path.join(__dirname, '/build')));
    + app.use('/foo/bar/', express.static(path.join(__dirname, '/build')));

5. 다시 빌드합니다.

6. 서버에 빌드/를 전개합니다.

7. node.js/express와 같은 서비스 프로그램을 재시작합니다.

문제 해결!!

이 솔루션이 도움이 되기를 바랍니다.

제거만 하면 됩니다.homepage입력하다package.json그리고 잊지 말고 제거해 주세요.basename에BrowserRouter(리액트 라우터를 사용하는 경우).

바로 그겁니다.그건 효과가 있다.

리액션 앱을 github 페이지에 전개하고 싶을 때도 같은 문제에 직면했습니다.-필요에 따라 몇 가지 가이드라인을 따릅니다.

1. 저장소 이름은 작은 후자여야 합니다.

2. 프로젝트 이름이 repo 이름과 동일한 경우

3. add { "buildeploy": "npm run build", "deploy": 패키지에 "gh-pages -d build"}가 추가되었습니다.json

4. 패키지 시작 부분에 홈페이지 스크립트를 추가합니다.json

   { "http://[사용자명].github.io/[reponame], "name": "--", "version": "--", "private": boolean, 。

우리 대부분이 이미 패키지에서 홈페이지 속성을 삭제할 것을 제안했으므로.json

왜 내 경우엔 효과가 있었는지 설명해줄게

이전에 프로젝트를 Github 페이지에서 호스팅하도록 설정했더니 홈페이지 속성이 "https://shubhamshd.github.io/supplyChainApp"과 같이 설정되었습니다.

그러나 Github 페이지에 BrowserRouter 패키지와 관련된 네비게이션 오류가 주로 있어 다른 호스팅 플랫폼으로 전환해야 했습니다.

그리고 홈페이지 속성을 삭제하는 것을 잊어버렸기 때문에 Vercel이나 Netlify 등의 플랫폼에서는 도입이 실행되지 않았습니다.

오랜 검색과 시험 끝에 이 스레드, 특히 @Shashwat Gupta를 발견하고 불필요한 홈페이지 속성을 제거함으로써 문제를 해결할 수 있었습니다.

클라이언트를 S3에 도입하는 경우 react-deploy-s3를 사용하여 도입하는 경우 CloudFront에서 배포 ID를 할당합니다.

react-deploy-s3 deploy \
  --access-key-id XXXXXXXXXXXXXXXXX \
  --secret-access-key XXXXXXXXXXXXXXXXXXXXXXXX \
  --bucket XXXXXXX \
  --region us-east-1 \
  --distribution-id XXXXXXXXXXXXX                        <---

언급URL : https://stackoverflow.com/questions/54340240/create-react-app-build-uncaught-syntaxerror-unexpected-token