cannot fount module @babel/core

estylehq commented 5 years ago

전에 챗으로 전달드린 사항입니다만, @babel/core를 유저의 프로젝트에 직접 import하지 않으면 위와 같은 메시지가 발생합니다.

현재 프로젝트에서 사용 중인 dependencies 입니다.

bootpay는 2.0.18버전입니다.

"dependencies": {
  "@vuejs-pt/vue-alert": "^1.2.2",
  "axios": "^0.18.0",
  "bootpay-js": "^2.0.18",
  "bootstrap": "^4.1.3",
  "bootstrap-vue": "^2.0.0-rc.11",
  "lodash": "^4.17.11",
  "moment": "^2.22.2",
  "vue": "^2.5.17",
  "vue-carousel": "^0.16.0-rc1",
  "vue-daum-postcode": "^0.4.0",
  "vue-gallery": "^1.5.0",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.0.3",
  "@vue/cli-plugin-eslint": "^3.0.3",
  "@vue/cli-plugin-unit-jest": "^3.0.3",
  "@vue/cli-service": "^3.0.3",
  "@vue/eslint-config-airbnb": "^3.0.4",
  "@vue/test-utils": "^1.0.0-beta.20",
  "babel-core": "7.0.0-bridge.0",
  "babel-jest": "^23.0.1",
  "vue-template-compiler": "^2.5.17"
}

표기되는 메시지는 다음과 같습니다.

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/[PROJECT_PATH]/[PROJECT_NAME]/node_modules/babel-loader/lib/index.js:10:11)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/Users/[PROJECT_PATH]/[PROJECT_NAME]/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/Users/[PROJECT_PATH]/[PROJECT_NAME]/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/[PROJECT_PATH]/[PROJECT_NAME]/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /Users/[PROJECT_PATH]/[PROJECT_NAME]/node_modules/loader-runner/lib/LoaderRunner.js:185:6

 @ multi (webpack)-dev-server/client?http://???.???.???.???:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

estylehq commented 5 years ago

@babel/core을 import 후 다음의 메시지가 표기 됩니다.

This dependency was not found:

* es6-promise/auto in ./node_modules/bootpay-js/lib/bootpay.js

To install it, you can run: npm install --save es6-promise/auto

gosomi151101 commented 5 years ago

2.0.19-beta2 버전으로 우선 릴리즈 하였습니다. 저희가 npm vuejs 2.5.17 버전으로 테스트하였을 때 해당 문제가 발생하지 않았는데 아마도 npm에 이미 의존성이 있는 파일들이 모두 설치가 되어 있어서 인거 같습니다.

우선 일부분 의존성을 해결하였습니다만, 만약 해결되지 않는 경우 다음과 같은 패키지를 추가로 dependencies에 넣어주세요.

"dependencies": { "es6-promise": "^4.2.5", "superagent": "^3.8.3" }

부트페이는 promise를 사용하기 때문에 ie호환성 유지를 위해 위의 패키지를 사용합니다.

저희가 알려주신 package.json 정보로 다시한번 의존성 테스트를 해보도록 하겠습니다.

estylehq commented 5 years ago

다음을 부탁드립니다.

필요한 dependencies가 발현된다면, Readme.md에 기록을 부탁드립니다.
버전이 나오지 않은 상태에서 Readme.md를 미리 업데이트 하시는 것으로 판단됩니다. 배포가 완료된 시점에 Readme 업데이트를 해주실 것을 부탁드립니다.

gosomi151101 commented 5 years ago

우선 dependencies 문제는 저희가 package.json에 devDependencies -> dependencies로 빼면 해결이 되는 문제입니다. 이번 2.0.19-beta2에서도 해당 문제가 해결 되지 않은 현상이 발견되면 반드시 Readme.md로 기록해두겠습니다.
스크립트로 버전을 기록하면 자동으로 파일을 수정하는 기능을 넣었습니다. 배포할때마다 실행되는데 베타 버전을 내놓는 과정에서도 2.0.19 버전 릴리즈가 되었다고 바로 수정이 되는 거 같습니다. 배포 스크립트 부분에 대한 버그를 수정해놓겠습니다.
2.0.19 버전 배포는 저희가 npm package가 모두 제거된 시스템 상황에서 테스트를 마친 이후에 배포할 예정입니다. 현재 제 개발 환경에서는 npm 패키지를 강제로 모두 의존성을 삭제할 수 없는 상태라 저희가 테스트 인스턴스를 오늘 배포하여 언제든 버그가 있는 환경을 구성할 수 있도록 만들 예정입니다. 테스트인스턴스 서버는 저희가 테스트를 거치고 나서 누구나 외부에서 접근하여 저희 bootpay-js를 테스트할 수 있도록 환경을 구성할 예정입니다.

