Final 4.0 release

[gauravtiwari]

Sorry, it took a while and thanks for the support.

Could everyone please give the latest RC a try and see if everything works as needed? If no major issues found, I will go ahead a make a 4.0 stable release today.

Thank you 🙏

[mayordwells]

Hi @gauravtiwari Don't know why my project fails to compile after upgrading.

Here's my package.json file

{
  "name": "conectar",
  "private": true,
  "scripts": {
    "db:setup": "docker-compose run --rm web rails db:drop db:create db:migrate db:seed",
    "lint": "yarn run esw --ext .js --ext .jsx app/javascript --watch",
    "lint:fix": "yarn run esw --ext .js --ext .jsx app/javascript --fix",
    "bundle-stats": "NODE_ENV=development ./bin/webpack --config config/webpack/development.js --profile --json > public/packs/stats.json",
    "bundle-analyze": "node_modules/.bin/webpack-bundle-analyzer public/packs/stats.json"
  },
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "@rails/webpacker": "https://github.com/rails/webpacker",
    "actioncable": "^5.2.2",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.23",
    "conectar-ws": "^0.0.9",
    "cookiesjs": "^3.0.3",
    "emoji-mart": "^2.9.2",
    "jwt-decode": "^2.2.0",
    "lodash.flatten": "^4.4.0",
    "moment": "^2.23.0",
    "node-sass": "4.11.0",
    "pimg": "^1.1.3",
    "postcss-cssnext": "^3.1.0",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-accessible-accordion": "^2.4.5",
    "react-actioncable-provider": "^2.0.0",
    "react-activestorage-provider": "^0.7.0",
    "react-big-calendar": "^0.20.3",
    "react-dom": "^16.7.0",
    "react-infinite-scroll-component": "^4.3.0",
    "react-redux": "^6.0.0",
    "react-responsive-carousel": "^3.1.45",
    "react-router-dom": "^4.3.1",
    "react-router-transition": "^1.2.1",
    "react-transition-group": "^2.5.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "semantic-ui-react": "^0.84.0",
    "sweetalert": "^2.1.2",
    "uuid": "^3.3.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "concurrently": "^4.1.0",
    "eslint": "^5.12.1",
    "eslint-config-prettier": "^3.6.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-watch": "^4.0.2",
    "prettier": "^1.16.0",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

And here's a screenshot of the error

And my entry file looks like this:

// Main js file
import React from 'react';
import { render } from 'react-dom';
import ActionCable from 'actioncable';
import { ActionCableProvider } from 'react-actioncable-provider';

import App from '../src/components';

document.addEventListener('DOMContentLoaded', async () => {

  const cable = ActionCable.createConsumer(WS_ROOT);

  render(
    <ActionCableProvider cable={cable}>
      <App />
    </ActionCableProvider>,
    document.getElementById('root')
  );
});

Take note, it also didn't work when I removed ActionCableProvider from the app wrapper.

I also ran this command to add latest code from new release bundle exec rails webpacker:install

What could be the src of this problem?

[jasl]

Hi, could you look #1887 ?

[mayordwells]

Hi, @jasl seems that's not the problem. Okay, I think I found the src of the problem. After upgrading to rc5 and installing the following changes were made to babel.config.js

I had to return it back to how it was, except the currentEnv on this line - JSON.stringify(currentEnv)

Then everything seems to be working after that, at least it compiled successfully. But my screen remains blank after that.

Not sure if this is a problem with webpacker though. Going to try to debug further.

[gauravtiwari]

@mayordwells

I think a simple upgrade path would be:

1. Create a backup (if you have made changes to config/webpack -> config/webpack_old)
2. Re-run all the installers you have run in the beginning, webpacker:install and webpacker:install:react
3. Copy any plugins and presets from .babelrc to babel.config.js, same for .postcssrcyml to postcss.config.js (only if you have added custom ones)
4. Delete old .babelrc and .postcssrc.yml
5. bundle exec rake app:update:bin (optional but just in case they are changed)
6. Re-run ./bin/webpack-dev-server

[mayordwells]

@gauravtiwari good evening, pls check my comment above.

[jasl]

Hi, @jasl seems that's not the problem. Okay, I think I found the src of the problem. After upgrading to rc5 and installing the following changes were made to babel.config.js

I had to return it back to how it was, except the currentEnv on this line - JSON.stringify(currentEnv)

Then everything seems to be working after that, at least it compiled successfully. But my screen remains blank after that.

Not sure if this is a problem with webpacker though. Going to try to debug further.

I can reproduce on new app (Rails 6 alpha + Webpacker 4 RC3) twice, now I do a quick check again, if problem still here, I'll given a public repo

[mayordwells]

@jasl check there's a RC5 already 😀

[gauravtiwari]

@mayordwells Sorry, app:update:bin please

[jasl]

@mayordwells @gauravtiwari reproduced on Rails 6 beta + Webpacker 4 RC5

I push a PoC at https://github.com/jasl/test_webpacker4

[mayordwells]

@gauravtiwari okay after few hours of debugging, I found out that the gem is the cause of the blank screen - gem 'webpacker', '>= 4.0.0.rc.5'

I have reverted back to rc.2 in the mean time.

[gauravtiwari]

Hmm, that's strange. Are you using split chunks? How are you using pack tag helpers?

[mayordwells]

@gauravtiwari To be honest, I don't fully understand the meaning of split chunks, but I have it in webpack/environment.js like so environment.splitChunks();

This is how I'm using pack tag helpers -

= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

[gauravtiwari]

You would need to use new chunks helper if you are enabling split chunks. Otherwise, you can disable environment.splitChunks() by deleting the line and regular pack tag should work fine.

[gauravtiwari]

See changelog: https://github.com/rails/webpacker/blob/master/CHANGELOG.md#400rc4---2019-01-21

[mayordwells]

@gauravtiwari so you are right after removing environment.splitChunks() rc5 worked. But then I thought to use those tags *_packs_with_chunks_tag for test and activated back split chunks.

Got the following error:

We are currently using React Suspense and Lazy for lazy loading pages on the frontend. Here's an example of our webpack log during compilation. BTW this is generated without environment.splitChunks()

Could this be the reason for the error "duplicated mapping key"?

[gauravtiwari]

That seems like some issue in webpacker.yml. Could you please double check if there is no duplicate key there?

[mayordwells]

@gauravtiwari Same error, split chunks activated with environment.splitChunks() Loading packs with - = stylesheet_packs_with_chunks_tag 'application', 'map', 'data-turbolinks-track': 'reload' and = javascript_packs_with_chunks_tag 'application', 'map', 'data-turbolinks-track': 'reload'

Check this gist to see my webpacker.yml

https://gist.github.com/mayordwells/4c3ddb05290b68bfe69dcc7a60ea5631

[gauravtiwari]

@mayordwells Is there a pack called map 'application', 'map'? Just application, which is the pack name should be fine.

[mayordwells]

@gauravtiwari oh wow you were right, its from the webpacker.yml file

my staging config was like this

  staging:
  <<: *default
  compile: false
  # extract_css: true
  cache_manifest: true

fixed it to be like this

staging:
  <<: *default
  compile: false
  # extract_css: true
  cache_manifest: true

[gauravtiwari]

When this error happens?

[gauravtiwari]

Great 👍 http://www.yamllint.com/ (good linter)

[mayordwells]

Now back to this error again:

[mayordwells]

http://www.yamllint.com/

Thanks.

[gauravtiwari]

Did you run the react installer? Also, removed .babelrc?

[gauravtiwari]

Should contain all react specific packages? https://github.com/rails/webpacker/blob/master/lib/install/examples/react/babel.config.js

[mayordwells]

Did you run the react installer? Also, removed .babelrc?

yes I did, since the last time I upgraded to rc2.

It compiles after removing this.

Here's my config right now:

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        require('@babel/preset-env').default,
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      [
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true
        }
      ],
      [
        require('@babel/plugin-transform-regenerator').default,
        {
          async: false
        }
      ],
      isProductionEnv && [
        require('babel-plugin-transform-react-remove-prop-types').default,
        {
          removeImport: true
        }
      ]
    ].filter(Boolean)
  }
}

