I have an issue with building of my project. I started to use gulp-load-plugins on my project to speedup Gulp.
Here is my package.json
{
"name": "Project",
"version": "0.0.1",
"description": "Project",
"author": "DOBRO GROUP",
"scripts": {
"watch-frontend": "gulp watch:front",
"watch-backend": "gulp watch:back",
"build": "gulp build"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.18.13",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cache": "^0.4.6",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-consolidate": "^0.2.0",
"gulp-file-copy": "0.0.1",
"gulp-iconfont": "^9.0.0",
"gulp-iconfont-css": "^2.1.0",
"gulp-imagemin": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglifyjs": "^0.6.2",
"gulp-watch": "^4.3.11",
"npm-clean": "^1.0.3",
"path": "^0.12.7",
"pump": "^1.0.2",
"run-sequence": "^2.1.0",
"underscore": "^1.8.3"
}
}
This is my gulpfile.js
'use strict';
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
pattern: '*'
});
var fsys = require('./settings.json');
function getTask(task) {
return require('./gulp-tasks/' + task)(gulp, plugins);
}
gulp.task('cache', getTask('cache'));
gulp.task('clean', getTask('clean'));
gulp.task('sass:front', getTask('sass-front'));
gulp.task('sass:back', getTask('sass-back'));
gulp.task('browser-sync', getTask('browser-sync'));
gulp.task('js:front', getTask('js-front'));
gulp.task('js:back', getTask('js-back'));
gulp.task('font:gen:front', getTask('font-gen-front'));
gulp.task('font:copy:front', function () {
return gulp.src(fsys.path.frontend.fonts.source + '**/*.*')
.pipe(gulp.dest(fsys.path.frontend.fonts.dest));
});
gulp.task('font:copy:back', function () {
return gulp.src(fsys.path.backend.font.source + '**/*/')
.pipe(gulp.dest(fsys.path.backend.font.dest));
});
gulp.task('img:copy:front', function () {
return gulp.src(fsys.path.frontend.img.source + '**/*')
.pipe(gulp.dest(fsys.path.frontend.img.dest))
});
gulp.task('img:copy:back', function () {
return gulp.src(fsys.path.backend.img.source + '**/*')
.pipe(gulp.dest(fsys.path.backend.img.dest))
});
gulp.task('build', getTask('build'));
At first build it seems there is no any problems. But if I run build task again I get errors like that:
Error: ENOENT: no such file or directory, chmod
'D:\laragon\www\design\public\assets\frontend\fonts\AvantGardeCTT.eot'
at Error (native)
This error occures on file copy tasks. Here is the example of this kind of task:
gulp.task('font:copy:front', function () {
return gulp.src(fsys.path.frontend.fonts.source + '**/*.*')
.pipe(gulp.dest(fsys.path.frontend.fonts.dest));
});
I'm looking throw all google and try to find an answer. But with no result.
Related
I don't know much about React and I have to test an application made in React.
My problem comes when I try to run the server with gulp nodemon, and I get a lot of errors. Apparently the application is built on an old version of React and doesn't recognize some libraries or modules; I have already solved several of them regarding prototypes or the way a ReactClass is created, but I found one regarding Bootstrap that I haven't been able to solve.
This is the error I get:
bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES),
^
TypeError: Cannot read property 'oneOf' of undefined
at Object.<anonymous> (/home/kevin/to_check/react-blog/node_modules/react-bootstrap/lib/BootstrapMixin.js:30:43)
This is the file I'm having the trouble with:
'use strict';
var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
exports.__esModule = true;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styleMaps = require('./styleMaps');
var _styleMaps2 = _interopRequireDefault(_styleMaps);
var _propTypes2 = require('prop-types');
var _reactPropTypesLibKeyOf = require('react-prop-types/lib/keyOf');
var _reactPropTypesLibKeyOf2 = _interopRequireDefault(_reactPropTypesLibKeyOf);
var BootstrapMixin = {
propTypes: {
/**
* bootstrap className
* #private
*/
bsClass: _reactPropTypesLibKeyOf2['default'](_styleMaps2['default'].CLASSES),
/**
* Style variants
* #type {("default"|"primary"|"success"|"info"|"warning"|"danger"|"link")}
*/
bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES),
/**
* Size variants
* #type {("xsmall"|"small"|"medium"|"large"|"xs"|"sm"|"md"|"lg")}
*/
bsSize: _reactPropTypesLibKeyOf2['default'](_styleMaps2['default'].SIZES)
},
getBsClassSet: function getBsClassSet() {
var classes = {};
var bsClass = this.props.bsClass && _styleMaps2['default'].CLASSES[this.props.bsClass];
if (bsClass) {
classes[bsClass] = true;
var prefix = bsClass + '-';
var bsSize = this.props.bsSize && _styleMaps2['default'].SIZES[this.props.bsSize];
if (bsSize) {
classes[prefix + bsSize] = true;
}
if (this.props.bsStyle) {
if (_styleMaps2['default'].STYLES.indexOf(this.props.bsStyle) >= 0) {
classes[prefix + this.props.bsStyle] = true;
} else {
classes[this.props.bsStyle] = true;
}
}
}
return classes;
},
prefixClass: function prefixClass(subClass) {
return _styleMaps2['default'].CLASSES[this.props.bsClass] + '-' + subClass;
}
};
exports['default'] = BootstrapMixin;
module.exports = exports['default'];
This is the package.json file that the application has:
{
"name": "React-Isomorphic-Blog",
"version": "1.0.0",
"description": "React Isomorphic Blog",
"author": "Jonathan Rossi <jonathan.m.rossi#gmail.com>",
"license": "MIT",
"dependencies": {
"alt": "^0.14.5",
"babel": "^4.7.16",
"body-parser": "^1.12.3",
"cookie-parser": "^1.3.4",
"create-react-class": "^15.6.3",
"express": "^4.12.3",
"express-session": "^1.10.4",
"iso": "^4.0.2",
"jade": "^1.9.2",
"marked": "^1.1.0",
"moment": "^2.10.2",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^0.26.2",
"react-ga": "^2.1.2",
"react-prop-types": "^0.4.0",
"react-router": "^3.2.6",
"superagent": "^5.2.2"
},
"devDependencies": {
"browserify": "^16.5.1",
"gulp": "^4.0.2",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.4",
"gulp-nodemon": "^2.0.2",
"gulp-print": "^2.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^1.5.4",
"nodemon": "^1.3.7",
"reactify": "^1.1.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"paths": {
"app": "./src/client.js"
},
"dest": {
"app": "bundle.js",
"dist": "public/scripts/react"
},
"main": "bin/www.js",
"scripts": {
"start": "node --use_strict bin/www.js"
}
}
I hope you can help me with that problem, I really couldn't find a solution.
Thank you very much.
React.PropTypes has been extracted to it's own package since React v15.5.0.
From this issue. The fix is to use the prop-types package instead
// bsStyle: _react2['default'].PropTypes.oneOf(_styleMaps2['default'].STYLES), // not this
bsStyle: _propTypes2['default'].oneOf(_styleMaps2['default'].STYLES) // do this after installing prop-types
// I am using camera in QRCodeScanner , below is my package.json file , I have install all the dependencies and permission in manifest file .
But while building react-native run-android its loading 100% but getting this error "null is not an object(evaluating 'cameramanager.aspect')"
{
"name": "Vmedics",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"date-fns": "^1.30.1",
"native-base": "^2.10.0",
"react": "16.6.3",
"react-native": "0.58.4",
"react-native-camera": "^1.8.0",
"react-native-elements": "^1.0.0",
"react-native-gesture-handler": "^1.0.15",
"react-native-popup-dialog": "^0.17.0",
"react-native-qrcode": "^0.2.7",
"react-native-qrcode-scanner": "^1.1.2",
"react-native-ratings": "^6.3.0",
"react-native-svg": "^9.2.4",
"react-native-svg-charts": "^5.2.0",
"react-native-table-component": "^1.2.0",
"react-navigation": "^3.2.1",
"react-router": "^4.3.1",
"react-timer-mixin": "^0.13.4"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
Thanks
Try this ..
1.npm install react-native-camera --save
2. Android - src- manifest -
3. Settings.gradle - include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
3.Android - app- build.gradle - compile project(':react-native-camera')
Android - app -src-main-java-com- MainApplication.java-
import org.reactnative.camera.RNCameraPackage;
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCameraPackage(),
);
I'm developing react app. Ejected from create-react-app.
npm start works fine. No console errors.
npm run build builds app with success. But when I try to open index.html there is blank page. No errors. Every file in network tab downloaded with success.
I have no idea how to debug? Tried lots of solutions but none worked.
package.json
{
"name": "frontend",
"version": "0.4.0",
"homepage": ".",
"debug": true,
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"bootstrap": "4.0.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.0.1",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"font-awesome": "4.7.0",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"jquery": "3.3.1",
"jquery.easing": "^1.4.1",
"lodash": "4.17.*",
"magnific-popup": "^1.1.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.2.0",
"react-dev-utils": "^5.0.0",
"react-dom": "^16.2.0",
"react-redux": "5.0.*",
"react-router-dom": "^4.2.2",
"react-router-hash-link": "1.2.*",
"react-router-redux": "4.0.*",
"react-scrollchor": "4.2.*",
"recharts": "0.22.*",
"redux": "3.7.*",
"redux-thunk": "2.2.*",
"scrollreveal": "3.3.6",
"seamless-immutable": "7.1.*",
"semantic-ui": "2.3.*",
"semantic-ui-css": "2.3.*",
"semantic-ui-react": "0.78.*",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"react-google-recaptcha": "0.11.*",
"react-async-script": "0.9.*",
"raven-js": "3.25.*",
"babel-preset-es2015": "6.24.*",
"each-async": "*",
"indent-string": "*",
"validator": "*"
},
"devDependencies": {
"browser-sync": "2.23.6",
"gulp": "^3.9.1",
"gulp-clean-css": "3.9.2",
"gulp-header": "2.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "3.0.0",
"node-sass": "^4.7.2",
"rebuild-node-sass": "*",
"sass-loader": "^6.0.6",
"console-log-shortcut": "1.0.*"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
build.js
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const config = require('../config/webpack.config.prod');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
measureFileSizesBeforeBuild(paths.appBuild)
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
}
console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
}
);
// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
let compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) {
return reject(err);
}
const messages = formatWebpackMessages(stats.toJson({}, true));
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
return resolve({
stats,
previousFileSizes,
warnings: messages.warnings,
});
});
});
}
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}
I created an API including using of hummus.js. After testing it local, I uploaded my new API Build on my Server (Ubuntu Root + Plesk Onyx) and npm install my package.json (with Plesk => Output: Installation complete Status: Success). But my new Build doesn't work. After debugging my Code I detect the error. My API get an Internal Error after require one module (Tested this with that Code)
try {
var hummus = require('hummus');
var fillClass = require('../classes/fillform').fillForm;
}
catch (e) {
res.send("ERROR HUMMUS")
}
Run this Code I get = ERROR HUMMUS
I thought that the hummus path doesn't exist but with:
try {
res.send(require.resolve("hummus")).end();
} catch(e) {
res.send("not found").end();
process.exit(e.code);
}
I get the path to the module (hummus). Although all file in this folder exists.
(Other modules like async, fs etc works well)
What I do wrong? What should I do?
Greetings
edit Package.json
{"name": "XXX-API",
"version": "1.0.9",
"main": "server.js",
"dependencies": {
"archiver": "^2.0.0",
"array-sum": "^1.0.0",
"async": "^2.5.0",
"big-integer": "^1.6.24",
"body-parser": "^1.17.2",
"child_process": "^1.0.2",
"cors": "^2.8.3",
"curl": "^0.1.4",
"express": "^4.15.3",
"file-encryptor": "^0.1.1",
"fs": "0.0.1-security",
"ftp": "^0.3.10",
"ftp-client": "^0.2.2",
"ftps": "^1.1.0",
"german-tax-id-validator": "^1.0.3",
"https": "^1.0.0",
"hummus": "^1.0.80",
"ibantools": "^1.3.0",
"jsftp": "^2.0.0",
"leading-zeros": "^1.0.1",
"lodash": "^4.17.4",
"mysql": "^2.13.0",
"node-datetime": "^2.0.0",
"node-pdffiller": "0.0.7",
"node-uuid": "^1.4.8",
"node-zip": "^1.1.1",
"nodemailer": "^4.0.1",
"pad-right": "^0.2.2",
"pdfkit": "^0.8.3",
"phantomjs": "^2.1.7",
"pug": "^2.0.0-rc.2",
"request-promise": "^4.2.1",
"requestify": "^0.2.5",
"shortid": "^2.2.8",
"slack-node": "^0.1.8",
"uid": "0.0.2",
"xmlbuilder": "^9.0.4"
}
}
Pls write the error to log.
... catch (err){
logger.debug(err.stack)
}
No better way than error stack.
I'm developing a site on React, and I'm trying to generate the bundle with browserify throuhg gulp
This is my gulpfile:
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var babel = require('babelify');
var gulp = require('gulp');
var util = require("gulp-util");
var log = util.log;
var path = require('path');
function compile(watch) {
var bundler = watchify(browserify('./app.js', { debug: true }));
function rebundle() {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js'));
}
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
}
function watch() {
return compile(true);
}
gulp.task('build', function() { return compile(); });
gulp.task('watch', ['sass:watch'], function() { return watch(); });
gulp.task('default', ['watch']);
It correclty runs the build, and generates the bundle. But after that, when I import to the site I get the error:
ReferenceError: define is not defined
I guess browserify, or the bundle generated is expecting some other package that has the define? What I'm missing?
Here is my package.json:
{
"name": "react-test",
"version": "0.0.1",
"license": "",
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"redux-happy-async": "0.0.4",
"redux-thunk": "^1.0.3",
"rest": "^1.3.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.5.1",
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babelify": "^6.1.2",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.1",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"karma": "^0.13.21",
"karma-jasmine": "^0.3.7",
"karma-phantomjs-launcher": "^1.0.0",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.4",
"reactify": "^1.1.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"webpack": "^1.12.2",
"webpack-stream": "^3.1.0"
}
}