upgrading from 4.0.2 to 4.0.7

[akoskm]

Upgrading from 4.0.2 to 4.0.7 introduces several devDependencies that weren't required in 4.0.2:

 "@babel/plugin-proposal-class-properties": "7.5.0",
 "@babel/plugin-syntax-dynamic-import": "7.2.0",
 "@babel/plugin-transform-runtime": "7.5.0",
 "babel-loader": "8.0.6",
 "babel-plugin-dynamic-import-node": "2.3.0",
 "file-loader": "4.0.0",
 "webpack-cli": "3.3.6",
 "webpack-dev-server": "3.7.2"

I followed https://github.com/rails/webpacker#upgrading and https://github.com/rails/webpacker/blob/master/CHANGELOG.md to upgrade. I also copied the contents of https://github.com/rails/webpacker/blob/master/lib/install/config/babel.config.js over my local version of the same file.

I'm just curious if I'm doing something wrong that makes these new dependencies appear or this is ok.

Some of these dependencies like @babel/plugin-transform-runtime, @babel/plugin-proposal-class-properties were used in babel.config.js at 4.0.2 as well but webpacker worked just fine without include these packages in package.json.

[akoskm]

Any idea why these new dependencies got added between these minor versions?

[jakeNiemiec]

Only webpack-dev-server should be in your devDeps. Can you directly link which document said to put (eg) file-loader into devDeps?

Can you additionally paste your entire package.json?

[akoskm]

Hi @jakeNiemiec, thanks for responding on this! After following the instructions here https://github.com/rails/webpacker#upgrading file-loader appeared with the other new devDependencies I listed. I didn't add anything to package.json manually, this is the diff after the update in package.json:

[jakeNiemiec]

The problem is that your devDeps are invalid to begin with. Can you paste your entire package.json?

[jakeNiemiec]

If you don't want to make it public, you can tag me in an unlisted https://gist.github.com and I can comment there.

[akoskm]

@jakeNiemiec I think I just did that. Mentioned you in the comment section of a secret gist.

[akoskm]

We can continue the discussion here:

{
  "name": "example",
  "private": true,
  "engines": {
    "node": "10.*",
    "npm": "6.*",
    "yarn": "1.17.*"
  },
  "dependencies": {
    "@babel/preset-react": "7.0.0",
    "@fortawesome/fontawesome-svg-core": "1.2.19",
    "@fortawesome/free-brands-svg-icons": "5.9.0",
    "@fortawesome/free-regular-svg-icons": "5.9.0",
    "@fortawesome/free-solid-svg-icons": "5.9.0",
    "@rails/webpacker": "4.0.7",
    "actioncable": "5.2.3",
    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
    "bootstrap": "4.3.1",
    "clipboard": "2.0.4",
    "datatables.net": "1.10.19",
    "datatables.net-buttons": "1.5.6",
    "datatables.net-dt": "1.10.19",
    "datatables.net-keytable": "2.5.0",
    "datatables.net-responsive": "2.2.3",
    "datatables.net-responsive-dt": "2.2.3",
    "datatables.net-select": "1.3.0",
    "dayjs": "1.8.14",
    "fusioncharts": "3.13.1",
    "jquery": "3.4.1",
    "poll-js": "0.0.3",
    "popper.js": "1.15.0",
    "prop-types": "15.7.2",
    "rails-erb-loader": "5.5.2",
    "rails-ujs": "5.2.3",
    "react-dom": "16.8.6",
    "webpack": "4.31.0"
  },
  "devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/plugin-proposal-class-properties": "7.5.0",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-runtime": "7.5.0",
    "@babel/preset-env": "7.4.4",
    "@babel/register": "7.4.4",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.6",
    "babel-plugin-dynamic-import-node": "2.3.0",
    "babel-plugin-import-noop": "1.0.1",
    "babel-plugin-webpack-alias": "2.1.2",
    "chai": "4.2.0",
    "chai-enzyme": "1.0.0-beta.1",
    "css-loader": "2.1.1",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "eslint": "5.16.0",
    "eslint-plugin-mocha": "5.3.0",
    "eslint-plugin-prettier": "3.1.0",
    "eslint-plugin-react": "7.13.0",
    "file-loader": "4.0.0",
    "jsdom": "15.0.0",
    "mocha": "6.1.4",
    "postcss-loader": "3.0.0",
    "prettier": "1.18.2",
    "react": "16.8.6",
    "sass-loader": "7.1.0",
    "sinon": "7.3.2",
    "sinon-chai": "3.3.0",
    "style-loader": "0.23.1",
    "webpack-cli": "3.3.6",
    "webpack-dev-server": "3.7.2"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "env": {
      "test": {
        "plugins": [
          [
            "import-noop",
            {
              "extensions": [
                "css",
                "scss",
                "png",
                "jpg",
                "svg"
              ]
            }
          ],
          [
            "babel-plugin-webpack-alias",
            {
              "config": "./config/webpack/test.js"
            }
          ]
        ]
      }
    }
  }
}

