react-native-document-picker not work in android release mode - javascript

i using react-native-document-picker for document selection. It is not working in android release mode. But successfully working in debug mode. So i cant see the error. And it works successfully in IOS.
My package.json file:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#notifee/react-native": "^0.12.2",
"#react-native-community/async-storage": "^1.9.0",
"#react-native-community/checkbox": "^0.5.7",
"#react-native-community/datetimepicker": "^3.0.3",
"#react-native-community/masked-view": "^0.1.9",
"#react-native-community/netinfo": "^9.3.6",
"#react-native-community/picker": "^1.5.1",
"#react-native-community/progress-bar-android": "^1.0.3",
"#react-native-community/progress-view": "^1.2.1",
"#react-native-community/push-notification-ios": "^1.4.1",
"#react-native-firebase/app": "^8.4.1",
"#react-native-firebase/messaging": "7.8.4",
"axios": "^0.21.1",
"date-fns": "^2.28.0",
"moment": "^2.24.0",
"react": "16.13.1",
"react-native": "^0.64.4",
"react-native-animated-pagination-dots": "^0.1.72",
"react-native-autoheight-webview": "^1.6.1",
"react-native-calendars": "^1.1263.0",
"react-native-countdown-circle-timer": "^2.3.7",
"react-native-directory-picker": "^0.0.2",
"react-native-document-picker": "^5.0.0",
"react-native-elements": "^2.1.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-gifted-chat": "^0.16.3",
"react-native-image-picker": "3.2.1",
"react-native-immersive-bars": "^1.0.1",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-month-year-picker": "^1.3.4",
"react-native-paper": "^4.9.2",
"react-native-pdf": "^6.2.2",
"react-native-push-notification": "^5.1.0",
"react-native-reanimated": "2.1.0",
"react-native-redash": "^14.2.3",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-swipe-list-view": "^3.2.3",
"react-native-vector-icons": "^9.0.0",
"react-native-video": "^4.4.5",
"react-native-webview": "^11.23.1",
"react-navigation": "^4.1.0",
"react-navigation-drawer": "^2.3.4",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^2.5.6",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/runtime": "^7.11.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.2.2",
"eslint": "^7.6.0",
"jest": "^26.2.2",
"metro-react-native-babel-preset": "^0.61.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
my document select code:
try {
const res = await DocumentPicker.pick({
//type: [DocumentPicker.types.allFiles],
type: [DocumentPicker.types.pdf, DocumentPicker.types.images],
});
console.log(
'detailsssss',
res,
res[0].uri,
res[0].type, // mime type
res[0].name,
res[0].size,
);
setDocName(res[0].name);
const path = decodeURI(res[0].uri).replace('file://', '');
const fileType =
Platform.OS == 'ios'
? path.substring(path.length - 4, path.length).replace('.', '')
: res[0].type
.substring(res[0].type.length - 4, res[0].type.length)
.replace('/', '');
console.log(fileType);
console.log(path);
RNFS.readFile(path, 'base64')
.then(data => {
console.log(data);
let fileByte = '';
if (fileType.toLowerCase() == 'pdf') {
fileByte = 'data:application/pdf;base64,' + data;
} else {
fileByte =
'data:image/' + fileType.toLowerCase() + ';base64,' + data;
}
console.log('tippp', fileType);
const file = {
ID: 0,
NAME: res[0].name,
FILE_TYPE: docType,
CREATED_DATE: Moment(new Date()).format('DD.MM.YYYY HH:mm'),
FILE_BYTE: fileByte,
};
filesArray.push(file);
setFiles(filesArray);
setDocCount(filesArray.length + ' doküman seçildi.');
console.log(filesArray);
})
.catch(err => console.error('An error occurred', err));
} catch (err) {
if (DocumentPicker.isCancel(err)) {
console.log('error -----', err);
} else {
throw err;
}
}

Related

React Native Error: WebView has been removed from React Native