처음은 저희가 webpack으로 아예 묶어서 패키징을 할까 생각했었는데 그렇게 되면 의존성이 있는 중복되는 패키지가 발생하여 전체적인 js 용량이 커지는 단점이 부각되어 webpack으로 배포하는 것은 제외하였습니다.

babel-core, es6-promise 의존성 테스트를 충분하게 하지 못한 점 사과드립니다. coffee -> js 컴파일하여 배포하는 버전이 2.0.18이 처음이다보니 여러 환경에서 충분한 테스트를 하지 못하여 생긴 문제라서 좀 더 신중하게 업데이트를 진행하도록 하겠습니다.

조언 감사드립니다!

gosomi151101 commented 5 years ago

지금 현재 프로젝트의 package.json 파일 전체를 보내주시면 더 테스트하는데 더 도움이 될 것 같습니다. 저희가 테스트한 환경이 vue-browserify, rails webpack vue, webpack-vue 라서 추가적인 테스트 환경 구성에 굉장한 도움이 될 것 같습니다.

estylehq commented 5 years ago

다음의 패키지 구성을 가지고 있습니다.

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@babel/core": "^7.2.0",
    "@vuejs-pt/vue-alert": "^1.2.2",
    "axios": "^0.18.0",
    "bootpay-js": "^2.0.18",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0-rc.11",
    "es6-promise": "^4.2.5",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "vue": "^2.5.17",
    "vue-carousel": "^0.16.0-rc1",
    "vue-daum-postcode": "^0.4.0",
    "vue-gallery": "^1.5.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-plugin-eslint": "^3.0.3",
    "@vue/cli-plugin-unit-jest": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "@vue/eslint-config-airbnb": "^3.0.4",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.0.1",
    "vue-template-compiler": "^2.5.17"
  }
}

@babel/core와 es6-promise는 bootpay-js를 위해 강제로 import한 depencencies입니다.

최초로 vue project 를 생성한 것은 vue ui를 통해 생성했으며, 다음과 같은 방법 및 configrations를 가지고 있습니다.

_> vue ui
enter Vue Project Manager (http://localhost:8000 )
적당한 임의의 폴더로 이동, Create new a project.
프로젝트 명 기입, package manager : npm, 나머지 options default.
Manual 선택
Babel, Router, Vuex, Linter / Formatter 선택. 그 외 defualt.
History mode router on.
linter / formatter -> ESLint + AirBnB 선택, 그 외 디폴트

gosomi151101 commented 5 years ago

저희가 알려주신 방법으로 몇가지 테스트를 해보았는데 몇가지 의존성 문제에 대해서 짚어드리려고 합니다.

처음 알려주신 @babel/core import 문제는 vue webpack에서 @babel/core 의존성을 가지고 있었습니다. 확인해보니 devDependencies에서 {"babel-core": "7.0.0-bridge.0"} 이 버전의 문제인 거 같습니다. 저희가 실제 프로젝트 생성하면 {"babel-core": "^6.26.3"} 로 되어 있고 버전을 위와 같이 바꾸면 bootpay-js를 제거하더라도 알려주신 에러가 뜨는거 같습니다. 추측하건데 babel-core를 쓰는거라면 webpack-dev-server가 의존성을 가지고 있을 가능성이 높습니다. 저희가 확인해본바로는 의존성자체가 "_requiredBy": [ "#DEV:/" ], 로 되어 있어서 정확하게 확인이 안됩니다. 사실 저희가 coffee로 이미 compile된 상태로 배포하기 때문에 '왜 babel/core 의존성을 갖지?' 라는 의문이 생겼었는데 알려주신 환경으로 테스트 해본 결과 저희쪽 문제는 아닌걸로 확인 되었습니다. 저희가 webpack기반으로도 제공하고 있기 때문에 babel-core 버전을 dependencies에 명시하기로 했습니다.
es6/promise는 확실히 저희가 의존성을 넣지 않아서 생긴 문제가 맞습니다. 그래서 2.0.19 버전에 의존성을 넣고 배포할 예정입니다. 2.0.19-beta2버전에서는 es6-promise를 npm으로 설치할 시에 다음과 같은 의존성을 갖게 됨을 확인하였습니다. "_requiredBy": [ "/bootpay-js", "/phantomjs-prebuilt" ]

2.0.19 버전은 오늘 점심 시간 이후 배포될 예정입니다.

관심 주셔서 감사합니다!

bootpay / bootpay_js

cannot fount module @babel/core #2