Skip to content

Commit 75c7fc5

Browse files
authored
Remove duplicate browserlist line to v6 upgrade 📖
Also reformatted list a bit, and added `assets:precompile` as a final check.
1 parent 571a09f commit 75c7fc5

File tree

1 file changed

+47
-29
lines changed

1 file changed

+47
-29
lines changed

docs/v6_upgrade.md

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Webpacker used to configure Webpack indirectly, which lead to a [complicated sec
1111
This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for [Vue](https://github.com/rails/webpacker#other-frameworks).
1212

1313
## How to upgrade to Webpacker v6 from v5
14+
1415
1. If you are changing from the v5 default for `source_entry_path`:
1516
```yml
1617
source_path: app/javascript
@@ -26,10 +27,12 @@ This means you have to configure integration with frameworks yourself, but webpa
2627
Check if you had any entry point files in child directories of your `source_entry_path`. Files for entry points in child directories are not supported by rails/webpacker v6.
2728

2829
2. Rename `config/webpack` to `config/webpack_old`
30+
2931
3. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
32+
3033
4. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
31-
5. Remove .browserslistrc from the root of your Rails app
32-
6. Upgrade the Webpacker Ruby gem and NPM package
34+
35+
5. Upgrade the Webpacker Ruby gem and NPM package
3336

3437
Note: [Check the releases page to verify the latest version](https://github.com/rails/webpacker/releases), and make sure to install identical version numbers of webpacker gem and `@rails/webpacker` npm package. (Gems use a period and packages use a dot between the main version number and the beta version.)
3538

@@ -52,9 +55,11 @@ Example going to a specific version:
5255
bundle exec rails webpacker:install
5356
```
5457

55-
7. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` and **at most one call** to `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932). If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
56-
8. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
57-
9. Copy over any custom webpack config from `config/webpack_old`. Common code previously called 'environment' should be changed to 'base', and import `environment` changed to `webpackConfig`.
58+
6. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` and **at most one call** to `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932). If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
59+
60+
7. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
61+
62+
8. Copy over any custom webpack config from `config/webpack_old`. Common code previously called 'environment' should be changed to 'base', and import `environment` changed to `webpackConfig`.
5863

5964
```js
6065
// config/webpack/base.js
@@ -64,32 +69,45 @@ Example going to a specific version:
6469
module.exports = merge(webpackConfig, customConfig)
6570
```
6671

67-
10. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
68-
69-
11. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
70-
```json
71-
"babel": {
72-
"presets": [
73-
"./node_modules/@rails/webpacker/package/babel/preset.js"
74-
]
75-
}
76-
```
77-
12. Remove `postcss.config.js` if you don't use `PostCSS`.
78-
13. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
79-
80-
```js
81-
{
82-
resolve: {
83-
extensions: ['.ts', '.tsx', '.vue', '.css']
72+
9. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
73+
74+
10. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
75+
76+
```json
77+
"babel": {
78+
"presets": [
79+
"./node_modules/@rails/webpacker/package/babel/preset.js"
80+
]
8481
}
85-
}
86-
```
87-
14. Some dependencies were removed in [PR 3056](https://github.com/rails/webpacker/pull/3056). If you see the error: `Error: Cannot find module 'babel-plugin-macros'`, or similar, then you need to `yarn add <dependency>` where <dependency> might include: `babel-plugin-macros`, `case-sensitive-paths-webpack-plugin`, `core-js`, `regenerator-runtime`. Or you might want to remove your dependency on those.
88-
15. If you run `RAILS_ENV=production rake assets:precompile`, you may get an error that `bin/yarn` does not exist. Copy the file [bin/yarn](https://github.com/rails/webpacker/blob/master/lib/install/bin/yarn) to your `/bin` directory.
89-
16. Remove overlapping dependencies from your `package.json` and rails/webpacker's `package.json`. For example, don't include `webpack` directly as that's a dependency of rails/webpacker.
90-
17. Review the new default's changes to `webpacker.yml` and `config/webpack`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
91-
18. Make sure that you can run `bin/webpack` without errors before trying your app!
82+
```
83+
84+
11. Remove `postcss.config.js` if you don't use `PostCSS`.
85+
86+
12. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
87+
88+
```js
89+
{
90+
resolve: {
91+
extensions: ['.ts', '.tsx', '.vue', '.css']
92+
}
93+
}
94+
```
95+
96+
13. Some dependencies were removed in [PR 3056](https://github.com/rails/webpacker/pull/3056). If you see the error: `Error: Cannot find module 'babel-plugin-macros'`, or similar, then you need to `yarn add <dependency>` where <dependency> might include: `babel-plugin-macros`, `case-sensitive-paths-webpack-plugin`, `core-js`, `regenerator-runtime`. Or you might want to remove your dependency on those.
97+
98+
14. If `bin/yarn` does not exist, create an executable [yarn](https://github.com/rails/webpacker/blob/master/lib/install/bin/yarn) file in your `/bin` directory.
99+
100+
15. Remove overlapping dependencies from your `package.json` and rails/webpacker's `package.json`. For example, don't include `webpack` directly as that's a dependency of rails/webpacker.
101+
102+
16. Review the new default's changes to `webpacker.yml` and `config/webpack`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
103+
104+
17. Make sure that you can run `bin/webpack` without errors.
105+
106+
18. Try running `RAILS_ENV=production bin/rails assets:precompile`. If all goes well, don't forget to clean the generated assets with `bin/rails assets:clobber`.
107+
108+
19. Try your app!
92109

93110
## Examples of v5 to v6
111+
94112
1. [React on Rails Project with HMR and SSR](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/compare/webpacker-5.x...master)
95113
2. [Vue and Sass Example](https://github.com/guillaumebriday/upgrade-webpacker-5-to-6)

0 commit comments

Comments
 (0)