Develop Reference

"You require appropriate loaders", Using react native and expo. App fails to compile on the web, but runs on android

I'm using react native expo. The app works fine on android, but when run on the web gets a compilation error. It was working fine in before, but I suspect this started after installing some new package.
/ReactNativeFrontend/node_modules/#codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
|
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
My babel config
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
My package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#codler/native-base": "^2.14.2",
"#material-ui/core": "^4.11.0",
"#react-native-community/art": "^1.2.0",
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/datetimepicker": "^2.4.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/voice": "^1.1.6",
"#risingstack/react-easy-state": "^6.3.0",
"axios": "^0.19.2",
"easy-peasy": "^3.3.1",
"expo": "~38.0.8",
"expo-camera": "^8.3.1",
"expo-constants": "^9.1.1",
"expo-font": "~8.2.1",
"expo-gl": "^8.3.1",
"expo-image-picker": "^8.3.0",
"expo-permissions": "^9.0.1",
"expo-pixi": "^1.2.0",
"expo-speech": "~8.2.1",
"expo-status-bar": "^1.0.2",
"i18n-js": "^3.7.1",
"lodash.memoize": "^4.1.2",
"native-base": "^2.13.12",
"proxy": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-instantsearch-native": "^6.7.0",
"react-native-chatbot": "0.0.1-alpha.12",
"react-native-datepicker": "^1.7.2",
"react-native-dialogflow": "^3.2.2",
"react-native-elements": "^2.0.4",
"react-native-fade-in-view": "^1.1.0",
"react-native-gesture-handler": "~1.6.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-localization": "^2.1.6",
"react-native-localize": "^1.4.1",
"react-native-no-flicker-image": "^1.0.2",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-signature-capture": "^0.4.10",
"react-native-star-rating": "^1.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-voice": "^0.3.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0",
"styled-components": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#babel/preset-env": "^7.11.0",
"babel-preset-expo": "~8.1.0",
"react-native": "^0.63.2"
},
"private": true,
"rnpm": {
"assets": "./assets/fonts"
},
"proxy": "http://localhost:19002"
}
How to add appropriate loaders, or identify the package causing this issue.

I had this exact same issue, I found a solution today.
Thanks to this kind user on the expo forums.
judipuak's post
Install the react-native-keyboard-aware-scroll-view package into your node_modules with yarn on npm
Navigate to native base/dist/src/basic and open Content.js
Find var _reactNativeKeyboardAwareScrollView=require('#codler/react-native-keyboard-aware-scroll-view')
Change this to var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view') (remove the #codler)
Update:
Here's a more permanent solution
courtesy of patarapolw
I downgrade two things, and upgrade one thing, in package.json
{
"dependencies": {
"native-base": "~2.11",
"react-native-web": "~0.11"
},
"resolutions": {
"react-native-keyboard-aware-scroll-view": "^0.9.0"
},
}

This is a native-base library problem. While You are using it's some Components there might error occur. I found that this error is not occurring in 2.11 or it's less version so try to install that specific version
npm install native-base#2.11

Vue CLI - No PostCSS config found

i have a package.json as this:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"apexcharts": "^3.8.4",
"axios": "^0.19.0",
"core-js": "^2.6.5",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"vue": "^2.6.10",
"vue-apexcharts": "^1.5.1",
"vue-numerals": "^3.0.5",
"vue-router": "^3.1.3",
"vue-virtual-scroll-list": "^1.4.4",
"vuetify": "2.1.13",
"vuex": "^3.1.2",
"vuex-map-fields": "^1.3.6",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.17.4",
"sass-loader": "^7.1.0",
"typeface-roboto": "^0.0.75",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
As I did the setup for this project via Vue cli I selected that options as Eslint, Babel and so on are incapsulated in the package.json. I put them in several files now: .eslintrc.js, babel.config.js, and postcss.config.js. Can I do this just like that - creating these files and remove the contents from the package.json?
The contents of the postcss.config.js is this:
module.exports = {
plugins: {
autoprefixer: {},
},
};
When I build this I always get this message:
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple
at /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/postcss-load-config/src/index.js:91:15
# /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple/VRipple.sass 4:14-329 14:3-18:5 15:22-337
Before that I see this message at top:
65% building 852/919 modules 67 active /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/axios/lib/core/transformData.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Does this mean that I need to use the sass-loader which is specified in the package.json in the postcss.config.js as well? I am bit puzzled, because on another project I have the same configuration and no other content in the postcss.config.js and I do not get error messages about missing plugins. Thanks!

