[英]VueJs Module build failed: Error: Couldn't find preset “@vue/app” relative to directory
I'm using vue-tour in my app, the problem is that when i imported the library my app doesn't work anymore, this the error when i try the command npm run dev
: 我在我的应用程序中使用vue-tour,问题是当我导入库时我的应用程序不再工作,这是我尝试命令时npm run dev
的错误:
error in ./~/vue-tour/dist/vue-tour.umd.js
Module build failed: Error: Couldn't find preset "@vue/app" relative to directory "C:\\xampp\\htdocs\\avanttia\\node_modules\\vue-tour"
at C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:46:20)
at Object.module.exports (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:163:20)
@ ./resources/assets/js/wizard/main.js 49:15-34
@ multi ./resources/assets/js/wizard/main.js
Importing the library like this: 像这样导入库:
import '@/bootstrap'
import VueDragDrop from 'vue-drag-drop'
import VueTour from 'vue-tour'
import Wizard from '@/wizard/containers/Wizard.vue'
require('/node_modules/vue-tour/dist/vue-tour.css')
const Vue = window.Vue
Vue.use(VueTour)
Vue.use(VueDragDrop)
const vm = new Vue({
el: '#wizard-app',
render: h => h(Wizard)
})
export default vm
Edit: This is mi .babelrc config file: 编辑:这是mi .babelrc配置文件:
{
"presets": [
[ "env", {
"targets": {
"uglify": true,
"node": "current"
},
"modules": false,
"loose": true,
"useBuiltIns": true,
"debug": true,
}]
],
"plugins": [
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]],
["module-resolver", {
"alias": {
"@": "./resources/assets/js"
}
}],
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
}
and the .babelrc config file from the vue-tour library: 和vue-tour库中的.babelrc配置文件:
{
"presets": [
"@vue/app"
]
}
Why vue can't find @vue/app?, looks like there is a conflict in the alias property, but i have no idea how to change without breaking the project config. 为什么vue找不到@ vue / app?,看起来alias属性中存在冲突,但我不知道如何在不破坏项目配置的情况下进行更改。
update: if in the node_modules/vue-tour library i change the .babalrc file to this: 更新:如果在node_modules / vue-tour库中,我将.babalrc文件更改为:
"presets": [
"es2015"
]
it works as expected, but this is undesired as i have to change everywhere i have to deploy this project. 它按预期工作,但这是不希望的,因为我必须改变我必须部署这个项目的所有地方。
After days struggling with this issue, i finally found a solution for this: 经过几天努力解决这个问题,我终于找到了解决方案:
In the webpack.mix.js the es2015 transpilation was done like this: 在webpack.mix.js中,es2015的转换是这样完成的:
{
test: /\.js$/,
exclude: /node_modules\/(?!(some-library)\/).*/,
include: [/node_modules\/vue-tour/], // <---Added this line!
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.