'잡히지 않은 SyntaxError : 예기치 않은 토큰 가져 오기'문제를 해결하는 방법?

이 오류를 해결하는 방법을 찾고 있었지만 수정하지 못했습니다. 내가 찾은 대부분의 대답은 바로 바벨을 세우는 것을 다루지 만, 나는 그것이 꼭해야만하는 것처럼 그것을 설정했다고 믿습니다. 내 프로젝트에서 React를 사용하기 위해 Webpack을 사용하고 있습니다.'잡히지 않은 SyntaxError : 예기치 않은 토큰 가져 오기'문제를 해결하는 방법?

내 웹팩 설정 파일은 다음과 같습니다

const path = require('path'); 

module.exports = { 
    context: __dirname + "/app", 

    entry: { 
    javascript: "./js/app.js", 
    html: "./index.html", 
    }, 

    output: { 
    filename: "app.js", 
    path: __dirname + "/dist", 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    root: path.resolve(__dirname, './app/js'), 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel-loader"], 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
     }, 
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 
    ], 
    }, 
}

내 index.html을은 다음과 같습니다

<html> 
<head> 
    <title>React</title> 
    <meta charset="utf-8" /> 
    <style> 
    * { 
     margin: 0; 
     padding: 0; 
     font-size: 18px; 
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
     font-weight: normal; 
    } 

    body { 
     background: #ededef; 
    } 

    #app, 
    .Info { 
     max-width: 600px; 
     padding: 40px; 
     margin: 0 auto; 
     position: relative; 
    } 

    hr { 
     border: 0; 
     border-top: 1px solid #ddd; 
     margin: 20px 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="app"></div> 
    <script src="./js/app.js"></script> 
</body> 
</html>

내 JS 파일 app.js.에 import React from 'react';과 반응로드 할 때 내가 오류가 발생 필요한 바벨 패키지를 설치했습니다. 내 루트 폴더에 .babelrc 파일이 있습니다. 이 오류의 원인은 무엇입니까?

편집

내 .babelrc 파일은 다음과 같습니다

{ 
    "presets": [ 
    "es2015", 
    "react" 
    ] 
}

출처

2017-04-04 feners

당신이 파일을 .babelrc 표시 할 수 있습니다 : 그것은 같은 디렉토리에의로합니다 (file-loader 구성한과) 방금 복사 가져옵니다 index.html 때문에, 다음에 <src> 태그를 변경해야? –

이것이 당신의 오류에 영향을 줄지 모르지만 webpack.config 파일의 "html :"./index.html "엔트리 포인트는 무엇입니까? webpack의 엔트리 포인트는 js 번들을 만드는 데 사용되지만, 여기서는 012.htm 파일을 가리키고 있습니다. – ryandrewjohnson

@MayankShukla.babelrc – feners

두 개의 규칙이 있지만 바벨 설정이 작동합니다. 모자가 .js에 적용되는 경우 /\.jsx?/은 .js과 일치하므로 x?은 x의 발생을 1 회 또는 0 번 의미하므로 다른 규칙을 제거해야합니다.

./js/app.js을 가져 오는 브라우저에서 app/index.html을 여는 중 오류가 발생했습니다. 이것은 처리 된 파일이 아니며 import 문을 가진 원본 파일이므로 브라우저에서 논리적으로 실패합니다.

먼저 webpack에서 생성 한 파일을 열어야합니다 (귀하의 경우 dist/index.html). 그러나 번들은 dist/app.js에 있으며 dist/js/app.js이 아니기 때문에 찾을 수 없습니다.

<script src="app.js"></script>

출처

2017-04-04 08:21:17

무엇이 잘못되었는지에 대해 자세히 설명해 주셔서 감사합니다. – feners

시도가 웹팩 로더에 포함 재산의 사용을 만들기 위해, 또한 /\.jsx?$/ 때문에 별도로 babel-loaderjs에 대한 파일을 정의 할 필요가 없습니다 구문이 이미 모두 확인 됨

loaders: [ 
    { 
    test: /\.jsx?$/, 
    include: [ 
     path.resolve(__dirname, "app") 
    ], 
    loaders: [ 'react-hot', 'babel-loader' ] 
    }, 
    { 
    test: /\.html$/, 
    loader: "file?name=[name].[ext]", 
    } 
],

을에 포함 할 때

npm install --save-dev babel-preset-stage-0

그리고 샘플 webpack.config : 당신이

<body> 
    <div id="app"></div> 
    <script src="./dist/app.js"></script> 
</body>

출처

2017-04-04 04:40:18

const path = require('path'); 

module.exports = { 
    context: __dirname + "/app", 

    entry: { 
    javascript: "./js/app.js", // make sure your all components containing "import" variable will be placed inside ./js/app.js folder 
    html: "./index.html", 
    }, 

    output: { 
    filename: "app.js", 
    path: __dirname + "/dist", 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    root: path.resolve(__dirname, './app/js'), 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel-loader"], 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
     }, 
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 
    ], 
    }, 
}

출처

2017-04-04 05:11:07

당신은 무대 0 프리셋 사용하셔야합니다 dist 폴더에 recides 웹팩에서 컴파일 된 js 파일을 포함해야한다파일 .js는 다음과 같습니다.

var webpack = require('webpack'); 
var path = require('path'); 
module.exports={ 
devtool :'inline-source-map', 
entry : ['webpack-dev-server/client?http://127.0.0.1:8000', 
'webpack/hot/only-dev-server', 
'./src' 
] , 
output :{ 
path: path.join(__dirname, 'build'), 
filename: 'bundle.js', 
}, 
resolve:{ 
modulesDirectories : ['node_modules','src'], 
extensions : ['','.js'] 
}, 
module : { 
loaders :[ 
    { 
    test : /\.jsx?$/, 
    exclude : /node_modules/, 
    loaders :['react-hot','babel?presets[]=react,presets[]=es2015,presets[]=stage-0'] 
    } 
] 
}, 
plugins :[new webpack.HotModuleReplacementPlugin(), 
new webpack.NoErrorsPlugin() 
    ] 

};

출처

2017-04-04 05:54:08

'잡히지 않은 SyntaxError : 예기치 않은 토큰 가져 오기'문제를 해결하는 방법?

답변

관련 문제