reactjsES6 표준을 사용하여 작성된 앱 이 있으며 webpack이를 빌드 하는 데 사용합니다. webpack로드 js사용하여 모듈 babel-loader. 구체적으로 다음 버전의 패키지를 사용합니다.
├── babel@5.8.34
├── babel-core@5.8.34
├── babel-loader@5.4.0
└── webpack@1.12.6
그러나 빌드 후 IE 10에서는 다음과 같은 오류가 발생 'Symbol' is undefined합니다. babel를 정의 해야하지 Symbol않습니까? 특정 구성이 webpack있거나 babel작동하도록 설정해야합니까? 내가 사용 {stage: 0}내에서 구성 .babelrc.
어떤 도움을 주시면 감사하겠습니다!
답변:
babel-polyfill나를 위해이 문제를 해결했습니다. 감사합니다!
import "@babel/polyfill"; 문장이 이전에 있었던 경우에만 작동했습니다 import 'zone.js/dist/zone';(내가받은 Symbol 오류가 zone.js에서 왔기 때문에 의미가 있습니다)
좋아, 나는 결국 babel혼자서 polyfill이 없다는 것을 알게되었습니다. 스크립트를 포함 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>하면이 문제가 해결되었습니다.
이 솔루션은 확실히 작동합니다 .'Symbol 'is undefined in IE 오류가 발생했을 때 저에게 효과적이었습니다. Chrome과 Firefox에서 초기에 작동했지만 IE에서이 오류가 발생하여이 솔루션을 찾는 데 몇 시간이 걸렸습니다. 현재 최신 React를 사용하고 있습니다. react "react": "^ 16.5.0"on windows machine.
1. Install babel-polyfill
npm install --save-dev babel-polyfill
In package.json, it should have the following entries
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react": "^6.24.1"
}
2. In index.js, add
import babelPolyfill from 'babel-polyfill';
문제가 해결되어야합니다
좋아, 나는 같은 문제가 있었지만 내 경우에는 상당히 달랐으므로 기본적으로 다음과 같이 색인 파일에 스크립트를 포함해야합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
하지만 제 경우에는 몇 가지 조사 끝에 프록시가 스크립트를 차단했다는 사실을 발견했습니다.
그래서 확인하십시오 당신은 또한 index.html 파일에 포함 있는지 확인 하는 가장 좋은 방법은 복사 ... 당신이 일어나는 오류를 방지하기 위해 당신이 그것을 필요로하는 곳에에서 스크립트에 액세스 할 수 및 브라우저에 URL을 붙여 ...
하지만 이제 우리가이 지점에 도달 한 것은 Symbol 자체에 대한 것이 아닙니다. IE에서 인식 할 수없는 Symbol은 무엇입니까?
Symbol () 함수는 symbol 유형의 값을 반환하고, 내장 객체의 여러 멤버를 노출하는 정적 속성을 가지며, 전역 심볼 레지스트리를 노출하는 정적 메서드를 가지며, 내장 객체 클래스와 유사하지만 생성자로서 불완전합니다. "new Symbol ()"구문을 지원하지 않습니다.
Symbol ()에서 반환 된 모든 기호 값은 고유합니다. 객체 속성의 식별자로 심볼 값을 사용할 수 있습니다. 이것이 데이터 유형의 유일한 목적입니다. 목적 및 사용에 대한 추가 설명은 Symbol의 용어집 항목에서 찾을 수 있습니다.
데이터 유형 기호는 기본 데이터 유형입니다.
런타임에 대한 문서
// in bash
npm install babel-transform-runtime --save-dev
// in gulpfile
.pipe(babel({
plugins: ['transform-runtime']
}))
편집 : prod 모드의 heroku에서는 --save-dev 대신 --save 사용
@babel/plugin-transform-runtime
Angular 앱에서이 오류가 발생하면 polyfills.ts에서 다음 줄의 주석 처리를 제거해야합니다.
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';