[IE] How to fix SCRIPT1002 : syntax error

clean·2023년 2월 15일
0

SCRIPT1002:syntax error

  • 위 에러는 구문 오류로 IE 에서 지원되지 않는 문법을 사용할 경우 발생

따라서 babel 설정을 살펴봐야함

vue 의 babel-loader 설정 유의사항

  • vue-cli 의 webpack babel-loader의 기본 설정은 node_modules 패키지를 제외하도록 설정되어있다.
    따라서 node_moudles 에서 transpile 되어야하는 패키지가 있는 경우 따로 설정하라고 안내되어있다.

    transpileDependencies (vue.config.js)
    If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js. This would enable both syntax transforms and usage-based polyfill detection for that dependency.

    build.transpile (nuxt.config.js)
    If you want to transpile specific dependencies with Babel, you can add them in build.transpile. Each item in transpile can be a package name, a string or regex object matching the dependency's file name.

문제를 일으키는 Dependencies 찾기

  • 그렇다면 해결 방법은 transpileDependencies(transpile) 속성에 문제를 일으키고 있는 module 을 찾아 추가하는것.
  • 기존 번들링 된 파일은 app.js 에 모두 들어가있기 때문에 어떤 어떤 모듈에서 문법 오류가 발생하는지 찾기가 어렵다.

vendor의 각 npm 패키지가 분할되도록 설정하기 (참고)

  • vue.config.js 설정 파일 변경하기 (nuxt.config.js)
// vue.config.js
configureWebpack: {
  //.. optimization 추가
  optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
          // [중요!] cacheGroups는 Webpack이 청크를 output 파일로 그룹화하는 방법에 대한 규칙을 정의하는 곳입니다. 이 설정을 통해 각 패키지별로 청크를 그룹화
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      },
        //...
  }
 // nuxt.config.js
  export default {
    // 중략
    build: {
      optimization: {
        // 위 optimization 설정값과 동일
      }
  }
  • 설정값 전/후를 비교하면

    • 분리 전

    • 분리 후 (vendors/app.js 에 담겨있던 modules 들이 각각의 파일로 담겨있다.)

    • 따라서 분리 후 에러 코드를 보면 어떤 패키지에서 에러가 난건지 확인할 수 있다.

적용

  • strip-ansi 도 babel-loader 대상에 포함되도록 처리
//vue.config.js
module.exports = { 
// ...
	transpileDependencies: ['strip-ansi'] 
// ...
};
//nuxt.config.js
module.exports = { 
// ...
	transpile: [
      ({ isDev, isLegacy }) => isDev && isLegacy && 'strip-ansi'
    ],
// ...
};

0개의 댓글