Rails webpacker is failing to compile Vue.js core methods

user_10089578 0
Viewed 579

The setup :

Gemfile:

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

I have called : $ bundle i $ npm i without failures.

I have not touched anything within the code, just created a rails app with :

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

The default Vue files do not compile into public/packs when I rails s.

Calling $ rake webpacker:compile throws those errors :

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.

I realy don't get what's going on. Those methods are called through JSX syntaxe I presume and it seems as if vue doesn't exists when compiling ...

Any idea ?

webpacker vue.js compilation ruby-on-rails
1 Answers

Just found a solution :

When you $ rails new myapp --webpack=vue, it generates a package.json which uses vue-loader@16+ ... But this package rely on compiler-sfc@3+ to work ... And this last one rely on Vue3 ... That's a nice first glance to a rabbit hole, isn't it ?

Just change the version of vue-loader to 15.9.7 and - in my case - remove compiler-sfc dependency, it'll save you a lot of troubles. This version of vue-loader also needs a version of css-loader prior to 6, so add css-loader@5.2.7 to your packages config and you are good to go !

Have a good one.

user_100895780
Related