I upgraded expo sdk from 33 to the latest for maintenance of old source code.
The following error occurred when running the app after the upgrade:
Invariant Violation: WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'. See https://github.com/react-native-webview/react-native-webview
To solve this issue, Iinstalled the latest version of react-native-webview.
And I imported this library.
However, when I run the app, the same problem still appears.
Even if I remove all the code that uses WebView, the same problem continues to be output.
Can I know how to solve this?
// package.json
{
"name": "",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "jest --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"resolutions": {
"metro-config": "0.57.0"
},
"dependencies": {
"#expo/react-native-action-sheet": "^4.0.1",
"#expo/samples": "~3.0.3",
"#expo/vector-icons": "^13.0.0",
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"#fortawesome/react-native-fontawesome": "^0.3.0",
"axios": "^1.2.6",
"crypto-js": "^4.1.1",
"expo": "^45.0.0",
"expo-app-loading": "~2.0.0",
"expo-asset": "~8.5.0",
"expo-blur": "^12.0.1",
"expo-camera": "~12.2.0",
"expo-cli": "^6.2.1",
"expo-constants": "~13.1.1",
"expo-file-system": "~14.0.0",
"expo-font": "~10.1.0",
"expo-image-manipulator": "^11.0.0",
"expo-image-picker": "^14.1.0",
"expo-linking": "~3.1.0",
"expo-location": "^15.0.1",
"expo-notifications": "~0.15.4",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-web-browser": "~10.2.1",
"global": "^4.4.0",
"immutable": "^4.2.2",
"intl": "^1.2.5",
"jwt-decode": "^3.1.2",
"moment": "^2.29.4",
"qs": "^6.11.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-geocode": "^0.2.3",
"react-native": "0.68.2",
"react-native-dash": "^0.0.11",
"react-native-easy-toast": "^2.3.0",
"react-native-elements": "^3.4.3",
"react-native-image-resizer": "^1.0.1",
"react-native-maps": "0.30.2",
"react-native-measureme": "^0.0.2",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^14.0.1",
"react-native-picker-select": "^8.0.4",
"react-native-push-notification-popup": "^1.6.1",
"react-native-qrcode": "^0.2.7",
"react-native-status-bar-height": "^2.6.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-web": "0.17.7",
"react-native-webview": "^11.26.1",
"react-navigation": "^3.11.0",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"redux-actions": "^2.6.5",
"redux-devtools-extension": "^2.13.8",
"redux-pender": "^2.0.12",
"underscore": "^1.13.6"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
// component.js
import React from "react";
import { Header } from "../../components";
import { WebView } from "react-native-webview";
class TermWebViewScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const type = navigation.getParam("type");
const title =
type === "pri" ? "개인정보 수집 및 이용동의" : "서비스 약관동의";
return { header: <Header navigation={navigation} title={title} /> };
};
state = {
pri: "https://mrhomes.s3.ap-northeast-2.amazonaws.com/documents/homes_privacy.html",
usage:
"https://mrhomes.s3.ap-northeast-2.amazonaws.com/documents/homes_term.html",
};
render() {
const { pri, usage } = this.state;
const type = this.props.navigation.getParam("type");
return (
<WebView
source={{ uri: type === "pri" ? pri : usage }}
style={{ marginTop: 20 }}
startInLoadingState
scalesPageToFit
/>
);
}
}
export default TermWebViewScreen;

How to fix Module build failed (from ./node_modules/babel-loader/lib/index.js)?