[jakeNiemiec]

"devDependencies": {
    ⭐️"@babel/core": "7.4.4",
    ⭐️"@babel/plugin-proposal-class-properties": "7.5.0",
    ⭐️"@babel/plugin-syntax-dynamic-import": "7.2.0",
    ⭐️"@babel/plugin-transform-runtime": "7.5.0",
    ⭐️"@babel/preset-env": "7.4.4",
    ⭐️"@babel/register": "7.4.4",
    "babel-eslint": "10.0.1",
    ⭐️"babel-loader": "8.0.6",
    ⭐️"babel-plugin-dynamic-import-node": "2.3.0",
    ⭐️"babel-plugin-import-noop": "1.0.1",
    ⭐️"babel-plugin-webpack-alias": "2.1.2",
    "chai": "4.2.0",
    "chai-enzyme": "1.0.0-beta.1",
    ⭐️"css-loader": "2.1.1",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "eslint": "5.16.0",
    "eslint-plugin-mocha": "5.3.0",
    "eslint-plugin-prettier": "3.1.0",
    "eslint-plugin-react": "7.13.0",
    ⭐️"file-loader": "4.0.0",
    ⭐️"jsdom": "15.0.0",
    "mocha": "6.1.4",
    ⭐️"postcss-loader": "3.0.0",
    "prettier": "1.18.2",
    ⭐️"react": "16.8.6",
    ⭐️"sass-loader": "7.1.0",
    "sinon": "7.3.2",
    "sinon-chai": "3.3.0",
    ⭐️"style-loader": "0.23.1",
    ⭐️"webpack-cli": "3.3.6",
    "webpack-dev-server": "3.7.2"
  },

⭐️ = Move this line to "dependencies" and run yarn install (yarn will re-sort)

If you run unit tests in a production env, move everything that is needed for those tests into "dependencies".

[akoskm]

I'm running my tests on CI but not in the production env. To see the difference here's my package.json before upgrading from 4.0.2 to 4.0.7:

{
  "name": "example",
  "private": true,
  "engines": {
    "node": "10.*",
    "npm": "6.*",
    "yarn": "1.17.*"
  },
  "dependencies": {
    "@babel/preset-react": "7.0.0",
    "@fortawesome/fontawesome-svg-core": "1.2.19",
    "@fortawesome/free-brands-svg-icons": "5.9.0",
    "@fortawesome/free-regular-svg-icons": "5.9.0",
    "@fortawesome/free-solid-svg-icons": "5.9.0",
    "@fortawesome/react-fontawesome": "0.1.4",
    "@rails/webpacker": "4.0.2",
    "actioncable": "5.2.3",
    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
    "bootstrap": "4.3.1",
    "clipboard": "2.0.4",
    "datatables.net": "1.10.19",
    "datatables.net-buttons": "1.5.6",
    "datatables.net-dt": "1.10.19",
    "datatables.net-keytable": "2.5.0",
    "datatables.net-responsive": "2.2.3",
    "datatables.net-responsive-dt": "2.2.3",
    "datatables.net-select": "1.3.0",
    "dayjs": "1.8.14",
    "fusioncharts": "3.13.1",
    "jquery": "3.4.1",
    "poll-js": "0.0.3",
    "popper.js": "1.15.0",
    "prop-types": "15.7.2",
    "rails-erb-loader": "5.5.2",
    "rails-ujs": "5.2.3",
    "react-dom": "16.8.6",
    "webpack": "4.31.0"
  },
  "devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/preset-env": "7.4.4",
    "@babel/register": "7.4.4",
    "babel-eslint": "10.0.1",
    "babel-plugin-import-noop": "1.0.1",
    "babel-plugin-module-resolver": "3.2.0",
    "chai": "4.2.0",
    "chai-enzyme": "1.0.0-beta.1",
    "css-loader": "2.1.1",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "eslint": "5.16.0",
    "eslint-plugin-mocha": "5.3.0",
    "eslint-plugin-prettier": "3.1.0",
    "eslint-plugin-react": "7.13.0",
    "eslint-plugin-react-hooks": "1.7.0",
    "jsdom": "15.0.0",
    "mocha": "6.1.4",
    "postcss-loader": "3.0.0",
    "prettier": "1.18.2",
    "react": "16.8.6",
    "sass-loader": "7.1.0",
    "sinon": "7.3.2",
    "sinon-chai": "3.3.0",
    "style-loader": "0.23.1",
    "webpack-dev-server": "3.3.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "env": {
      "test": {
        "plugins": [
          [
            "import-noop",
            {
              "extensions": [
                "css",
                "scss",
                "png",
                "jpg",
                "svg"
              ]
            }
          ],
          [
            "module-resolver",
            {
              "alias": {
                "packs": "./app/javascript/packs"
              }
            }
          ]
        ]
      }
    }
  }
}