And now the home page looks like this:

[gauravtiwari]

Ahh, yes, it's an old babel config, which has a typo we fixed later.

Yes, because you are including map in the chunks_tag, please remove (guess you copied from the changelog). That helper tag takes an array, but in your case since it's just one pack - application.

[gauravtiwari]

javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload'

[mayordwells]

javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload'

Okay going to try this now. Thanks.

[gauravtiwari]

Same for stylesheets tag too.

[mayordwells]

@gauravtiwari Great! Everything works perfectly well now. The only issue, it seems, is with the babel.js.config file. The issue @jasl reported is not a webpacker issue. I can help with the problem he has.

[gauravtiwari]

The only issue, it seems, is with the babel.js.config file

Do you mean in RC5?

[mayordwells]

The only issue, it seems, is with the babel.js.config file

Do you mean in RC5?

Yes.

[mayordwells]

RC5 came with this, which I had to remove for the app to compile.

[jasl]

@mayordwells

It is issue, the usage of resolved_path is on README

https://github.com/rails/webpacker#resolved

and my PoC app is actually follow the guide.

I think it relates to Webpacker's bundled file-loader configuration

[mayordwells]

Yes you are right @jasl please check, I found the fix to the issue.

[ro-savage]

We've been using rc2 on our staging site for a couple weeks without issues.

