Rails webpacker 无法编译 Vue.js 核心方法

如何解决Rails webpacker 无法编译 Vue.js 核心方法

设置：

宝石文件：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.2'

# Bundle edge Rails instead: gem 'rails',github: 'rails/rails',branch: 'main'
gem 'rails','~> 6.1.4'
# Use postgresql as the database for Active Record
gem 'pg','~> 1.1'
# Use Puma as the app server
gem 'puma','~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails','>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker','~> 5.0'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder','~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis','~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt','~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing','~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap','>= 1.4.4',require: false

group :development,:test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug',platforms: [:mri,:mingw,:x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console','>= 4.1.0'
  # display performance information such as sql time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler','~> 2.0'
  gem 'listen','~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara','>= 3.26'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files,so bundle the tzinfo-data gem
gem 'tzinfo-data',platforms: [:mingw,:mswin,:x64_mingw,:jruby]

package.json :

{
  "name": "bubble-worlds","private": true,"dependencies": {
    "@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "5.4.0","@vue/compiler-sfc": "^3.1.5","vue": "^2.6.14","vue-loader": "^16.3.1","vue-template-compiler": "^2.6.14","webpack": "^4.46.0","webpack-cli": "^3.3.12"
  },"version": "0.1.0","devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

webpacker.yml：

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets','engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .vue
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

我打过电话： $ bundle i $ npm i 没有失败。

我没有触及代码中的任何内容，只是创建了一个 Rails 应用程序：

$ rails new app --skip-turbolinks --webpack=vue --database=postgresql

当我 public/packs 时，默认的 Vue 文件不会编译成 rails s。

调用 $ rake webpacker:compile 会引发这些错误：

Compiling...
Compilation Failed:
Hash: 84ecf9168dd19a51983a
Version: webpack 4.46.0
Time: 3973ms
Built at: 19/07/2021 15:53:36
 5 assets
Entrypoint application = js/application-471d300c711a6489cb98.js js/application-471d300c711a6489cb98.js.map
Entrypoint hello_vue = js/hello_vue-247694b52604ed8c92a7.js js/hello_vue-247694b52604ed8c92a7.js.map
 [1] (webpack)/buildin/global.js 905 bytes {1} [built]
 [2] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css 755 bytes {1} [built]
 [5] ./app/javascript/packs/application.js 426 bytes {0} [built]
 [6] (webpack)/buildin/module.js 552 bytes {0} [built]
 [7] ./app/javascript/channels/index.js 205 bytes {0} [built]
 [8] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[12] ./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css 345 bytes {1} [built]
[14] ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=style&index=0&id=2888e551&scoped=true&lang=css 786 bytes {1} [built]
[16] ./app/javascript/packs/hello_vue.js + 5 modules 3.34 KiB {1} [built]
     | ./app/javascript/packs/hello_vue.js 1.85 KiB [built]
     | ./app/javascript/app.vue 340 bytes [built]
     | ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true 185 bytes [built]
     | ./app/javascript/app.vue?vue&type=script&lang=js 334 bytes [built]
     | ./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true 593 bytes [built]
     | ./node_modules/babel-loader/lib??ref--7-0!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=script&lang=js 68 bytes [built]
    + 8 hidden modules

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 9:24-36
"export 'createBlock' (imported as '_createBlock') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 10:4-16
"export 'createVNode' (imported as '_createVNode') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 9:10-20
"export 'openBlock' (imported as '_openBlock') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 6:0-11
"export 'popScopeId' (imported as '_popScopeId') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 4:0-12
"export 'pushScopeId' (imported as '_pushScopeId') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 10:28-44
"export 'todisplayString' (imported as '_todisplayString') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--13-0!./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true) 2:29-41
"export 'withScopeId' (imported as '_withScopeId') was not found in 'vue'
 @ ./app/javascript/app.vue?vue&type=template&id=2888e551&scoped=true
 @ ./app/javascript/app.vue
 @ ./app/javascript/packs/hello_vue.js


Though the "loose" option was set to "false" in your @babel/preset-env config,it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties,@babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-methods",{ "loose": true }]
to the "plugins" section of your Babel config.

我真的不明白发生了什么。这些方法是通过 JSX 语法调用的，我认为编译时似乎不存在 vue ...

有什么想法吗？

解决方法

刚刚找到了一个解决方案：

当您 $ rails new myapp --webpack=vue 时，它会生成一个 package.json，它使用 vue-loader@16+ ... 但是这个包依赖于 compiler-sfc@3+ 来工作...... 而这最后一个依赖于 Vue3 ... 这是对兔子洞的第一眼，不是吗？

只需将 vue-loader 的版本更改为 15.9.7 并且 - 在我的情况下 - 删除 compiler-sfc 依赖项，它会为您省去很多麻烦。 此版本的 vue-loader 还需要 6 之前的 css-loader 版本，因此将 css-loader@5.2.7 添加到您的包配置中，您就可以开始使用了！

祝你好运。