I advise you to try launching vue ui in the console. After that in the "dependencies" category, you have to try to uninstall packages for CSS-processors and then reinstall it. Probably some of these packages are corrupted.

How To Enable Proguard with react native?

I want to reduce my APK Size
I followed these https://facebook.github.io/react-native/docs/signed-apk-android
and run ./gradlew bundleRelease instead of assembleRelease
But I Got Error
Execution failed for task ':app:transformClassesAndResourcesWithProguardForRelease'.
Job failed,
So how can I solve it, I'm Google it but the issue is still!
But without Enable Proguard it's work very well and I got (Aab & .Apk ) SO How To Solve it!
I think the issue with this file but I don't know how to configure that!
proguard-rules.pro
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
Package.json
{
"name": "APP_NAME",
"version": "1.12.3",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#react-native-community/async-storage": "^1.4.2",
"#turf/distance": "^6.0.1",
"#turf/helpers": "^6.1.4",
"#turf/invariant": "^6.1.2",
"#turf/turf": "^5.1.6",
"firebase-admin": "^8.1.0",
"firebase-functions": "^3.0.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"react": "16.8.6",
"react-moment": "^0.9.2",
"react-native": "0.59.8",
"react-native-app-intro-slider": "^3.0.0",
"react-native-datepicker": "^1.7.2",
"react-native-fcm": "^16.2.4",
"react-native-firebase": "5.3.1",
"react-native-gesture-handler": "1.2.1",
"react-native-image-picker": "^0.28.0",
"react-native-linear-gradient": "^2.5.4",
"react-native-maps": "^0.24.2",
"react-native-stars": "^1.1.5",
"react-native-svg": "^9.3.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "3.11.0"
},
"devDependencies": {
"#babel/parser": "^7.4.4",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-devtools": "^3.6.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

If you want Proguard Enabled (minifyEnabled true in android/app/build.gradle) while using "react-native-firebase" package in your app, you need to update your proguard rules.
in (android/app/proguard-rules.pro)
add the following lines:
-keep class io.invertase.firebase.** { *; }
-dontwarn io.invertase.firebase.**
for more information you can check https://rnfirebase.io/docs/v5.x.x/installation/android just before Step 4.
If it doesn't work out, you must go to documentations of the other packages you use and lookup for additional preferences must be done in order to make their settings compatible with Proguard enabled.

Moving away from bower in 2.15.1 ember-cli version

I'm trying to stop using bower dependencies in my Ember project. I updated ember-cli to 2.15.1 and moved bower dependencies to package.json. Maybe it will be helpfull to know which dependencies:
"font-awesome": "~4.7.0",
"jquery.inputmask": "
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
We also used bootstrap-datepicker as a bower dependency, but due to the error message I swapped it for ember-bootstrap-datetimepicker hoping that it would solve my issue. I reinstalled node_modules, removed bower_components, cleared tmp and dist folders and run npm cache clean && bower cache clean. From the project, I removed bower.json and .bowerrc. I also explicitly defined in package.json bowerDirectory: null so that in ember-cli-build.js broccoli won't be looking for any bower components.
in my ember-cli-build.js :
const isProductionLikeBuild = ['production', 'staging', 'review', 'e2e-testing'].indexOf(env) > -1;
const app = new EmberApp(defaults, {
fingerprint: {
enabled: isProductionLikeBuild,
prepend: envConf.assetsPrefix
},
sourcemaps: {
enabled: !isProductionLikeBuild
},
minifyCSS: { enabled: isProductionLikeBuild },
minifyJS: { enabled: isProductionLikeBuild },
'ember-cli-babel': {
includePolyfill: true
},
'ember-bootstrap-datetimepicker': {
"importBootstrapCSS": true,
"importBootstrapJS": true,
"importBootstrapTheme": true
},
'ember-font-awesome': { fontsOutput: '/assets/fonts' },
exportConfig: {
environments: [
'production',
'staging',
'review',
'e2e-testing'
]
}
});
When I turn off sourcemaps, app is building correctly.
When I don't however, this is what I get after typing ember s:
The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/martagajowczyk/Desktop/Project/project-frontend/tmp/source_map_concat-input_base_path-S2ZmmRR0.tmp/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at SourceMap.addFile (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:200:16
at Array.forEach (native)
at Concat.<anonymous> (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:198:24)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:419:12
at initializePromise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:567:5)
at new Promise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:1039:33)
The broccoli plugin was instantiated at:
at BroccoliMergeTrees.Plugin (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-plugin/index.js:7:31)
at new BroccoliMergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:16:10)
at Function.BroccoliMergeTrees [as _upstreamMergeTrees] (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:10:53)
at mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/merge-trees.js:85:33)
at EmberApp._mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1832:12)
at EmberApp.javascript (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1307:17)
at EmberApp.toArray (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1689:12)
at EmberApp.toTree (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1711:38)
at module.exports (/Users/martagajowczyk/Desktop/Project/project-frontend/ember-cli-build.js:46:14)
at Builder.setupBroccoliBuilder (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/models/builder.js:56:19)
What can be the reason of linking to bower_components?
Thanks
Output from ember version --verbose && npm --version && yarn --version:
ember-cli: 2.15.1
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k
os: darwin x64
3.10.10
0.24.6
Here's part of my package.json with dependencies and dev-dependencies listed:
"devDependencies": {
"broccoli-asset-rev": "^2.5.0",
"ember-ajax": "^3.0.0",
"ember-bootstrap-datetimepicker": "^1.1.0",
"ember-buffered-proxy": "^0.7.0",
"ember-can": "^0.8.4",
"ember-cli": "^2.15.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-autoprefixer": "0.8.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-bootstrap-datepicker": "^0.5.6",
"ember-cli-code-coverage": "^0.4.1",
"ember-cli-content-security-policy": "1.0.0",
"ember-cli-dependency-checker": "^2.0.1",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.6.1",
"ember-cli-mirage": "^0.3.1",
"ember-cli-moment-shim": "^3.5.0",
"ember-cli-page-object": "1.11.0",
"ember-cli-polyfill-io": "^1.2.2",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-uglify": "^1.2.0",
"ember-cli-yuidoc": "0.8.8",
"ember-cp-validations": "^3.3.0",
"ember-data": "^2.13.1",
"ember-deep-set": "^0.1.2",
"ember-exex": "^0.1.12",
"ember-export-application-global": "^2.0.0",
"ember-feature-flags": "3.0.0",
"ember-font-awesome": "4.0.0-alpha.3",
"ember-inflector": "^2.0.0",
"ember-inputmask": "0.4.0-beta.5",
"ember-intercom-io": "^0.1.3",
"ember-intl": "^2.23.1",
"ember-intl-cp-validations": "^3.0.1",
"ember-load-initializers": "^1.0.0",
"ember-math-helpers": "^2.0.5",
"ember-modal-dialog": "^2.3.0",
"ember-moment": "7.4.1",
"ember-multiselect-checkboxes": "^0.10.3",
"ember-power-select": "^1.8.2",
"ember-promise-helpers": "^1.0.3",
"ember-radio-button": "1.1.1",
"ember-resolver": "^4.1.0",
"ember-responsive": "2.0.4",
"ember-rl-dropdown": "^0.10.1",
"ember-route-action-helper": "^2.0.3",
"ember-simple-auth": "1.4.0",
"ember-sinon": "1.0.1",
"ember-sinon-qunit": "2.0.0",
"ember-sliding-sticky": "^1.0.0",
"ember-source": "^2.13.0",
"ember-svg-jar": "^0.11.1",
"ember-test-selectors": "0.3.7",
"ember-truth-helpers": "1.3.0",
"ember-uploader": "^1.2.2",
"ember-watson": "^0.9.1",
"eonasdan-bootstrap-datetimepicker": "~4.17.42",
"loader.js": "^4.4.0",
"modal-dialog": "1.6.3",
"yuidoc-ember-theme": "^1.3.0"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"broccoli-funnel": "^2.0.1",
"font-awesome": "~4.7.0",
"jquery.inputmask": "3.3.4",
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
}

