ruby-on-rails - Rails Webpacker 找不到模块（刚刚升级到 ROR 6.1）

Question

我刚刚从 5.4 升级到 ROR 6.1，不得不开始使用 Webpacker（之前只使用过 Sprockets）。我已经通过 Rails 升级向导并通过 yarn 安装了最新的包，但无法让 Webpacker 工作。每当我运行“bin/webpack-dev-server”时，每个模块都会收到多条错误消息，说明如下：

   ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve '@rails/activestorage' in '/Users/oli/pre_product/app/javascript/packs'
resolve '@rails/activestorage' in '/Users/oli/xxx/app/javascript/packs'
  Parsed request is a module
  using description file: /Users/oli/xxx/package.json (relative path: ./app/javascript/packs)
    Field 'browser' doesn't contain a valid alias configuration.... 

然后，当我在本地（通过 NGROK）运行应用程序时，我看到 Webpacker 请求“public/packs/js”中不存在的文件。还有其他已编译的文件，但没有一个具有正确名称的文件。

似乎 Webpacker 在错误的位置寻找模块，但 webpacker.yml 文件中的所有内容似乎都很好。

任何帮助将不胜感激！

奥利

---

包.json：

{
  "name": "XXX",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.6.3",
    "@rails/webpackerj": "^6.0.0-pre.1",
    "@shopify/app-bridge": "^1.28.0",
    "@shopify/app-bridge-utils": "^1.28.0",
    "@shopify/polaris": "^5.12.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "chartjs-plugin-annotation": "^0.5.7",
    "prop-types": "^15.7.2",
    "rails-ujs": "^5.2.4-4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react_ujs": "^2.6.0",
    "turbolinks": "^5.2.0",
    "typescript": "^4.1.3",
    "webpack-cli": "^4.3.0"
  },
  "devDependencies": {
    "non-digest-webpack-plugin": "0.0.1",
    "webpack-dev-server": "^3.11.1"
  }
}

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:
    - .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

宝石文件：

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

ruby '2.5.8'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.1.0'
# Use sqlite3 as the database for Active Record

# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 6.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

group :production do
  # Use postgresql as the database for Active Record
  gem 'pg', '>= 0.18', '< 2.0'
end

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
gem 'sprockets', '~> 3.0'
gem "clearance" 
gem 'spec', '~> 5.3', '>= 5.3.4'
gem 'rspec'

gem 'webpacker'

gem 'jquery-rails'
gem 'chart-js-rails', '~> 0.1.6'
gem 'image_processing', '~> 1.2'
gem 'chartjs-ror'
gem 'inline_svg'
gem 'mailgun-ruby', '~>1.1.6'
gem 'liquid'


# Use Redis adapter to run Action Cable in production
#gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# 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'
  gem 'sqlite3'
  # 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'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

gem "non-stupid-digest-assets"

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



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

gem 'rake'
gem 'shopify_app', '~> 15.0'
gem 'shopify_api', '~> 9.0'

gem 'httparty'
#for CORS, i.e. external domain requests via the api controller
gem 'rack-cors'
gem 'whenever', require: false

应用程序/javascript/packs/application.js：

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

console.log('Hello World from Webpacker')


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery");


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
require("shopify_app")

标签： ruby-on-railsruby-on-rails-6webpacker

Answer 1

跑yarn add @rails/activestorage

它解决了这个错误