I've just upgraded to ROR 6.1 from 5.4 and have had to start using Webpacker (just used Sprockets before). I've been through the Rails upgrade wizard and installed up-to-date packages through yarn, but can't get Webpacker working. Whenever I run 'bin/webpack-dev-server', I get multiple error messages for each module saying this:
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....
Then when I run the app locally(through NGROK), I see Webpacker requesting a file in 'public/packs/js' that doesn't exist. There's other compiled files, but none with the correct name.
It seems like Webpacker is looking in the wrong place for modules, but everything in the webpacker.yml file seems fine.
Any help would be greatly appreciated!
Oli
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
Gemfile:
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)
// const imagePath = (name) => images(name, true)
require("shopify_app")