I'm still not sure why all those new dependencies appeared.

[jakeNiemiec]

I'm still not sure why all those new dependencies appeared.

This is because your 4.0.2 package.json was invalid. See: https://github.com/rails/webpacker/blob/master/docs/yarn.md#add-an-npm-module-to-devdependencies

Did moving them to "dependencies" work?

[akoskm]

Did moving them to "dependencies" work?
There might be a misunderstanding. My application works after upgrading to webpacker 4.0.7. here's gem info from the project's folder:

$ gem info webpacker

*** LOCAL GEMS ***

webpacker (4.0.7, 4.0.2)
    Authors: David Heinemeier Hansson, Gaurav Tiwari
    Homepage: https://github.com/rails/webpacker
    License: MIT
    Installed at (4.0.7): /Users/akoskm/.rbenv/versions/2.6.1/lib/ruby/gems/2.6.0
                 (4.0.2): /Users/akoskm/.rbenv/versions/2.6.1/lib/ruby/gems/2.6.0

    Use webpack to manage app-like JavaScript modules in Rails

It's just the new packages that I don't know why are added.
Looking at yarn.lock some of these packages, like file-loader, "@babel/plugin-proposal-class-properties": "7.5.0", "@babel/plugin-syntax-dynamic-import": "7.2.0", "@babel/plugin-transform-runtime": "7.5.0", appear to be a dependency of @rails/webpacker@4.0.7.

[akoskm]

I'll start this upgrade process again but first I'll move the packages that should be in devDependencies there. Then proceed with these instructions: https://github.com/rails/webpacker#upgrading.

[akoskm]

@jakeNiemiec I just run the commands for upgrade and packages.json ended up with a substantially smaller diff than earlier, I don't know what caused this behavior.

I used the following to upgrade to 4.0.7:

bundle update webpacker
rails webpacker:binstubs
yarn upgrade @rails/webpacker@4.0.7
yarn upgrade webpack-dev-server --latest

after that my packages.json is:

$ git diff package.json
diff --git a/package.json b/package.json
index e8cd552d..9f364621 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@fortawesome/free-regular-svg-icons": "5.9.0",
     "@fortawesome/free-solid-svg-icons": "5.9.0",
     "@fortawesome/react-fontawesome": "0.1.4",
-    "@rails/webpacker": "4.0.2",
+    "@rails/webpacker": "4.0.7",
     "actioncable": "5.2.3",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "bootstrap": "4.3.1",
@@ -62,7 +62,7 @@
     "sinon": "7.3.2",
     "sinon-chai": "3.3.0",
     "style-loader": "0.23.1",
-    "webpack-dev-server": "3.3.1"
+    "webpack-dev-server": "3.8.0"
   },
   "babel": {
     "presets": [

We can close this issue because I can't reproduce the behavior I initially reported.