예기치 않은 토큰 가져 오기, 바벨 로더가 작동하지 않습니까? ./app/main.js 모듈 구문 분석에

오류 실패 : /Users/dz2048/myapplication/app/main.js 행 1 : 예기치 않은 토큰 당신은 이 파일 형식을 처리하기 위해 적절한 로더를해야 할 수도 있습니다. | import 반응 : '반응';예기치 않은 토큰 가져 오기, 바벨 로더가 작동하지 않습니까? ./app/main.js 모듈 구문 분석에

왜 webpack-dev-server를 실행할 때이 오류가 발생하는지 알 수 없습니다. 많은 사람들이이 오류를 겪어 왔지만 여러 가지 이유가 있습니다. babel-loader가 내 main.js 파일을 완전히 건너 뛰고 있지 않은 것으로 의심됩니다. 처음에는이 설정을 직접 작성했지만 webpack 문서를 잘 따라 갔다고 생각했지만 생각하지 않습니다.

의존성 :

"dependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "prop-types": "^15.6.0", 
    "react": "^16.2.0", 
    "react-redux": "^5.0.6", 
    "redux": "^3.7.2", 
    "seamless-immutable": "^7.1.2" 
}, 
"devDependencies": { 
    "babel-preset-env": "^1.6.1", 
    "webpack": "^3.10.0" 
}

webpack.config.dev.js :

"scripts": { 
    "web-dev": "webpack-dev-server --config web/webpack/webpack.config.dev.js --colors" 
    },

그리고 마지막으로 package.json에서

const path = require('path'); 

module.exports = { 
    entry: { 
    main: './app/main.js' 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, '../public') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['@babel/preset-env'] 
      } 
     } 
     } 
    ] 
    } 
};

스크립트, 내 파일 구조 :

myapplication/ 
    app/ 
    main.js 

    node_modules/ 
    web/ 
    public/ 
    webpack/ 
     webpack.config.dev.js 
    package.json

,451,515,

웹/공공/index.html을이 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 
    <div id="root"></div> 
    <script src="bundle.js"></script> 
    </body> 
</html>

출처

2017-12-24 dzny

.babelrc 파일을 미리 설정하고 웹팩 설정 파일 – monssef

@monssef에서 제거 설정하려고이 부분을 놓친 생각 - 고맙습니다. 나는 이것을 시도했고 결과는 같았다. – dzny

html 파일 콘텐츠도 추가 할 수 있습니까? – monssef

나는이 문제를 발견했다. package.json의 스크립트가 webpack 대신 webpack-dev-server을 사용하고있었습니다. 완전히 이해하지 못했던 예제 프로젝트의 코드를 복사 할 때 유용합니다.

출처

2017-12-25 21:44:11 dzny

변경이

 { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/ 
     },

에 로더 부분과 나는 유

resolve: { 
    alias: { 
     'react$': 'your react location', 
     ... 
    } 
}

출처

2017-12-26 02:55:16

예기치 않은 토큰 가져 오기, 바벨 로더가 작동하지 않습니까? ./app/main.js 모듈 구문 분석에

답변

관련 문제