I have a problem with my version of React - javascript

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

Related

Cannot find module 'table-hints' when running a sequelize powered express app

I am having an issue with my ExpressJS app using sequelize. When I run the app, I get this message:
node:internal/modules/cjs/loader:488
throw e;
^
Error: Cannot find module
'C:\node_projects\my_app\node_modules\sequelize\dist\lib\table-hints'
This issue started happening after I edited one of my app's routes, which has nothing to do with app initialization. I cannot share code, because it seems to be a problem within sequelize itself.
My package.json looks like this:
{
"name": "my_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"client": "npm run start --prefix client",
"dexy": "concurrently \"npm start\" \"npm run client\" ",
"test": "node_modules/.bin/mocha tests.js --timeout 10000"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"bluebird": "^3.7.2",
"body-parser": "^1.19.1",
"cookie-session": "^2.0.0",
"ejs": "^3.1.6",
"express": "^4.17.2",
"express-validation": "^3.0.8",
"express-validator": "^6.14.0",
"helmet": "^4.6.0",
"joi": "^17.5.0",
"mailgun-js": "^0.22.0",
"moment": "^2.29.1",
"morgan": "^1.10.0",
"passport": "^0.5.2",
"passport-facebook": "^3.0.0",
"passport-google-oauth20": "^2.0.0",
"passport-local": "^1.0.0",
"pg": "^8.7.1",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"sequelize": "^6.12.2",
"tedious": "^14.0.0",
"uuid": "^8.3.2"
}
}
The code I use to init my db is like this:
function dbInit(app){
const Sequelize = require('sequelize');
const keys = require('../config/keys');
const sqlCon = new Sequelize(keys.dbName,keys.dbUser, keys.dbPassword,
{dialect:'postgresql',
host:keys.dbHost,
pool:20,
logging:false
});
app.locals.connection = sqlCon;
//wire up model definitions
const User = require('../models/User')(sqlCon,sequelize);
const PasswordResetRequest = require('../models/PasswordResetRequest')(sqlCon,sequelize);
const CertType =require('../models/CertType')(sqlCon,sequelize);
const Role =require('../models/Role')(sqlCon,sequelize);
app.locals.User = User;
app.locals.PasswordResetRequest = PasswordResetRequest;
app.locals.CertType = CertType;
app.locals.Role = Role;
//setup relationships between tables
require('../models/relationships')(app);
sqlCon.sync().then(()=>{
return sqlCon.authenticate()
})
.catch((err)=>{
console.log('Successfully NOT connected to DB!');
console.log(err);
});
return sqlCon;
}
Can anyone shed any light on why this error happens? Thanks! I already downgraded sequelize from version 7-aplha2.

React production build results with blank page. Dev server works

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,
});
}

Issue with app build using Gulp and gulp-load-plugins

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.

Angular UI-Router works with template but not component

I am attempting to use angular-ui-router on an angular 1 project. The issue that I'm running into is that I can get angular-ui-router to work when I specify a template, but not when I specify a component.
For instance, this works:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
template: '<grocery-list-component></grocery-list-component>',
};
$stateProvider.state(listOfGroceryLists);
};
However, when I attempt to specify the component, nothing shows up, and no error is given in the console:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
component: 'groceryListComponent',
};
$stateProvider.state(listOfGroceryLists);
};
Here is my grocery-list.module.js, which register the component and the routs:
import angular from 'angular';
import 'angular-resource';
import uiRouter from 'angular-ui-router';
import groceryListComponent from './grocery-list.component';
import groceryListAPIService from './grocery-list.service';
import groceryListRoutes from './grocery-list.routes';
import groceryListDetailComponent from './grocery-list-detail.component';
const GroceryListModule = angular.module('groceryList', [
// Dependencies
'ngResource',
'ui.router',
])
.config(($resourceProvider) => {
$resourceProvider.defaults.stripTrailingSlashes = false;
})
.factory('groceryListAPIService', groceryListAPIService)
.component('groceryListComponent', groceryListComponent)
.component('groceryListDetailComponent', groceryListDetailComponent)
.config(groceryListRoutes);
export default GroceryListModule;
And my grocery-list.component.js:
import template from './grocery-list.template.html';
import groceryListController from './grocery-list.controller';
const groceryListComponent = {
template,
controller: groceryListController,
controllerAs: 'groceryListCtrl',
}
export default groceryListComponent;
And my packages.json:
{
"name": "shopping-list",
"version": "1.0.0",
"description": "An app to keep track of your grocery shopping",
"repository": "https://github.com/thomascothran/shopping_list.git",
"scripts": {
"start": "gulp",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"gulp": "^3.9.1",
"raw-loader": "^0.5.1",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"angular": "^1.5.8",
"angular-resource": "^1.5.8",
"angular-ui-router": "^0.3.1",
"js-cookie": "^2.1.3",
"ramda": "^0.22.1"
}
}
Refer to this question:
Angular - UI.Router not loading component
Looks like you are using 0.3.x as per your package.json, which won't work. Upgrade to 1.0.0 and try please.
component attribute is available from ui-router#1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1

ReferencerError: Define is not defined - Browserify

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"
}
}

Categories