Upgrading to rc5 and using javascript_packs_with_chunks_tag. we get a manifest error stating rails can't find vendor.js in the manifest.

Webpacker can't find vendors in /Users/rowan/www/runn-app/public/packs/manifest.json.

We were using

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'vendors', 'data-turbolinks-track': 'reload' %>

and updated to

    <%= javascript_packs_with_chunks_tag 'application', 'vendors', 'data-turbolinks-track': 'reload' %>

Our webpack dev config is:

  mode: "development", // Gives us sane defaults
  output: {
    pathinfo: false,
    filename: "[name].js",
    chunkFilename: "[name].chunk.js"
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  },

And the output of json manifest (images etc removed)

{
  "application.css": "/packs/application-6789eef5.css",
  "application.css.map": "/packs/application-6789eef5.css.map",
  "application.js": "/packs/application.js",
  "application.js.map": "/packs/application.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/vendors.chunk.js",
        "/packs/application.js"
      ],
      "js.map": [
        "/packs/vendors.chunk.js.map",
        "/packs/application.js.map"
      ],
      "css": [
        "/packs/application-6789eef5.css"
      ],
      "css.map": [
        "/packs/application-6789eef5.css.map"
      ]
    }
  },
  "vendors.js": "/packs/vendors.chunk.js",
  "vendors.js.map": "/packs/vendors.chunk.js.map",
}

Leaving it the original way using javascript_pack_tag works fine.

And

 <%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>

Also appears to work, bringing in vendor. But I am not sure if its just some weird caching issue or it is actually adding the vendor tag as well.

(this is all done in dev mode with rails s and webpack-dev-server

[ro-savage]

In production using <%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %> without the vendor will also add the vendor js file.

Maybe I am unclear on the instructions for when you need to add different js files to the packs tag.

[connorshea]

I'm working on an updated v4-upgrade.md guide to replace #1755 but I ran into a problem, and I'm not able to get webpacker to output css now.

Previously the sass loader was added like so and everything worked fine, but now no CSS is generated by webpacker:

environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});

This is what I've got so far: https://github.com/connorshea/ContinueFromCheckpoint/pull/77

Any ideas?

EDIT: Figured it out, my webpacker.yml file had extract_css: false set by default. I'm not sure I understand why the generated webpacker.yml file is set with extract_css: false by default but true on production? That doesn't seem logical.

EDIT 2: Looks like this is because of #1625, I've mentioned it in the upgrade guide because this seems like a pretty annoying change for anyone it effects.

[connorshea]

I've opened #1905 to provide an Upgrade Guide. If anyone is trying to upgrade, I'd appreciate feedback there to make sure others can learn from whatever you struggle with :)

[gauravtiwari]

@ro-savage You just need the application pack there,

   <%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>

When using this helper, you would only need to specify pack names and not the dependent vendor chunk. If you notice, in your manifest it has both pack and chunks included:

application": {
      "js": [
        "/packs/vendors.chunk.js",
        "/packs/application.js"
      ],

[gauravtiwari]

Thanks, @connorshea 🙏 I will leave it for a bit to get feedbacks and will merge later today.

[jasl]

@gauravtiwari sorry to annoying you but could you check #1887 ? I think current resolved_path behavior isn't consist with https://github.com/rails/webpacker#resolved described.

[jasl]

Or does the README out of date that need to be updated? thanks

[gauravtiwari]

@jasl Thanks, Yes I think it's an issue. I worked on it a bit yesterday but wasn't able to make the PR. Will get it merged today.

[ro-savage]

Thanks for the feedback @gauravtiwari - Looks good from our point of view, had been stable for us since rc2.

[majksner]

@gauravtiwari

For me #1439 is still not fixed, if no changes in JS it always compiles both locally and in capistrano

[gauravtiwari]

@majksner Recompilation depends on the digest, please ensure it's checked into source control. Perhaps, you could elaborate the problem you are encountering into steps, that would be helpful.

[majksner]

@gauravtiwari Sorry for confusion. It works when I run commands manually, but when run by Capistrano it always compiles. Tried this but it doesn't work. I see some issues referencing ENV["CI"] but I can't find it merged into master branch.

Edit:

I forgot to mention that my tmp folder is symlink to shared/tmp, it's very usual for Capistrano.

[somebody32]

Found an edge case with a new javascript_packs_with_chunks_tag: if you have multiple webpack configs (ie module.exports = [webpack_config1, webpack_config2]) then manifest's entrypoints will have only the info from the last config while having chunks from both.

With that case, javascript_packs_with_chunks_tag is not working because it constantly returns not found entries but manual inclusion with javascript_pack_tag works