Webpacker 6 is stuck on compiling after upgrade
m-abdurrehman opened this issue · 3 comments
m-abdurrehman commented
I upgraded my webpacker to 6.0.0-rc.5 by following https://github.com/rails/webpacker/blob/master/docs/v6_upgrade.md
and looking shakacode/react_on_rails_demo_ssr_hmr@webpacker-5.x...master
when I run ./bin/webpack --watch --progress it got stuck on
I also tried removing my yarn.lock and node_modules and reinstalling but the issue is still there.
Can someone tell me what I am missing/doing wrong?
Are there any logs in the file to see?
Or how can I take this upgrade step by step?
my package.json
{
"name": "package",
"version": "1",
"description": "nil",
"main": "index.js",
"repository": "******",
"author": "*****",
"license": "MIT",
"private": true,
"scripts": {
"prebuild": "node run app/javascript/react-pos/generate-build-version",
"start-servers": "webdriver-manager update && (webdriver-manager start &) & (appium -p 4725 &) & (appium -p 4724 &) & (appium -p 4723 &)",
"start-desktop-servers": "webdriver-manager update && (webdriver-manager start --seleniumPort=4446 &)",
"test": "protractor spec/javascripts/protractor.conf.js && protractor conf-appium-ipad4.js && protractor conf-appium-galaxytabmini.js && protractor conf-appium-galaxytabs2.js",
"test-desktop": "protractor spec/javascripts/protractor.conf.js",
"test-real-devices": " protractor conf-appium-ipad4.js && protractor conf-appium-galaxytabmini.js && protractor conf-appium-galaxytabs2.js",
"test-android": "protractor conf-appium-galaxytabmini.js && protractor conf-appium-galaxytabs2.js",
"test-ios": "protractor conf-appium-ipad4.js",
"webpack:analyze": "mkdir -p public/packs && node_modules/.bin/webpack --config config/webpack/production.js --profile --json > public/packs/stats.json && node_modules/.bin/webpack-bundle-analyzer public/packs/stats.json"
},
"dependencies": {
"@activeadmin/activeadmin": "^2.9.0",
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/plugin-transform-unicode-regex": "^7.8.3",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.16.0",
"@date-io/date-fns": "2.11.0",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fortawesome/fontawesome-free": "^5.15.3",
"@googlemap-react/core": "^0.1.14",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.58",
"@material-ui/pickers": "^3.3.10",
"@mui/material": "^5.0.2",
"@mui/styled-engine-sc": "^5.0.0",
"@rails/actioncable": "latest",
"@rails/activestorage": "latest",
"@rails/webpacker": "^6.0.0-rc.5",
"@sentry/browser": "^6.13.3",
"@storybook/react": "^6.1.21",
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.10",
"X-editable": "https://github.com/*****/x-editable.git#select2-4.0.0",
"activeadmin_addons": "^1.0.0",
"aos": "2.3.4",
"archiver": "^5.3.0",
"axios": "0.24.0",
"babel-jest": "^27.3.1",
"babel-loader": "^8.1.0",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-react-pug": "^7.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-minify": "^0.5.1",
"bootstrap": "^5.1.3",
"bootstrap-datepicker": "^1.8.0",
"buzz": "^1.2.1",
"caniuse-lite": "^1.0.30000885",
"classnames": "^2.2.6",
"cloudinary-core": "^2.11.4",
"clsx": "^1.0.4",
"coffee-loader": "^3.0.0",
"coffeescript": "^2.3.2",
"concurrently": "^6.3.0",
"connected-react-router": "^6.8.0",
"core-js": "3.19.1",
"cross-env": "^7.0.3",
"crypto-js": "^4.0.0",
"css-loader": "^6.5.0",
"date-fns": "^2.25.0",
"date-fns-tz": "^1.1.6",
"dsbridge": "^3.1.4",
"eco-loader": "^0.1.0",
"env-yaml": "^0.1.2",
"env-yaml-webpack-plugin": "^0.1.3",
"enzyme-to-json": "^3.4.3",
"eslint": "^8.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-loader": "^5.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"fetch-mock": "^9.11.0",
"file-loader": "^6.2.0",
"firebase": "^9.2.0",
"formik": "^2.2.9",
"hammerjs": "^2.0.8",
"highcharts": "^9.0.1",
"history": "^5.1.0",
"html5-notification": "^3.0.0",
"husky": "^7.0.4",
"hypernova": "^2.5.0",
"hypernova-react": "^2.1.0",
"i18n": "^0.13.3",
"i18n-js": "^3.5.1",
"i18next": "^21.4.0",
"i18next-browser-languagedetector": "^6.1.2",
"immutability-helper": "^3.1.1",
"ionic-native": "^2.9.0",
"iscroll": "^5.2.0",
"ismobilejs": "^1.1.1",
"iso-currency": "^0.2.8",
"jest": "^27.3.1",
"jquery": "^3.6.0",
"jquery-countdown": "^2.2.0",
"jquery-datetimepicker": "^2.5.21",
"jquery-parallax.js": "^1.5.0",
"jquery-pjax": "^2.0.1",
"jquery-touchswipe": "^1.6.15",
"jquery-ui-dist": "^1.12.1",
"jquery-ujs": "^1.2.2",
"js-cookie": "^3.0.1",
"js-sha256": "^0.9.0",
"jschannel": "^1.0.2",
"json-form-data": "^1.7.1",
"json-loader": "^0.5.7",
"jsrsasign": "^10.1.11",
"jst": "^0.0.13",
"jstz": "^2.0.0",
"lazysizes": "^5.3.2",
"lint-staged": "^11.2.6",
"list.js": "^2.3.1",
"local-time": "^2.1.0",
"localforage": "^1.7.3",
"localstorage-memory": "^1.0.3",
"lodash": "^4.17.15",
"luxon": "^2.0.2",
"mapbox-gl-geocoder": "^2.0.1",
"material-ui-phone-number": "^3.0.0",
"materialize-css": "^1.0.0",
"mini-css-extract-plugin": "^2.4.3",
"moment": "^2.22.2",
"moment-timezone": "^0.5.26",
"node-fpe": "^2.0.1",
"node-geocoder": "^3.27.0",
"node-pre-gyp": "^0.17.0",
"node-sass": "^6.0.1",
"notistack": "^2.0.3",
"pepjs": "^0.5.3",
"pnp-webpack-plugin": "^1.5.0",
"popper.js": "^1.14.4",
"postcss": "^8.3.11",
"postcss-loader": "^6.2.0",
"prettier": "^2.4.1",
"prop-types": "^15.7.2",
"protractor": "^7.0.0",
"pug": "^3.0.2",
"pug-loader": "^2.4.0",
"pusher-js": "^7.0.3",
"q": "^1.5.1",
"query-string": "^7.0.1",
"qz-tray": "^2.1.0-2",
"rails-ujs": "^5.2.1",
"react": "^17.0.2",
"react-code-input": "^3.10.0",
"react-compound-timer": "^1.1.15",
"react-countdown": "^2.2.1",
"react-countdown-now": "^2.1.1",
"react-datetime-picker": "^3.2.0",
"react-device-detect": "^2.1.2",
"react-dom": "^17.0.2",
"react-geocode": "^0.2.3",
"react-google-autocomplete": "2.6.0",
"react-google-maps": "^9.4.5",
"react-helmet": "^6.1.0",
"react-i18next": "^11.4.0",
"react-infinite-scroller": "^1.2.4",
"react-map-gl": "^6.1.17",
"react-medium-image-zoom": "^4.3.4",
"react-paypal-button-v2": "^2.6.3",
"react-perfect-scrollbar": "^1.5.3",
"react-redux": "^7.1.1",
"react-redux-firebase": "^3.4.0",
"react-resource": "https://github.com/*******/react-resource.git",
"react-router": "^5.1.2",
"react-router-config": "^5.0.0",
"react-router-dom": "^5.1.2",
"react-schemaorg": "^2.0.0",
"react-scripts": "^4.0.3",
"react-scroll": "^1.8.1",
"react-select": "^5.2.0",
"react-sticky": "^6.0.3",
"react-test-renderer": "^17.0.2",
"react-timeout": "^2.0.1",
"react-transition-group": "^4.3.0",
"react_ujs": "^2.4.4",
"redux": "^4.0.4",
"redux-devtools": "^3.5.0",
"redux-firestore": "^0.15.0",
"redux-form": "^8.3.5",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-persist": "^6.0.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.9",
"requirejs": "^2.3.6",
"reselect": "^4.0.0",
"resolve-url-loader": "^4.0.0",
"reverse-geocode": "^1.3.3",
"rimraf": "^3.0.0",
"rsvp": "^4.8.5",
"sass-loader": "^12.3.0",
"schema-dts": "^1.0.0",
"select2": "^4.1.0-rc.0",
"sha.js": "^2.4.11",
"spectrum-colorpicker": "^1.8.1",
"spine": "^1.6.2",
"spine.mobile": "^1.0.0",
"styled-components": "^5.3.1",
"sw-loader": "^0.1.2",
"sweetalert2": "^11.1.9",
"swiper": "^7.2.0",
"tag-it": "^2.0.0",
"tailwindcss": "^2.2.19",
"timezone-support": "^2.0.2",
"typescript": "^4.4.4",
"underscore": "^1.9.1",
"url-loader": "^4.1.1",
"uuid": "^8.3.2",
"wait-on": "^6.0.0",
"webpack": "^5.51.1",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-chunk-hash": "^0.6.0",
"webpack-cli": "^4.8.0",
"webpack-merge": "^5.8.0",
"yaml-loader": "^0.6.0"
},
"babel": {
"presets": [
"./node_modules/@rails/webpacker/package/babel/preset.js"
]
},
"browserslist": [
"defaults"
],
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@webpack-cli/serve": "^1.6.0",
"cypress": "^8.7.0",
"cypress-xpath": "^1.6.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",
"postcss-import": "^14.0.2",
"react-refresh": "^0.10.0",
"semver": "^7.3.2",
"webpack-dev-server": "^4.4.0"
}
}
My webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/webpacker
webpack_compile_output: true
# Additional paths webpack should look up modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths:
[
"app/assets/javascripts",
"vendor/assets/javascripts",
"vendor/assets/stylesheets",
]
extract_css: true
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
# Hot Module Replacement updates modules while the application is running without a full reload
hmr: false
client:
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
# May also be a string
# webSocketURL:
# hostname: "0.0.0.0"
# pathname: "/ws"
# port: 8080
# Should we use gzip compression?
compress: true
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
allowed_hosts: "all"
pretty: true
headers:
"Access-Control-Allow-Origin": "*"
static:
watch:
ignored: "**/node_modules/**"
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
test_local:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
justin808 commented
@m-abdurrehman try reviewing the upgrade steps again.
Use rc.6.
https://github.com/rails/webpacker/blob/master/docs/v6_upgrade.md
You've got duplicate declarations of dependencies, like webpack. I suggest removing those.
You can also file an issue https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/issues if you think there's an issue. Sounds like you have some debugging to do.
Also, it's a good idea to compare what you get when you make a new Rails app and see what default rails/webpacker v6 has.
CC: @guillaumebriday
justin808 commented
@guillaumebriday I recommend that we close this issue.
m-abdurrehman commented
@justin808 thanks,
Temporarily, work has been paused. May check later.