We Keep Coding

Error when attempting to include Crypto module: Can't resolve 'crypto'

I am working on a register user setup in React JS, installed crypto library from to secure passwords but when I run the program , it gives me an error :
ERROR in ./node_modules/jwa/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in 'E:\Node
Tutorial\registerSetup\client\node_modules\jwa'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"crypto": false }
Here is my package.json file :
{
"name": "registerSetup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_ENV= production node server",
"dev": "nodemon server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.1",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"dotenv": "^15.0.0",
"express": "^4.17.2",
"express-jwt": "^6.1.0",
"express-validator": "^6.14.0",
"google-auth-library": "^7.11.0",
"jsonwebtoken": "^8.5.1",
"loadash": "^1.0.0",
"lodash": "^4.17.21",
"mongoose": "^6.1.8",
"morgan": "^1.10.0",
"node-fetch": "^3.2.0",
"nodemailer": "^6.7.2",
"nodemon": "^2.0.15"
}
}
The package.json for my react folder in registerSetup --> https://pastebin.com/hqBs7J4s

I think you should go to your node_modules/react-scripts/config/webpack.config.json and there write the following code in resolve block
fallback: {
"crypto": require.resolve("crypto-browserify")
}
Note: crypto-browserify should be installed

Crypto is a built-in Node module you don't have to install it. Uninstall "crypto": "^1.0.1" and then try:
const crypto = require("crypto")

You can try to downgrade the react-scripts in package.json version to : 4.0.3

Picker has been removed from React Native. It can now be installed and imported from '#react-native-picker/picker'

