forem
forem copied to clipboard
forem
WIP: Upgrade deprecated webpacker gem
What type of PR is this? (check all applicable)
- [x] Refactor
- [x] Optimization
Description
The webpacker gem is now retired and an initial attempt to upgrade to js-bundling-rails was made. However, we would lose out on Code Splitting which we currently use. Because of this PR took the turn to use Shakapacker instead.
Related Tickets & Documents
- Closes #18189
QA Instructions, Screenshots, Recordings
-
bin/setup -
bin/startup - The app should work with live reloading in development (same as
main) - Tests should pass
UI accessibility concerns?
None
Added/updated tests?
- [x] No, and this is why: Only replacing tooling. Existing tests should continue to pass
[Forem core team only] How will this change be communicated?
- [x] I will share this change internally with the appropriate teams
[optional] What gif best describes this PR or how it makes you feel?
The problem I'm dealing with at the moment is fixing the way modules are imported. I feel like this can be managed via some config in config/webpacker.yml or config/webpack.config.js. This is one example of the errors thrown when doing bin/setup && bin/startup in this branch:
module loading error example
21:53:59 webpacker.1 | ERROR in ./app/javascript/utilities/search/index.js 3:0-42
21:53:59 webpacker.1 | Module not found: Error: Can't resolve '@utilities/http' in '/Users/fdoxyz/iandi/devto/forem/app/javascript/utilities/search'
21:53:59 webpacker.1 | resolve '@utilities/http' in '/Users/fdoxyz/iandi/devto/forem/app/javascript/utilities/search'
21:53:59 webpacker.1 | Parsed request is a module
21:53:59 webpacker.1 | using description file: /Users/fdoxyz/iandi/devto/forem/package.json (relative path: ./app/javascript/utilities/search)
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | resolve as module
21:53:59 webpacker.1 | looking for modules in /Users/fdoxyz/iandi/devto/forem/app/javascript
21:53:59 webpacker.1 | single file module
21:53:59 webpacker.1 | using description file: /Users/fdoxyz/iandi/devto/forem/package.json (relative path: ./app/javascript/@utilities/http)
21:53:59 webpacker.1 | no extension
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http doesn't exist
21:53:59 webpacker.1 | .js
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http.js doesn't exist
21:53:59 webpacker.1 | .jsx
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http.jsx doesn't exist
21:53:59 webpacker.1 | .mjs
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http.mjs doesn't exist
21:53:59 webpacker.1 | .ts
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http.ts doesn't exist
21:53:59 webpacker.1 | .tsx
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http.tsx doesn't exist
21:53:59 webpacker.1 | .coffee
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http.coffee doesn't exist
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/@utilities/http doesn't exist
21:53:59 webpacker.1 | looking for modules in /Users/fdoxyz/iandi/devto/forem/app/assets
21:53:59 webpacker.1 | single file module
21:53:59 webpacker.1 | using description file: /Users/fdoxyz/iandi/devto/forem/package.json (relative path: ./app/assets/@utilities/http)
21:53:59 webpacker.1 | no extension
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http doesn't exist
21:53:59 webpacker.1 | .js
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http.js doesn't exist
21:53:59 webpacker.1 | .jsx
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http.jsx doesn't exist
21:53:59 webpacker.1 | .mjs
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http.mjs doesn't exist
21:53:59 webpacker.1 | .ts
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http.ts doesn't exist
21:53:59 webpacker.1 | .tsx
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http.tsx doesn't exist
21:53:59 webpacker.1 | .coffee
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http.coffee doesn't exist
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/assets/@utilities/http doesn't exist
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/utilities/search/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/utilities/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/javascript/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/app/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | looking for modules in /Users/fdoxyz/iandi/devto/forem/node_modules
21:53:59 webpacker.1 | single file module
21:53:59 webpacker.1 | using description file: /Users/fdoxyz/iandi/devto/forem/package.json (relative path: ./node_modules/@utilities/http)
21:53:59 webpacker.1 | no extension
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http doesn't exist
21:53:59 webpacker.1 | .js
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http.js doesn't exist
21:53:59 webpacker.1 | .jsx
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http.jsx doesn't exist
21:53:59 webpacker.1 | .mjs
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http.mjs doesn't exist
21:53:59 webpacker.1 | .ts
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http.ts doesn't exist
21:53:59 webpacker.1 | .tsx
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http.tsx doesn't exist
21:53:59 webpacker.1 | .coffee
21:53:59 webpacker.1 | Field 'browser' doesn't contain a valid alias configuration
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http.coffee doesn't exist
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/forem/node_modules/@utilities/http doesn't exist
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/devto/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /Users/fdoxyz/iandi/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /Users/fdoxyz/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /Users/node_modules doesn't exist or is not a directory
21:53:59 webpacker.1 | /node_modules doesn't exist or is not a directory
In the error example from above app/javascript/utilities/search/index.js is attempting to import @utilities/http (located in app/javascript/utilities/http/index.js).
Webpack is attempting to resolve app/javascript/@utilities/http.js which is almost the correct match, but it never attempts to load any of the directories' index.js file (which is how we structure our modules).