While trying to start the project I have the following error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'C:\Users\user\Documents\signatura-web\node_modules#babel\preset-es2015' imported from C:\Users\user\Documents\signatura-web\babel-virtual-resolve-base.js.
I have #babel packages installed (7th version) and babel-loader (8th version).
Here is package.json file:
{
"name": "signatura-web",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development --env dev",
"build": "webpack --mode production --env stage",
"build:prod": "webpack --mode production --env prod",
"serve": "node prodServer.js",
"test": "jest"
},
"repository": {
"type": "git",
"url": "https://Evgeny.Smirennikov#bitbucket.axamit.com/scm/sgt/signatura-web.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-transform-runtime": "^7.11.5",
"#babel/preset-env": "^7.10.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.10.1",
"#babel/preset-typescript": "^7.12.7",
"#svgr/webpack": "^5.4.0",
"#types/react-datepicker": "^4.3.3",
"#types/react-notifications-component": "^2.4.0",
"#types/react-redux": "^7.1.11",
"#types/react-router-dom": "^5.3.2",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.12.1",
"#typescript-eslint/parser": "^5.12.1",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^6.4.0",
"css-loader": "^3.6.0",
"eslint": "^8.21.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^6.0.4",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^2.7.1",
"react-datetime": "2.16.3",
"react-router-redux": "^4.0.8",
"style-loader": "^1.2.1",
"stylus-loader": "^3.0.2",
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#beyonk/google-fonts-webpack-plugin": "^1.5.0",
"#hookform/resolvers": "^1.0.0",
"#logtail/browser": "^0.1.12",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#types/react-input-mask": "^3.0.1",
"animejs": "^3.2.1",
"axios": "^0.27.2",
"bootstrap": "^4.5.2",
"braintree-web-drop-in-react": "^1.2.1",
"classnames": "^2.2.6",
"compute-scroll-into-view": "^1.0.17",
"connected-react-router": "^6.8.0",
"copy-to-clipboard": "^3.3.1",
"date-fns": "^2.29.1",
"express": "^4.17.1",
"file-loader": "^6.1.0",
"font-awesome": "^4.7.0",
"google-map-react": "^2.1.9",
"headroom.js": "^0.11.0",
"html-react-parser": "^1.4.8",
"jest": "^26.6.3",
"moment": "^2.26.0",
"node-sass": "^4.14.1",
"openvidu-browser": "2.16.0",
"pdfjs-dist": "^3.0.279",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-addons-css-transition-group": "^15.6.2",
"react-bootstrap": "^1.3.0",
"react-bootstrap-typeahead": "^5.1.1",
"react-datepicker": "^4.5.0",
"react-document-meta": "^3.0.0-beta.2",
"react-dom": "^16.13.1",
"react-dropzone": "^11.1.0",
"react-ga": "^3.3.0",
"react-hook-form": "^6.9.6",
"react-input-mask": "^2.0.4",
"react-modal": "^3.11.2",
"react-notifications-component": "^2.4.1",
"react-paginate": "^6.5.0",
"react-progressive-graceful-image": "^0.6.14",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-spinners": "^0.9.0",
"react-string-replace": "^0.4.4",
"react-tabs": "^3.1.1",
"react-test-renderer": "^17.0.1",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.1.3",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^10.0.2",
"stylus": "^0.54.8",
"yup": "^0.29.3"
},
"homepage": "./",
"jest": {
"moduleNameMapper": {
"\\.(css|styl|svg)$": "identity-obj-proxy"
}
}
}
Here is .babelrc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
"#babel/preset-es2015"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
Among rules in webpack.config.js I have:
{
test: /\.(js|jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},

Craco react app: Missing class properties transform

I'm getting a Missing class properties transform. error for my CardData class, and I have no idea why, as I've installed the #babel/plugin-transform-classes.
//CardData.ts
import type RawCardRow from "#interfaces/RawCardRow";
import { InteractionType } from "#enums";
import IFrameValidator from "../IFrameValidator";
export default class CardData {
src: string;
title: string;
added?: Date;
sourceId: string;
author: string;
interaction: InteractionType;
validator!: IFrameValidator;
isActive!: boolean;
failed!: boolean;
constructor(row: RawCardRow) {
this.src = row.src;
this.title = row.title;
this.added = new Date(row.added);
this.sourceId = row.src;
this.author = row.author;
this.interaction =
InteractionType[row.interaction as keyof typeof InteractionType];
this.isActive = false;
this.validator = new IFrameValidator(this.src);
this.failed = false;
// this.error = undefined;
}
setActive(b: boolean): void {
this.isActive = b;
}
fail() {
this.failed = true;
}
}
craco.config.js:
const path = require("path");
const CracoAlias = require("craco-alias");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
type: "javascript/auto",
test: /\.mjs$/,
include: /node_modules/,
},
],
},
},
},
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
baseUrl: "./src",
tsConfigPath: "./tsconfig.path.json",
},
},
],
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
babel: {
plugins: [
"glsl",
"#babel/plugin-transform-classes",
"transform-class-properties",
],
},
};
package.json
{
"name": "seisolo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#dnd-kit/core": "^4.0.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#react-three/drei": "^8.3.1",
"#react-three/postprocessing": "^2.1.2",
"#tailwindcss/forms": "^0.3.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/file-saver": "^2.0.3",
"#types/jest": "^26.0.15",
"#types/lodash.isequalwith": "^4.4.6",
"#types/node": "^12.0.0",
"#types/papaparse": "^5.2.6",
"#types/react": "^17.0.0",
"#types/react-custom-scrollbars": "^4.0.8",
"#types/react-dom": "^17.0.0",
"#types/redux-logger": "^3.0.9",
"#types/three": "^0.134.0",
"#withvoid/melting-pot": "^1.6.0",
"classnames": "^2.3.1",
"create-react-class": "^15.7.0",
"crooks": "^1.0.23",
"drei": "^2.2.21",
"easy-peasy": "^5.0.3",
"esquery": "^1.4.0",
"evergreen-ui": "^6.4.0",
"file-saver": "^2.0.5",
"framer-motion": "^5.5.5",
"google-spreadsheet": "^3.1.15",
"interpolate-range": "^2.1.0",
"konva": "^8.2.2",
"leva": "^0.9.18",
"lodash": "^4.17.21",
"lodash.isequalwith": "^4.4.0",
"lodash.shuffle": "^4.2.0",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.2.3",
"papaparse": "^5.3.1",
"prop-types": "^15.7.2",
"rc-slider": "^9.7.2",
"react": "^17.0.2",
"react-addons-transition-group": "^15.6.2",
"react-audio-player": "^0.17.0",
"react-beautiful-dnd": "^13.1.0",
"react-curveto": "^1.0.6",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^17.0.2",
"react-grid-layout": "^1.3.0",
"react-hanger": "^2.4.4",
"react-konva": "^17.0.2-5",
"react-lineto": "^3.3.0",
"react-player": "^2.9.0",
"react-radio-group": "^3.0.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-sound": "^1.2.0",
"react-soundplayer": "^1.0.5",
"react-stonecutter": "^0.3.10",
"react-three-fiber": "^6.0.13",
"react-three-gui": "^0.4.2",
"react-tiny-popover": "^7.0.1",
"reactjs-popup": "^2.0.5",
"redux-logger": "^3.0.6",
"sass": "4.14.1",
"svg-catmull-rom-spline": "^0.0.1",
"three": "^0.134.0",
"three-extend-material": "^1.0.0",
"three-obj-loader": "^1.1.3",
"typescript": "^4.1.2",
"use-asset": "^1.0.4",
"use-image": "^1.0.8",
"waveform-data": "^4.1.1",
"web-vitals": "^1.0.1"
},
"engines": {
"node": "14"
},
"scripts": {
"eject": "react-scripts eject",
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-transform-classes": "^7.16.7",
"#types/google-spreadsheet": "^3.1.5",
"#types/react-audio-player": "^0.13.0",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-grid-layout": "^1.1.2",
"#types/react-sound": "^1.2.3",
"#types/react-stonecutter": "^0.3.1",
"#types/react-table": "^7.7.1",
"#types/webpack-env": "^1.16.2",
"#welldone-software/why-did-you-render": "^6.2.0",
"autoprefixer": "^9",
"babel-plugin-glsl": "^1.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"better-docs": "^2.3.2",
"craco-alias": "^3.0.1",
"eslint-config-xo-react": "^0.25.0",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-only-warn": "^1.0.2",
"eslint-plugin-sonarjs": "^0.9.1",
"eslint-plugin-unicorn": "^34.0.1",
"file-loader": "^6.2.0",
"glslify": "^7.1.1",
"jsdoc": "^3.6.7",
"jsdoc-plugin-typescript": "^2.0.6",
"jsdoc-to-markdown": "^7.0.1",
"postcss": "^7",
"react-loader-spinner": "^4.0.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
}
}
I've tried restarting the dev server and reinstall my packages.

