Heroku error: One CLI for webpack must be installed - ruby-on-rails

I'm trying to deploy my ruby on rails app to heroku but I get the following errors: heroku logs. I'm working on Rails 6.0.5.1 and I was able to deploy the app perfectly before, so I don't know what could be wrong. Here is my package.json
{
"name": "proyecto",
"private": true,
"dependencies": {
"#activeadmin/activeadmin": "^2.13.1",
"#popperjs/core": "^2.11.6",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.3.0",
"bootstrap": "5.2.2",
"bootstrap-icons": "^1.9.1",
"jquery": "^3.6.1",
"popper.js": "^1.16.1",
"turbolinks": "^5.2.0",
"webpack": "^4.0.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"engines": {
"node": "14.20.0"
}
}
I have already tried the following solution I found online: heroku config:set YARN_PRODUCTION=true , but it just creates a run time error because it never stops compiling. I also tried to reinstall webpack-cli but it didn´t solve the problem. At this point I'm not sure if this is the error causing the app to crash or if it's the one that it's after it :
ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json
:
I also tried to fix that problem comenting the line
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
and the main page charges, but the dropdowns aren't working so It's not a viable solution. Also tried to set
extract_css: true
to false, and it doesn't change anything. I feel like I have tried every solution online and none of it works for me

Related

Rails Webpacker React: /bin/webpack-dev-server The command moved into a separate package: #webpack-cli/serve

Today I create a fresh Rails webpacker app with command:
$ rails new my-app --webpacker=react -d mysql
The fresh app generated smoothly until I tried to run:
$ ./bin/webpack-dev-server
The webpack-cli return a message:
The command moved into a separate package: #webpack-cli/serve
Would you like to install serve? (That will run yarn add -D #webpack-cli/serve) (yes/NO) :
I tried to select yes but the installation of webpack-cli is not success with message:
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ #webpack-cli/serve#1.5.2
info All dependencies
└─ #webpack-cli/serve#1.5.2
Done in 2.11s.
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
at processTicksAndRejections (internal/process/task_queues.js:95:5)
and when I run ./bin/webpack-dev-server command I get error messages:
/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46
return func(...args);
^
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
at promptForInstallation (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/cli.js:32:43
at Object.<anonymous> (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
Here is my package.json:
{
"name": "my-app",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.14.5",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^4.0.0"
}
}
and my node.js version
$ node -v
v14.17.5
For now, temporarily I solve it by using the previous version:
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
Update:
The webpack-cli & webpack-dev-server at devDependencies of fresh package.json generated by using rails new my-app --webpacker=react are:
"dependencies": {
...
"webpack-cli": "^3.3.12"
...
},
"devDependencies": {
"webpack-dev-server": "^4.0.0"
}
If we see from here, we found that webpack-dev-server v.4.0.0 depends on "webpack-cli": "^4.7.2" which is incompatible with fresh rails webpacker package configurations that use "webpack-cli": "^3.3.12" as dependency.
Usually we can check webpack-cli info by using command npx webpack-cli info. But now when I try, I got an error and found a warning:
$ npx webpack-cli info
...
warning " > #webpack-cli/info#1.3.0" has incorrect peer dependency "webpack-cli#4.x.x".
...
TypeError: Class constructor InfoCommand cannot be invoked without 'new'
at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
at processTicksAndRejections (internal/process/task_queues.js:95:5)
...
For now, the only configurations that work with my environment only:
"dependencies": {
...
"webpack-cli": "^3.3.12"
...
},
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
Update:
Please see DHH comment here
Case close.

Deployment with Heroku and React/Rails with Webpack

I am currently working on an app that uses react as front-end and rails as back-end, all of this using webpack. I have decided to deploy my app using Heroku, but I came to some troubles. My production front-end is awful, but my backend API works just fine (the requests in the production are made correctly.). The app runs correctly locally.
This is the link from my Heroku app: https://andrei-tocu-jogging-app.herokuapp.com/
This is my package.json:
{
"name": "jogging-app",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.12.10",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.2.1",
"ajax-request": "^1.2.3",
"antd": "^4.11.1",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.5.1",
"node-fetch": "^2.6.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.2"
},
"engines": {
"yarn": "1.22.4"
}
}
I have also tried to run these commands to install the dependencies:
heroku run bundle install
heroku run yarn install
Is there a proper configuration to deploy the application when using react webpack?

React Navigation - "Cannot read property 'State' of undefined" even though gesture-handler is installed & linked

Problem
I get the error "Cannot read property 'State' of undefined" when trying to use a stack navigator in React Navigation. Switch and bottomTabNavs are working perfectly fine.
If anyone knows how to solve this problem that would be amazing!
What I've tried
I've already checked to make sure react-native-gesture-handler is installed and linked properly.
My Package.json:
{
"name": "app",
"version": "5.1.0",
"private": true,
"devDependencies": {
"babel-jest": "23.6.0",
"fs-extra": "^6.0.1",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"react-test-renderer": "16.7.0",
"reactotron-react-native": "^3.2.0",
"replace-in-file": "^3.4.2"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios --simulator=\"iPhone X\"",
"apk": "cd android && ./gradlew assembleRelease",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.11",
"react": "16.6.3",
"react-native": "0.58.0-rc.2",
"react-native-firebase": "^5.2.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-rate": "^1.1.6",
"react-native-sensitive-info": "5.2.9",
"react-native-splash-screen": "^3.2.0",
"react-native-status-bar-height": "^2.3.1",
"react-native-table-component": "^1.2.0",
"react-navigation": "^3.3.2"
}
}
The issue was that the pod file was not installed even though react-native link indicated the package was successfully linked.
To solve the issue follow these steps:
cd ios
Pod install
Clean ios folder
Run application

react native app - getting error app.js cannot read property 'filename' of undefined

well i am not getting any answers to this error ..
npm update to latest and downgrade also tried.
nothing works
package.json so it i get some help ...
{
"name": "kelsnew",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "~27.0.0",
"react-native-scripts": "^1.14.1",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"dependencies": {
"expo": "^28.0.0",
"jest": "^23.4.1",
"react": "16.3.1",
"react-native": "^0.56.0"
}
}
I tried several things and several things in combination, but ultimately when I added #babel to my .babelrc plugin line without any other changes. I then deleted node_modules, package-lock.json and ran npm install.
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["#babel/transform-react-jsx-source"]
}
}
}
I also upgraded from Nodejs 8 to 10 along the way (and stayed there). I don't think it material, but I mention it just in case, check your node --version.
Check your app.js for any calls to the property filename such as someObject.filename, this is most likely due to some object not being instantiated and thus you are getting undefined.filename which throws an error.

