Rails Webpacker 找不到模块刚刚升级到 ROR 6.1

如何解决Rails Webpacker 找不到模块刚刚升级到 ROR 6.1

我刚刚从 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 文件中的所有内容似乎都很好。

任何帮助将不胜感激！

奥利

---

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

app/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)
require("shopify_app")

解决方法

运行yarn add @rails/activestorage

它解决了这个错误