Webpack не будет компилировать файлы Vue в приложении Rails

У нас есть проект Rails 5, который запускает webpack (через гем webpacker) вместе с обычным конвейером ресурсов. За последние несколько месяцев все работало как шарм, до вчерашнего дня, по какой-то причине, 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 и / или webpack-web-server, однако всегда получается одинаково. Хотя Babel установлен, кажется, что он не может читать мои файлы.vue.

Стоит отметить, что в последние месяцы это происходило время от времени, и я всегда просто удалял каталог node_modules и запускал команду yarn, которая установит все заново с нуля и избавит от ошибки.

К сожалению, это больше не так. Любая идея?

1 ответ

Решение

У меня была похожая проблема, в основном из-за версии webpack. У меня была версия 4.1.1 webpack, и моя конфигурация работала с 3.11. Вы можете проверить свою версию с webpack --version После этого перезапустите bundle exec rails webpacker:install а также yarn installУ меня сработало

Другие вопросы по тегам