Rails/Webpacker is not working

I have a Rails/React project. It's using Rails/webpack 3.3.0.
To precompile react code, I executed:
rails assets:precompile RAILS_ENV=development
But I am getting this error:
[Webpacker] Compilation failed:
(node:47256) DeprecationWarning: Tapable.apply is deprecated.
Call apply on the plugin directly instead (node:47256)
DeprecationWarning:
Tapable.plugin is deprecated. Use new API on .hooks instead
TypeError: dep.getResourceIdentifier is not a function
Is this something you faced before? Would you like to help me to fix thsi problem?
Here is my package.json
{
"dependencies": {
"#rails/webpacker": "3.3.0",
"babel-core": "6",
"babel-loader": "^7.1.4",
"babel-preset-react": "^6.24.1",
"caniuse-lite": "^1.0.3000697",
"classnames": "^2.2.5",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.2.2",
"debounce": "^1.1.0",
"es6-shim": "^0.35.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"mobile-detect": "^1.4.1",
"prop-types": "^15.6.1",
"react": "16.0.0",
"react-addons-css-transition-group": "^16.0.0-alpha.3",
"react-addons-update": "^15.6.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.2.0",
"react-dom-factories": "^1.0.2",
"react_ujs": "^2.4.4",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "4.0.0"
},
"devDependencies": {
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.0"
},
"license": "UNLICENSED",
"private": true
}
The version of Webpacker you are using isn't compatible with Webpack 4.
However, it looks like support is close, Webpack 4.x support has been merged:
https://github.com/rails/webpacker/pull/1316
And there's a Webpacker 4.x preview release:
https://rubygems.org/gems/webpacker
So I believe you want to use Webpack 3.x for the time being, or go bleeding edge and try the prerelease.
With that said, I'm going to give the prerelease a go, I've been waiting for Webpack 4.x support!

Resources