PLEASE HELP!!I have search the entire project which DOES NOT use Pricker at all but when I run npx react-native run-android it throws out :
ERROR Invariant Violation: Picker has been removed from React Native.
It can now be installed and imported from
'#react-native-picker/picker' instead of 'react-native'. See
https://github.com/react-native-picker/picker ERROR Invariant
Violation: Module AppRegistry is not a registered callable module
(calling runApplication). A frequent cause of the error is that the
application entry file path is incorrect. This can also happen when
the JS bundle is corrupt or there is an early initialization error
when loading React Native.
Same problem faced by this guy at the below link...No answer available... Please help...Thank you in advance
Invariant Violation: Picker has been removed from React Native
I have #react-native-picker/picker installed
This is my package.json
"name": "MYAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build-android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.android.js --bundle-output iOS/main.jsbundle --platform 'android' --assets-dest ./ --dev false --reset-cache",
"test": "jest",
"test:watch": "npm run test -- --watch",
"postinstall": "npx jetify",
"extractLangs": "react-gettext-parser --output messages.pot 'src/**/*.js'"
},
"dependencies": {
"#react-native-community/cli": "^6.3.1",
"#react-native-community/masked-view": "0.1.11",
"#react-native-picker/picker": "^2.2.1",
"axios": "0.24.0",
"base-64": "1.0.0",
"date-fns": "2.27.0",
"gettext.js": "git+https://github.com/freiserg/gettext.js.git",
"lodash": "4.17.21",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-device-info": "8.4.8",
"react-native-eject": "0.1.2",
"react-native-extended-stylesheet": "0.12.0",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^2.1.0",
"react-native-keyboard-aware-scroll-view": "0.9.5",
"react-native-navigation": "7.24.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-splash-screen": "3.3.0",
"react-native-swipeout": "2.3.6",
"react-native-swiper": "1.6.0",
"react-native-vector-icons": "9.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "7.2.6",
"redux": "4.1.2",
"redux-logger": "3.0.6",
"redux-persist": "6.0.0",
"redux-thunk": "2.4.1",
"shitty-qs": "1.0.1",
"tcomb-form-native": "0.6.20"
},
"devDependencies": {
"babel-eslint": "10.0.1",
"babel-jest": "27.4.5",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"eslint": "8.4.1",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.27.1",
"jest": "27.4.5",
"jetifier": "2.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"nock": "13.2.1",
"react-gettext-parser": "1.16.0",
"react-native-mock": "0.3.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "1.5.4"
},
"jest": {
"preset": "react-native",
"verbose": true,
"setupFiles": [
"<rootDir>/__tests__/mocks/global.js"
],
"testMatch": [
"**/__tests__/**/*.spec.js?(x)"

Install #react-native-picker/picker
Upgrade "native-base": "2.15.2"

Officially picker has been removed from react-native. You can use the community edition. #react-native-community/picker

Delete node modules folder then run yarn install at the terminal in your projects directory.
Then try to run the app again.
I am not sure this will help but since it says This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. it might be worth trying.

In my case, tcomb-form-native caused this error because it has not been updated for years. I hope this PR will be merged soon.
https://github.com/gcanti/tcomb-form-native/pull/605

1.Install patch-package into your project,
Install #react-native-picker/picker into your project,
go to node_modules\react-native\index.js
replace all
invariant(
false,
'DatePickerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '#react-native-
community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-
datetimepicker/datetimepicker',
);
or
invariant(
false,
........ DatePicker ..........
);
to
return require('#react-native-picker/picker')
run npx patch-package react-native
rebuild your app and it will be work

Axios + Vue + ag-grid-vue ... Dependency not found

So, I'm pretty new to VueJS. Integrating axios has never really been a problem on any of my other apps, but for some reasons this one just won't show up.
It doesn't like npm only, or CDN only, or the current implementation of CDN+npm install.
Hope y'all can help me out! Not really sure what the issue is, and googling hasn't been too helpful.
~Desired Outcome:
post via axios within vue application
~Current Status Error:
ERROR Failed to compile with 1 error
"This dependency was not found:
* https://unpkg.com/axios/dist/axios.min.js?vue&type=script&lang=js& in ./src/App.vue
To install it, you can run: npm install --save https://unpkg.com/axios/dist/axios.min.js?vue&type=script&lang=js&"
~What Happened when Running Above Command in zShell:
zsh: parse error near `&'
~package.json file:
"name": "ag-grid",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "App.vue"
},
"dependencies": {
"ag-grid-community": "^25.2.1",
"ag-grid-vue": "^25.2.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-property-decorator": "^8.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
~Relevant script code:
import { AgGridVue } from "ag-grid-vue";
import { axios } from "axios";
import { VueAxios } from "vue-axios";

Change 'import' to 'require', sucrase deployment

I'm trying to put my application into production. But, the teacher who was teaching put it for me, the lib 'sucrase' to use syntax of "import from" instead of "require". Only now Heroku is complaining that he doesn't understand the syntax "import". Is there anything I can do about line of code and configuration? Or do I have to change all "import from" to "require"? ... Lower the logs ...
logs in Heroku
2020-06-27T20:21:41.876688+00:00 app[web.1]: /app/src/server.js:1
2020-06-27T20:21:41.876689+00:00 app[web.1]: import app from './app';
2020-06-27T20:21:41.876690+00:00 app[web.1]: ^^^^^^
2020-06-27T20:21:41.876690+00:00 app[web.1]:
2020-06-27T20:21:41.876691+00:00 app[web.1]: SyntaxError: Cannot use import statement outside a module
2020-06-27T20:21:41.876691+00:00 app[web.1]: at wrapSafe (internal/modules/cjs/loader.js:1054:16)
2020-06-27T20:21:41.876692+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1102:27)
My package.json
{
"name": "futs",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "nodemon src/server.js",
/ ^ ^ ^ Below at the code is a configuration about the 'nodemon' that the teacher gave me
"dev:debug": "nodemon --inspect src/server.js"
},
"dependencies": {
"aws-sdk": "^2.704.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"date-fns": "^2.14.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.2",
"multer-s3": "^2.9.0",
"nodemailer": "^6.4.10",
"pg": "^8.2.1",
"sequelize": "^5.21.13",
"sequelize-cli": "^5.5.1",
"uuid": "^8.1.0",
"yup": "^0.29.1"
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"nodemon": "^2.0.4",
"prettier": "^2.0.5",
"sucrase": "^3.15.0"
}
}
nodemon.json
{
"execMap":{
"js": "node -r sucrase/register"
}
}
I don't know how to run to deploy, if anyone can help me

As you see in the error log : Cannot use import statement outside a module.
import statements are permitted only in ES modules not CommonJS see more about that here :
However you can make Node treat your file as a ES module you need to :
add "type": "module" to package.json .
Add --experimental-modules flag upon running your app(not necessary with Node 13.2.0+ so check your node version with node --version)
as follow :
// package.json
{
"type": "module"
}
take a look here for more information .
OR :
Alternatively you can use the .mjs instead of .jsextension .
SOURCES :
SyntaxError: Cannot use import statement outside a module
https://nodejs.org/api/esm.html .
https://nodejs.org/api/esm.html#esm_enabling .
https://nodejs.org/api/esm.html#esm_code_import_code_statements

To build my app using sucrase I use:
sucrase ./src -d ./dist --transforms imports
This is my package.json file:
"scripts": {
"dev": "nodemon src/server.js",
"build": "sucrase ./src -d ./dist --transforms imports",
"start": "node dist/server.js"
},

Babel / Webpack: Cannot find "yaml-loader" (works in development, not production)

Here's the offending line of code:
import Channel from '!json-loader!yaml-loader!../../../../config/channel.yml'
As you can see, I'm using !s to bypass the normal import loader logic so I can import the parsed YAML file as a local variable at compile-time.
This works perfectly in development (with webpack-dev-server) but fails in production:
Module not found: Error: Can't resolve 'yaml-loader' in '/var/www/www.avfacts.org/releases/20180205125420/app/frontend/views/Episodes'
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Form.vue 87:0-78
# ./app/frontend/views/Episodes/Form.vue
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/routes.js
# ./app/frontend/packs/application.js
Here's my package.json file:
{
"name": "avfacts",
"private": true,
"dependencies": {
"#panter/vue-i18next": "^0.9.1",
"#rails/webpacker": "^3.2.1",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"babel-preset-minify": "^0.2.0",
"i18next": "^10.3.0",
"lodash": "^4.17.4",
"luxon": "^0.4.0",
"marked": "^0.3.12",
"moment": "^2.20.1",
"moment-duration-format": "^2.2.1",
"normalize.css": "^7.0.0",
"numeral": "^2.0.6",
"precss": "^3.1.0",
"simplemde": "^1.11.2",
"vue": "^2.5.13",
"vue-datetime": "^1.0.0-beta.2",
"vue-loader": "^13.7.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1",
"weekstart": "^1.0.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"webpack-dev-server": "^2.11.1",
"yaml-loader": "^0.5.0"
}
}
(and yes, I did try moving yaml-loaders from devDependencies to dependencies even though that shouldn't work, and it did indeed not work)

Have you added loader in your webpack.config.js .
// webpack.config.js
module: {
loaders: [
{
test: /\.yaml$/,
include: path.resolve('data'),
loader: 'yaml',
},
],
}
As its been mentioned in https://www.npmjs.com/package/yaml-loader

EDIT: Nope, that wasn't it. I replaced yaml-loader with yaml-js-loader and called it a day. Still not sure what the problem was.
This problem was seemingly fixed by disabling require 'capistrano/rails/assets in my Capfile, thus disabling the normal Rails Sprockets asset compilation (this task also runs yarn install, but apparently in a different environment or something?).
Now only the capistrano/yarn tasks run, which perform the Webpack asset compilation successfully.