Transform error:unknown plugin "transform-decorators" specified in react native

I am getting this after installing jest, and transform-decorators-legacy.
But jest is running successfully and passing tests for each screen.
I am using MOBX for stores.
bablerc file :
{
"presets": ["react-native","babel-preset-expo","react-native-
stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source","transform-decorators
-legacy"]
}
}
}
package.json
"scripts": {
"test": "node_modules/.bin/jest"
},
"jest": {
"preset": "jest-expo"
},
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^21.0.0",
"mobx": "^3.3.1",
"mobx-react": "^4.3.3",
"native-base": "^2.3.3",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
"react-native-admob": "^2.0.0-beta.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-modal": "^4.1.0",
"react-native-prompt": "^1.0.0",
"react-navigation": "^1.0.0-beta.15"
},
"devDependencies": {
"babel-jest": "^21.2.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^4.0.0",
"cavy": "^0.4.1",
"jest": "^21.2.1",
"jest-expo": "^22.0.1-SNAPSHOT.2017.11.1",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0",
"regenerator-runtime": "^0.11.0"
}
}

Hot reloading does not reloading

I have the following config for hot reloading:
dev.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
package.json
{
"name": "Brian",
"version": "0.5.0",
"description": "A hard&ruthless data reporter",
"scripts": {
"clean": "rimraf dist",
"build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
"build:production": "npm run clean && npm run build",
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"start": "node bin/server.js",
"test": "karma start"
},
"keywords": [
"react",
"reactjs",
"babel6",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"license": "MIT",
"authors": [],
"contributors": [],
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2017": "^1.4.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"bootstrap-loader": "^1.0.10",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.19.0",
"exports-loader": "^0.6.3",
"express": "^4.13.4",
"express-open-in-editor": "^1.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-mocha": "^1.0.1",
"karma-webpack": "^1.7.0",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"mocha": "^2.2.5",
"morgan": "^1.7.0",
"node-sass": "^3.7.0",
"postcss-import": "^8.1.1",
"postcss-loader": "^0.9.1",
"react-hot-loader": "^1.3.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^0.12.0"
},
"dependencies": {
"chart.js": "^1.1.1",
"classnames": "^2.2.5",
"flag-icon-css": "^1.3.0",
"griddle-react": "^0.5.0",
"isomorphic-fetch": "^2.2.1",
"moment": "^2.13.0",
"moment-timezone": "^0.5.4",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-bootstrap-daterangepicker": "^3.0.0",
"react-chartjs": "jhudson8/react-chartjs",
"react-document-meta": "^2.0.3",
"react-dom": "^15.4.1",
"react-intl-redux": "0.0.7",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-bootstrap": "^0.23.0",
"react-router-redux": "^4.0.4",
"react-s3-uploader": "^3.0.3",
"react-select": "1.0.0-beta13",
"react-transform-hmr": "^1.0.4",
"redux": "^3.5.2",
"redux-form": "^5.2.3",
"redux-logger": "2.6.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"underscore": "^1.8.3"
}
}
bin/server.js
var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config;
try {
config = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
require('babel-core/register')(config);
require('../server');
server.js
const http = require('http');
const express = require('express');
const app = express();
app.use(require('morgan')('short'));
(function initWebpack() {
const webpack = require('webpack');
const webpackConfig = require('./webpack/common.config');
const compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler, {
log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
}));
app.use(express.static(__dirname + '/'));
})();
app.get(/.*/, function root(req, res) {
res.sendFile(__dirname + '/index.html');
});
const server = http.createServer(app);
server.listen(process.env.PORT || 3000, function onListen() {
const address = server.address();
console.log('Listening on: %j', address);
console.log(' -> that probably means: http://localhost:%d', address.port);
});
Does anyone can see anything?

Categories