Rails/Webpacker is not working - ruby-on-rails

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!

Related

Missing node module error even though it's installed on a webdriverio/electron project. (ts-node)

I cannot figure out why I am getting the below error. I'm trying to set up webdriver-io for an existing electron project.
node:internal/errors:465
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\user\automation\product\src\product.client\
node_modules\ts-node\esm\transpile-only' imported from C:\Users\user\automation\product\src\product.client\
at new NodeError (node:internal/errors:372:5)
at finalizeResolution (node:internal/modules/esm/resolve:437:11)
at moduleResolve (node:internal/modules/esm/resolve:1009:10)
at defaultResolve (node:internal/modules/esm/resolve:1218:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
at ESMLoader.import (node:internal/modules/esm/loader:380:22)
at initializeLoader (node:internal/process/esm_loader:74:49)
at loadESM (node:internal/process/esm_loader:87:11)
at runMainESM (node:internal/modules/run_main:51:21) {
code: 'ERR_MODULE_NOT_FOUND'
}
I have been through the google desert. Of course I understand it's not found. But I can't figure out why it's not found? ts-node is installed. My package.json is below:
"devDependencies": {
"#types/chalk": "^2.2.0",
"#types/chart.js": "^2.9.34",
"#types/command-line-args": "^5.0.0",
"#types/execa": "^2.0.0",
"#types/node": "^14.6.0",
"#types/request": "^2.48.7",
"#typescript-eslint/eslint-plugin": "^2.18.0",
"#typescript-eslint/parser": "^2.18.0",
"#wdio/cli": "^8.3.3",
"#wdio/devtools-service": "^7.16.14",
"chalk": "^4.1.0",
"command-line-args": "^5.1.1",
"cross-env": "^7.0.2",
"electron-chromedriver": "^13.0.0",
"electron-packager": "^15.2.0",
"electron-wix-msi": "^3.2.0",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.0",
"execa": "^4.0.3",
"rimraf": "^3.0.2",
"ts-node": "^8.10.2",
"typescript": "^4.9.5",
"wdio-electron-service": "^3.5.1",
"webdriverio": "^7.7.4",
"yarn-run-all": "^3.1.1"
},
"dependencies": {
"chart.js": "2.9.4",
"electron": "^23.0.0",
"react-number-format": "^4.8.0"
}
}
Can any kind soul help me figure out what it's looking for or how to get around it? I'm very frustrated.
I don’t know if you already figured it out or not but I had the exact same error and it was a problem with the version of ts-node. So basically install a newer version of ts-node the one I installed was 10+. Hope this helps.

Invalid UIAccessibilitys 'tablist' error after installing react-native-vector-icons and running pod update on ios

I tried to install react-native-vector-icons and ran pod update and got the following error:
https://i.stack.imgur.com/FcVr0.jpg
now this pops up but I can build and run the app just fine.
is this ok? and how can I fix this ?
after this started happening I unlinked react-native-vector-icons and uninstalled it
but for some reason I still get this error, now I tried debugging it and it seems to have some thing to do with "#react-navigation/bottom-tabs" package.
my package.json:
},
"dependencies": {
"#eva-design/eva": "^2.1.1",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#ui-kitten/components": "^5.1.1",
"#viro-community/react-viro": "^2.20.2",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.11.1",
"react-native-svg": "^12.1.1",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"fsevents": "^2.3.2"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/runtime": "^7.15.3",
"#react-native-community/eslint-config": "^3.0.0",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"jest": "^27.0.6",
"metro-react-native-babel-preset": "^0.66.2",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
would appreciate any help :)
I am facing the same issue. And I resolved it.
Go to node_modules -> #react-navigation -> bottom-tabs.
Find all accessibilityRole (in file BottomTabBar and BottomTabItem -> it is located at bottom-tabs/lib/commonjs/views and bottom-tabs/lib/module/views and bottom-tabs/src/views) and change it to none.
I changed accessibilityRole="tablist" to accessibilityRole="none"
And change accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }) to accessibilityRole: Platform.select({ ios: 'button', default: 'none' })
This issue will be resolved. But when you install new package, you must do it again :))
This is definitely a problem with the built-in react-navigation tabs, but the issue went away when I created a custom tab bar.

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/RCTDefines.h file not found in RCTBridgeModule.h

