인프런 커뮤니티 질문&답변

작성한 질문수

Vue.js + TypeScript 완벽 가이드

프로젝트 빌드 에러 해결

allowJs 의 설정이 안 먹히고 있습니다.

작성

·

926

2

캡틴 판교님과 동일하게 tsconfig.json 설정을 하는 중입니다.

allowJs = true로 변경하더라도

아래와 같이 import 된 항목들에 동일한 에러가 발생합니다.

구글링 해보고 있으나.. 원인이 잘 파악되지 않네요 ㅠ

현재 설정한 package.json의 dependencies는 아래와 같습니다.

{
  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },
  ...
}

tsconfig.json은 아래와 같습니다

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "noImplicitAny": false,
    "allowJs": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

혹 더 필요한 데이터가 있으면 말씀해주세요!

vuejs typescript

답변 3

0

자몽님과는 다르게

"api/index.js 파일은 입력 파일을 덮어쓰므로 쓸 수 없습니다." 라는 오류가 발생하였으나

자몽님과 동일한 버전으로 맞추어보니 해결되었습니다.

감사합니다!

0

질문자

자답.

앞 강의에 답변 참고하여, 아래와 같이 버전 변경 후 정상확인했습니다.

vue: ^2.6.14

vue-router: ^3.4.9

vuex: ^3.6.0

0

장기효(캡틴판교)

지식공유자

안녕하세요 자몽님, 라우터 쪽 코드 보여주시겠어요? 그리고 라우터 버전을 3.3.4로 낮춰보세용 :)

질문자

안녕하세요 캡틴판교님.

1_ router 쪽 소스는 아래와 같습니다. (따로 건들지 않았습니다.)

import Vue from 'vue';
import VueRouter from 'vue-router';
import { ItemView, UserView } from '../views';
import createListView from '../views/CreateListView';
import bus from '../utils/bus.js';
import store from '../store/index.js';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/news' 
    },
    {
      path: '/news',
      name: 'news',
      component: createListView('NewsView'),
      beforeEnter(routeTo, routeFrom, next) {
        bus.$emit('on:progress');
        store.dispatch('FETCH_LIST', routeTo.name)
          .then(() => next())
          .catch((() => new Error('failed to fetch news items')));
      },
    },
    {
      path: '/ask',
      name: 'ask',
      component: createListView('AskView'),
      beforeEnter(routeTo, routeFrom, next) {
        bus.$emit('on:progress');
        store.dispatch('FETCH_LIST', routeTo.name)
          .then(() => next())
          .catch((() => new Error('failed to fetch news items')));
      },
    },
    {
      path: '/jobs',
      name: 'jobs',
      component: createListView('JobsView'),
      beforeEnter(routeTo, routeFrom, next) {
        bus.$emit('on:progress');
        store.dispatch('FETCH_LIST', routeTo.name)
          .then(() => next())
          .catch((() => new Error('failed to fetch news items')));
      },
    },
    {
      path: '/item/:id',
      component: ItemView,
      beforeEnter(routeTo, routeFrom, next) {
        bus.$emit('on:progress');
        const itemId = routeTo.params.id;
        store.dispatch('FETCH_ITEM', itemId)
          .then(() => next())
          .catch(err => new Error('failed to fetch item details', err));
      },
    },
    {
      path: '/user/:id',
      component: UserView,
      beforeEnter(routeTo, routeFrom, next) {
        bus.$emit('on:progress');
        const itemId = routeTo.params.id;
        store.dispatch('FETCH_USER', itemId)
          .then(() => next())
          .catch(err => new Error('failed to fetch user profile', err));
      },
    }
  ]
})

2_ router의 버전 문제가 아닌 것 같다고 판단한 이유는 아래와 같습니다.

(버전은 방금 수정해보았으나, 동일한 오류가 뜨는 것 같네요.)

import 된 것의 순서를 아래와 같이 store로 바꾸어 보아도 동일한 오류 메시지가 출력됩니다.

작성한 질문수