Webpack 不会在 Rails 应用程序中编译 Vue 文件
Webpack won't compile Vue files in a Rails application
我们有一个 Rails 5 项目,它是 运行ning webpack(通过 webpacker gem)以及正常的资产管道。在过去的几个月里,一切都很顺利,直到昨天,由于某种原因,webpack 停止编译我们的 Vue 文件。
这是错误堆栈跟踪:
ERROR in ./app/javascript/packs/Comments.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="comments-list">
| <div v-for="comment in comments">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Comments.vue
ERROR in ./app/javascript/packs/Comment.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <div class="main-comment">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Comment.vue
ERROR in ./app/javascript/packs/Autocomplete.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="comment-box" v-bind:class="{'open':openSuggestion}">
| <textarea class="form-control" type="text" :value="value" @input="updateValue($event.target.value)"
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Autocomplete.vue
ERROR in ./app/javascript/packs/cart.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="container">
| <div v-if="bundles.length != 0 || courses.length != 0" class="payment-section">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/cart.vue
ERROR in ./app/javascript/packs/itemCheckout.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <li class="course-checkout">
| <a class="course-name"> {{ item.name }} </a>
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/itemCheckout.vue
ERROR in ./app/javascript/packs/WishlistWindow.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="wishlist-window">
| <div v-if="bundles.length == 0 && courses.length == 0" class="wrapper empty">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/WishlistWindow.vue
ERROR in ./app/javascript/packs/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="app">
| <div class="new-comment-wrapper">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/app.vue
ERROR in ./app/javascript/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="app">
| <p>{{ message }}</p>
@ ./app/javascript/packs/hello_vue.js 9:0-29
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/packs/quizapp.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="quizapp">
| <div class="row">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/quizapp.vue
ERROR in ./app/javascript/packs/WishlistLink.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <li id="wishlist" @mouseover="showWishlist" @mouseleave="displayWishlist = false" :data-content="wishlistLength" >
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/WishlistLink.vue
ERROR in ./app/javascript/packs/PayPalCheckout.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div :id="id" class="paypal-button"></div>
| </template>
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/PayPalCheckout.vue
这是 package.json 文件:
{
"name": "lacerba",
"version": "1.0.0",
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
"main": "index.js",
"directories": {
"lib": "lib",
"test": "test"
},
"dependencies": {
"@rails/webpacker": "^3.3.0",
"autocomplete-vue": "^1.0.3",
"axios": "^0.16.2",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"browserify": "^14.1.0",
"browserify-incremental": "^3.1.1",
"caniuse-lite": "^1.0.30000815",
"coffeescript": "1.12.7",
"css-loader": "^0.28.10",
"modernizr": "3.3.1",
"moment": "^2.18.1",
"videojs-mux": "^2.0.27",
"vue": "^2.5.13",
"vue-analytics": "^5.8.0",
"vue-live-edit": "^1.0.3",
"vue-loader": "^14.1.1",
"vue-momentjs": "^0.1.1",
"vue-paypal-checkout": "^2.1.8",
"vue-stripe-checkout": "^0.0.4",
"vue-template-compiler": "^2.5.13",
"vue-typeahead": "^2.3.2",
"webpack": "^3.11.0"
},
"devDependencies": {
"video.js": "^5.20.3",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^2.11.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/ugolino/lacerba.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ugolino/lacerba/issues"
},
"homepage": "https://github.com/ugolino/lacerba#readme"
}
我尝试使用不同版本的 webpack and/or webpack-web-server,但是,它总是以相同的方式结束。虽然安装了 Babel,但它似乎无法读取我的 .vue 文件。
值得一提的是,在过去的几个月里,这种情况每隔一段时间就会发生一次,我总是只删除 node_modules 目录和 运行 yarn 命令将从头开始重新安装所有内容并消除错误。
不幸的是,情况已不再如此。有什么想法吗?
我遇到了类似的问题,主要是 webpack 版本问题。
我有 webpack 版本 4.1.1,我的配置使用 3.11
您可以使用 webpack --version
检查您的版本
在那之后 re-run 一个 bundle exec rails webpacker:install
和 yarn install
它对我有用
我们有一个 Rails 5 项目,它是 运行ning webpack(通过 webpacker gem)以及正常的资产管道。在过去的几个月里,一切都很顺利,直到昨天,由于某种原因,webpack 停止编译我们的 Vue 文件。
这是错误堆栈跟踪:
ERROR in ./app/javascript/packs/Comments.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="comments-list">
| <div v-for="comment in comments">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Comments.vue
ERROR in ./app/javascript/packs/Comment.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <div class="main-comment">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Comment.vue
ERROR in ./app/javascript/packs/Autocomplete.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="comment-box" v-bind:class="{'open':openSuggestion}">
| <textarea class="form-control" type="text" :value="value" @input="updateValue($event.target.value)"
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Autocomplete.vue
ERROR in ./app/javascript/packs/cart.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="container">
| <div v-if="bundles.length != 0 || courses.length != 0" class="payment-section">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/cart.vue
ERROR in ./app/javascript/packs/itemCheckout.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <li class="course-checkout">
| <a class="course-name"> {{ item.name }} </a>
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/itemCheckout.vue
ERROR in ./app/javascript/packs/WishlistWindow.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="wishlist-window">
| <div v-if="bundles.length == 0 && courses.length == 0" class="wrapper empty">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/WishlistWindow.vue
ERROR in ./app/javascript/packs/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="app">
| <div class="new-comment-wrapper">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/app.vue
ERROR in ./app/javascript/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="app">
| <p>{{ message }}</p>
@ ./app/javascript/packs/hello_vue.js 9:0-29
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js
ERROR in ./app/javascript/packs/quizapp.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div id="quizapp">
| <div class="row">
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/quizapp.vue
ERROR in ./app/javascript/packs/WishlistLink.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <li id="wishlist" @mouseover="showWishlist" @mouseleave="displayWishlist = false" :data-content="wishlistLength" >
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/WishlistLink.vue
ERROR in ./app/javascript/packs/PayPalCheckout.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div :id="id" class="paypal-button"></div>
| </template>
@ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/PayPalCheckout.vue
这是 package.json 文件:
{
"name": "lacerba",
"version": "1.0.0",
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
"main": "index.js",
"directories": {
"lib": "lib",
"test": "test"
},
"dependencies": {
"@rails/webpacker": "^3.3.0",
"autocomplete-vue": "^1.0.3",
"axios": "^0.16.2",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"browserify": "^14.1.0",
"browserify-incremental": "^3.1.1",
"caniuse-lite": "^1.0.30000815",
"coffeescript": "1.12.7",
"css-loader": "^0.28.10",
"modernizr": "3.3.1",
"moment": "^2.18.1",
"videojs-mux": "^2.0.27",
"vue": "^2.5.13",
"vue-analytics": "^5.8.0",
"vue-live-edit": "^1.0.3",
"vue-loader": "^14.1.1",
"vue-momentjs": "^0.1.1",
"vue-paypal-checkout": "^2.1.8",
"vue-stripe-checkout": "^0.0.4",
"vue-template-compiler": "^2.5.13",
"vue-typeahead": "^2.3.2",
"webpack": "^3.11.0"
},
"devDependencies": {
"video.js": "^5.20.3",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^2.11.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/ugolino/lacerba.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ugolino/lacerba/issues"
},
"homepage": "https://github.com/ugolino/lacerba#readme"
}
我尝试使用不同版本的 webpack and/or webpack-web-server,但是,它总是以相同的方式结束。虽然安装了 Babel,但它似乎无法读取我的 .vue 文件。
值得一提的是,在过去的几个月里,这种情况每隔一段时间就会发生一次,我总是只删除 node_modules 目录和 运行 yarn 命令将从头开始重新安装所有内容并消除错误。
不幸的是,情况已不再如此。有什么想法吗?
我遇到了类似的问题,主要是 webpack 版本问题。
我有 webpack 版本 4.1.1,我的配置使用 3.11
您可以使用 webpack --version
检查您的版本
在那之后 re-run 一个 bundle exec rails webpacker:install
和 yarn install
它对我有用