I strongly assume your problem is ember-cli-bootstrap-datepicker. This addon does add the bootstrap-datepicker bower package during installation and probably should not be used without it.
Personally if you're looking for an ember DatePicker I recommend ember-pikaday.
If you need recommendations about addons I recommend ember observer, or ask in the slack channel references on the community page..

gulp-load-plugins not loading plugins

gulp-load-plugins is not loading any plugins. Can anyone suggest why this might be?
Node: v0.12.0
NPM: v2.7.3
My package.json:
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0"
}
}
My gulpfile.js:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
console.log(JSON.stringify(plugins)); // {}
gulp.task('default');

Install other gulp plugins.
tl;dr
If that is your complete package.json, looks like you have no other gulp plugins installed.
Lets say the following is your package.json:
package.json
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0",
"gulp-rename": "^1.2.0",
"gulp-concat": "^2.5.2"
}
}
You $ npm install everything, then...
gulpfile.js
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
// `plugins.rename` should exist
// `plugins.concat` should exist
console.log(JSON.stringify(plugins));
gulp.task('default');

Try setting lazy loading to false.
var gulp = require('gulp');
var plugins= require('gulp-load-plugins')({lazy:false});
console.log(JSON.stringify(plugins));
gulp.task('default');
And as others mentioned, install some plugins.

