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"?