I was using Expo and I separated expo eject for module use.
And I tried pod install in iOS file. it was work.
Pod installation complete! There are 51 dependencies from the Pod file
and 63 total pods installed.
But An error occurred when the Xcode was opened and the build and run button was pressed.
package.json:
{
"name": "testgame",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-cli": "6.26.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-es2015": "6.24.1",
"jest-expo": "27.0.0",
"react-native-scripts": "1.14.0",
"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"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^8.1.0",
"bignumber.js": "^8.1.1",
"crypto-browserify": "^3.12.0",
"eth-lightwallet": "^3.0.1",
"ethereumjs-tx": "^1.3.7",
"ethereumjs-util": "^6.0.0",
"ethereumjs-wallet-react-native": "^0.6.7",
"expo": "^30.0.0",
"expokit": "^1.8.0",
"formik": "^1.3.2",
"js-sha3": "^0.8.0",
"native-base": "^2.8.2",
"node-libs-browser": "2.1.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-confirmation-code-input": "^1.0.4",
"react-native-fast-crypto": "^1.8.1",
"react-native-fetch-blob": "git+https://github.com/HCL-HO/react-native-fetch-blob-expo.git",
"react-native-fs": "^2.13.3",
"react-native-keychain": "^3.1.2",
"react-native-pin-view": "^2.2.1",
"react-native-secure-randombytes": "^3.0.0",
"react-native-touch-id": "^4.4.1",
"react-navigation": "3.0.4",
"web3": "1.0.0-beta.34",
"yup": "^0.26.6"
}
}
Xcode Version: 10.2.1
I've never used Xcode before, so I'm a beginner. Please explain it in detail. I'd appreciate it if you could explain it with a screenshot.
I made a podsec myself and solved it.
This is not in the official document and requires a fundamental solution from the module developer.
This solution creates a lot of Warning. There's nothing wrong with the code.
Remove react-native-secure-randombytes path from Header Search Path
Unlink react-native-secure-randombytes module - react-native unlink react-native-secure-randombytes
Added react-native-secure-randombytes.podspec from this link
Added next code into pod file:
pod 'react-native-secure-randombytes', :path =>
'../node_modules/react-native-secure-randombytes'
do `pod install'

Angular 5 app not working in ios8 (Browserstack)

I've tested my Angular 5 app on an iPhone 6 running IOS8 (Safari) and in Browserstack. The angular app doesn't run, I just get an empty page and this Javascript error.
Any suggestions?
This is my package.json file. I'm thinking that some package that I added here is causing some conflict and preventing the app from displaying. Previously I had the app able to run in IOS8, but that was with Angular 4.4 and I wasn't using mdbootstrap library.
{
"name": "XXXX",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"i18n": "ng-xi18n"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular-devkit/schematics": "0.0.34",
"#angular/animations": "^5.0.3",
"#angular/common": "^5.0.3",
"#angular/compiler": "^5.0.3",
"#angular/core": "^5.0.3",
"#angular/forms": "^5.0.3",
"#angular/http": "^5.0.3",
"#angular/platform-browser": "^5.0.3",
"#angular/platform-browser-dynamic": "^5.0.3",
"#angular/router": "^5.0.3",
"applicationinsights-js": "^1.0.8",
"bootstrap": "^3.3.7",
"bootstrap-select": "^1.12.4",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"libphonenumber-js": "^0.4.40",
"ng-autosize": "^1.1.0",
"ng-mdb-pro": "XXXX",
"npm-check-updates": "^2.13.0",
"rxjs": "^5.4.2",
"screenfull": "^3.3.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.5",
"#angular/compiler-cli": "^5.0.3",
"#angular/language-service": "^4.3.0",
"#types/applicationinsights-js": "^1.0.2",
"#types/jasmine": "~2.8.2",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~4.0.1",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"protractor": "~5.2.0",
"ts-node": "~3.3.0",
"tslint": "^5.3.2",
"typescript": ">=2.4.2 <2.5.0"
}
}
Had a similar problem. It should be resolved by providing correct polyfills.
you can find browser support info here https://angular.io/guide/browser-support
If you use JIT compiler (not AOT) then safari needs at least ES7 reflect polyfill.
Safari 7 & 8 need also ES6
If you still use the old intl based pipes then do not forget to include them.
For older browsers core-js/es/... imports usually resolve the issues.
Go to your src/polyfills.ts and enable desired polyfills.
There is also a fetch polyfill mentioned in the readme of the generated project, that is not included in polyfill.ts.
import 'whatwg-fetch'; // Run `npm install --save whatwg-fetch`
$ ng build --mangle safari10=true --prod
Follow the next steps
Execute command to generate file .browserslistrc
npx browserslist
Into the file set the last version until you get that you need, in my case I need work with safari 10, then i set the file ".browserslistrc" :
last 2 Chrome version
last 2 Firefox version
last 2 Edge major versions
last 5 Safari major versions
last 5 iOS major versions

Resources