Let me show you what i have and how i do it , maybe that will help.
My package.json :
{
"dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-html-validator": "0.0.5",
"gulp-image-optimization": "^0.1.3",
"gulp-plumber": "*",
"gulp-rev-collector": "^0.1.4",
"gulp-rev-manifest-replace": "0.0.5",
"gulp-ruby-sass": "*",
"gulp-sass": "*",
"gulp-scss-lint": "^0.1.10",
"gulp-sourcemaps": "*",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"vinyl-paths": "^1.0.0"
},
"devDependencies": {
"del": "^1.1.1",
"gulp-cached": "^1.0.4",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.6",
"gulp-filesize": "0.0.6",
"gulp-gzip": "^1.0.0",
"gulp-htmlhint": "0.0.9",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^0.8.0",
"gulp-rename": "^1.2.0",
"gulp-rev": "^3.0.1",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.1",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.2"
}
}
How i run gulp-load-plugins :
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
}),
And this is an example of a plugin:
// html optimization
gulp.task('htmloptimize', function () {
return gulp.src(dev.html)
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist.dist))
});
As you can see all my pipes are called .pipe($.plugin()) meaning $ stands for gulp- . If you have a plugin named gulp-name-secondname you call it like this: .pipe($.nameSecondname()) .
Top were i require gulp-load-plugins i have camelize set to true . Lazy loading loads only the plugins you use not all of them .
Careful with gulp-load-plugins because it slows your tasks , for example i run gulp-webserver , when i use it with gulp-load-plugins the task finishes after 200ms versus 20ms if i use it normally. So don't use with everything, play with it see how much performance you lose on each task and prioritize.