Related
I have created a react redux front end app. The app is working perfectly fine using node CLI and accessible using localhost:3050 or localhost:8080. However, if I try to run production build using github pages the page only renders partially. The same is observed if I open the production index.html file directly in the browser. I have searched for hours but not able to find the any clue. Here is the github repo and the public url of the project. Any help would be deeply appreciated.
Here is some of the configuration and package files
package.json
{
"name": "items-random-rater",
"version": "0.1.0",
"private": true,
"author": "Muhammed Salman Shamsi",
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"lodash": "^4.17.15",
"nodemon": "^1.19.1",
"popper.js": "^1.15.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "nodemon server.js",
"test": "mocha --require babel-polyfill --require babel-core/register --require ./test/withDom.js --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"clean": "rimraf public",
"build": "NODE_ENV=production npm run clean && webpack -p",
"serve": "webpack-dev-server",
"deploy": "npm run build && gh-pages -d public"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^1.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"express": "^4.17.1",
"gh-pages": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"jsdom": "^15.1.1",
"mini-css-extract-plugin": "^0.4.1",
"mocha": "^6.2.0",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"redux-mock-store": "^1.5.3",
"rimraf": "^2.7.1",
"sass-loader": "^7.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.8.0"
}
}
webpack.config.json
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.env.NODE_ENV;
const VENDOR_LIBS = [
"lodash","react","react-dom","react-redux",
"redux","axios"
];
module.exports = {
mode: env || 'development',
entry: {
bundle: ['babel-polyfill','./src/index.js'],
vendor: VENDOR_LIBS
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env','react','stage-2']
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/public/',
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
I am seeing an error relating to a bunch of .eot glyphicons from Bootstrap that are not being found. I am getting two errors which I think are related. A bunch of errors for not being able to resolve or that a glyphicon doesn't exist, mixed in with errors about the field browser not containing valid alias configuration.
I have included the full error message as well as the babelrc file and webpack config. I will also include the longer package.json below in case it's relevant.
The errors say it is looking for a path like:
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
However the actual path should be:
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Errors:
ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/package.json (relative path: ./assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.jsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.json doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot.scss doesn't exist
as directory
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-flow"
],
"plugins": [
"react-hot-loader/babel",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-logical-assignment-operators",
"#babel/plugin-proposal-optional-chaining",
[
"#babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-do-expressions",
"#babel/plugin-proposal-function-bind",
"#babel/plugin-transform-object-assign"
]
}
common.config.js (aka webpack config):
const path = require('path');
const autoprefixer = require('autoprefixer');
const merge = require('webpack-merge');
const development = require('./dev.config');
const devprod = require('./dev.configPROD');
const production = require('./prod.config');
// require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['.jsx', '.js', '.json', '.scss'],
modules: ['node_modules', PATHS.app],
},
module: {
rules: [{
test: /bootstrap-sass\/assets\/javascripts\//,
use: [
{ loader: 'imports-loader?jQuery=jquery' },
]
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
]
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-woff2' },
]
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
]
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=application/font-otf' },
]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=100000' },
]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'file-loader' },
]
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{ loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
]
}, {
test: /\.m?js$/,
use: [{
loader: 'babel-loader',
options:
{
presets: [],
},
}],
exclude: /node_modules/,
}, {
test: /\.png$/,
use: [
{ loader: 'file-loader?name=[name].[ext]' },
]
}, {
test: /\.jpg$/,
use: [
{ loader: 'file-loader?name=[name].[ext]' },
]
}, {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
}],
},
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(devprod, common);
//module.exports = merge(production, common);
//Results in graphical glitchs (css) because of uglify-js
//development config does not run uglify-js and therefore produces usable bundle
}
It also loads in another config file for webpack which I'll include here too:
dev.configPROD.js:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
'sass-loader',
],
}),
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"developmentPROD"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurrenceOrderPlugin(),
// new webpack.HotModuleReplacementPlugin(), //no pings back to webpack "_hrm"
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Util: 'exports-loader?Util!bootstrap/js/dist/util',
}),
],
};
And finally the package.json:
{
"name": "redux-easy-boilerplate",
"version": "1.3.3",
"description": "",
"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",
"start": "node bin/server.js",
"test": "karma start"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"react",
"reactjs",
"boilerplate",
"redux",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack"
],
"author": "https://github.com/anorudes, https://github.com/keske",
"license": "MIT",
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/polyfill": "7.4.4",
"autoprefixer": "9.6.0",
"axios": "0.19.0",
"babel-eslint": "10.0.2",
"babel-loader": "8.0.6",
"babel-plugin-react-transform": "^3.0.0",
"bootstrap": "4.3.1",
"bootstrap-loader": "^3.0.4",
"bootstrap-sass": "3.4.1",
"bootstrap-webpack": "0.0.6",
"classnames": "2.2.6",
"css-loader": "3.0.0",
"csswring": "^7.0.0",
"deep-equal": "^1.0.1",
"eslint": "^6.0.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.14.2",
"expect": "24.8.0",
"exports-loader": "^0.7.0",
"expose-loader": "^0.7.5",
"express": "4.17.1",
"express-open-in-editor": "^3.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.0.0",
"gapi": "0.0.3",
"history": "4.9.0",
"http-proxy": "^1.17.0",
"imports-loader": "^0.8.0",
"jasmine-core": "3.4.0",
"jquery": "3.4.1",
"jwt-decode": "^2.2.0",
"karma": "4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-webpack": "4.0.2",
"less": "3.9.0",
"less-loader": "^5.0.0",
"lodash": "4.17.11",
"material-ui": "^1.0.0-beta.47",
"material-ui-icons": "^1.0.0-beta.36",
"mocha": "^6.1.4",
"morgan": "1.9.1",
"node-sass": "4.12.0",
"npm-install-webpack-plugin": "^4.0.5",
"postcss-import": "^12.0.1",
"postcss-loader": "3.0.0",
"q": "^1.5.1",
"qs": "6.7.0",
"rc-datepicker": "5.0.14",
"react": "16.8.6",
"react-addons-css-transition-group": "^15.6.2",
"react-calendar-component": "^3.0.0",
"react-date-picker": "7.5.1",
"react-datepicker": "2.7.0",
"react-document-meta": "^3.0.0-beta.5",
"react-dom": "16.8.6",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "4.11.1",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "6.8.0",
"react-redux": "7.1.0",
"react-router": "5.0.1",
"react-router-redux": "^4.0.8",
"react-select": "^3.0.4",
"react-tap-event-plugin": "3.0.3",
"react-transform-hmr": "^1.0.4",
"redux": "4.0.1",
"redux-form": "8.2.4",
"redux-logger": "3.0.6",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "3.1.0",
"rimraf": "2.6.3",
"sass-loader": "7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "2.1.3",
"url-loader": "2.0.1",
"webpack": "4.35.0",
"webpack-cli": "3.3.5",
"webpack-dev-middleware": "3.7.0",
"webpack-dev-server": "3.7.2",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.1",
"yargs": "^13.2.4"
},
"dependencies": {
"#babel/cli": "7.4.4",
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-object-assign": "7.2.0",
"#babel/preset-env": "7.4.5",
"#babel/preset-flow": "7.0.0",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "4.1.3",
"#material-ui/icons": "4.2.1",
"material-ui-pickers": "2.2.4",
"moment": "2.24.0",
"npm-check-updates": "3.1.12",
"papaparse": "5.0.0",
"prop-types": "15.7.2",
"query-string": "6.8.1",
"react-csv": "1.1.1",
"react-dates": "20.2.4",
"react-document-title": "^2.0.3",
"react-handsontable": "0.3.2",
"react-scripts": "3.0.1",
"react-select-fast-filter-options": "^0.2.3",
"react-virtualized-select": "^3.1.3",
"reactstrap": "8.0.0"
}
}
This issue could be solve by simply changing variables that indicate the path of the fonts folder oustside the stylsheets folder.
2 variables have to be used at import
// Bootstrap
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../fonts/bootstrap/") !default;
#import 'bootstrap-sass';
I just faced the same issue trying to build an old project.
The path of the fonts-directory is incorrect, for some reason.
The correct path would be /node_modules/bootstrap-sass/assets/fonts instead of /node_modules/bootstrap-sass/assets/stylesheets/fonts
As a workaround, I just copied the /node_modules/bootstrap-sass/assets/fonts-folder into /node_modules/bootstrap-sass/assets/stylesheets/.
I hope you could help me to figure this out. I have a project that uses Webpack and React. If I update Node from v. 6 to 9, the code gets minified. If I downgrade Node back to v. 6, everything as it is supposed to be. I was wondering why could it happen? As I understand, minification is something that should happen on demand. Does Node 9 enforce somehow minification?
Here are my package.json
{
"name": "tgc-ui",
"version": "1.0.0",
"description": "table-grid-ui",
"main": "index.js",
"scripts": {
"test": "mocha --compilers js:babel-core/register --require test/helpers/browser.js test/*/*.spec.js"
},
"repository": {
"type": "git",
"url": "ssh://git#stash.idalko.com:7999/ip/tgc-ui.git"
},
"keywords": [
"table",
"grid",
"ui"
],
"author": "idalko",
"license": "ISC",
"dependencies": {
"#atlaskit/banner": "^2.4.2",
"#atlaskit/button": "^5.4.8",
"#atlaskit/checkbox": "^1.0.0",
"#atlaskit/dynamic-table": "^7.2.0",
"#atlaskit/field-text": "^4.1.2",
"#atlaskit/flag": "^6.1.8",
"#atlaskit/icon": "^7.0.0",
"#atlaskit/inline-edit": "^4.5.6",
"#atlaskit/inline-message": "^3.0.4",
"#atlaskit/input": "^1.1.2",
"#atlaskit/lozenge": "^3.4.2",
"#atlaskit/modal-dialog": "^3.0.2",
"#atlaskit/multi-select": "^7.1.7",
"#atlaskit/single-select": "^3.0.0",
"#atlaskit/spinner": "^2.2.3",
"#atlaskit/tabs": "^2.0.0",
"#atlaskit/tooltip": "^6.0.0",
"axios": "^0.16.2",
"bootstrap": "^3.3.7",
"brace": "^0.11.0",
"browser-locale": "^1.0.3",
"moment": "^2.18.1",
"moxios": "^0.4.0",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-ace": "^5.8.0",
"react-addons-update": "^15.6.0",
"react-autocomplete": "^1.7.2",
"react-autosize-textarea": "^0.4.9",
"react-autosuggest": "^9.3.2",
"react-bootstrap": "^0.31.0",
"react-copy-to-clipboard": "^5.0.1",
"react-data-grid": "^2.0.53",
"react-data-grid-addons": "^2.0.53",
"react-datepicker": "^0.53.0",
"react-datetime": "^2.10.1",
"react-dom": "^15.5.4",
"react-file-reader-input": "^1.1.4",
"react-keybinding-component": "^0.5.0",
"sortablejs": "^1.6.1",
"string-hash": "^1.1.3",
"styled-components": "^1.4.6",
"uuid": "^3.1.0",
"yarn": "^0.27.5"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-require": "^3.0.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"chai": "^4.0.2",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"file-loader": "^0.11.2",
"jsdom": "^11.5.1",
"mocha": "^3.4.2",
"react": "^15.5.4",
"react-test-renderer": "^15.5.4",
"sinon": "^2.3.4",
"style-loader": "^0.18.2",
"uglify-js": "^3.0.23",
"uglifyjs-webpack-plugin": "^0.4.6",
"url-loader": "^0.5.9",
"webpack": "^2.6.1"
}
}
and webpack.config.js
const webpack = require("webpack");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var path = require('path'),
jsxPath = 'src',
jsPath = 'dist/lib',
srcPath = path.join(__dirname, jsxPath);
var isProd = (process.env.NODE_ENV === 'production');
var uiVersion = (process.env.CI_VERSION === '0.1.0-SNAPSHOT') ? '' : `_${process.env.CI_VERSION}`;
var service = {
jiracloud: './custom_modules/CloudUtilityService.jsx'
}[process.env.APP_ENV];
function getPlugins() {
var plugins = [];
plugins.push(new webpack.DefinePlugin({
'process.env': {
'CI_VERSION': JSON.stringify(process.env.CI_VERSION),
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'APP_ENV': JSON.stringify(process.env.APP_ENV)
}
}));
if (isProd) {
plugins.push(new UglifyJSPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false
}
}));
}
return plugins;
}
module.exports = {
entry: {
errorLicense: [path.join(srcPath, 'license/ErrorLicense.jsx')],
ducketConfiguration: [path.join(srcPath, 'ducketconfig/DucketConfig.jsx')],
dataSourceConfiguration: [path.join(srcPath, 'datasource/DataSourcesPage.jsx')],
ducket: [path.join(srcPath, 'grid/Grid.jsx')],
serviceDesk: [path.join(srcPath, 'adjustment/servicedesk/ServiceDesk.jsx')],
searchHelp: [path.join(srcPath, 'search/SearchHelp.jsx')]
},
output: {
//path:path.resolve(__dirname, jsPath),
path:path.resolve(__dirname, "../tgc/public/javascript"),
filename: `[name]${uiVersion}.js`
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders:['babel-loader']
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'url-loader?limit=100000#name=[name][ext]'
}
]
},
resolve: {
alias: {
'styled-components': path.resolve('./node_modules/styled-components/dist/styled-components.es.js'),
'utility-service': path.resolve(service)
}
},
plugins: getPlugins()
};
Thank you in advance.
Iev--
Node does never enforce minification, this piece of code in your webpack configuration is:
if (isProd) {
plugins.push(new UglifyJSPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false
}
}));
}
This probably wasn't working on an older version of node because your devDependencies are for uglify#3 which might require node.js > v6
I'm trying to use my React native Android app working as a website.I'm following this tutorial
when i run webpack-dev-server it showing below error.
webpak.cofig.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}
]
},
resolve: {
alias: {
"react-native": "react-native-web"
}
}
};
entry.js
document.write(require('./../testreact/index.android.js'));
package.json
{
"name": "testreact",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"firebase": "^4.1.2",
"react": "^16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-router-flux": "^3.38.0",
"react-native-web": "0.0.104",
"react-navigation": "^1.0.0-beta.11",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-core": "^6.25.0",
"babel-jest": "20.0.3",
"babel-loader": "^7.1.0",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
UPDATE
In case this hasn't been solved, in your webpack config file use babel-loader instead of babel-core.
I have setup Angular2+webpack and NodeJs with backend.
Basic setup look like:
webpack.config.js:
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var helpers = require('./helpers')
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
webpack.dev.js:
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var helpers = require('./helpers')
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
webpack.config.js:
module.exports = require('./config/webpack.dev.js')
package.json:
{
"name": "nr-site",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "concurrently \"webpack-dev-server --watch\" \"nodemon ./bin/www\" ",
"test": "mocha"
},
"dependencies": {
"#angular/common": "~2.4.2",
"#angular/compiler": "~2.4.2",
"#angular/core": "~2.4.2",
"#angular/forms": "~2.4.2",
"#angular/http": "~2.4.2",
"#angular/platform-browser": "~2.4.2",
"#angular/platform-browser-dynamic": "~2.4.2",
"#angular/router": "~3.4.2",
"#angular/upgrade": "~2.4.2",
"#types/express": "^4.0.34",
"#types/extract-text-webpack-plugin": "^2.0.0",
"#types/node": "^6.0.48",
"#types/typescript": "^2.0.0",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.0-beta.17",
"body-parser": "~1.15.2",
"browser-sync": "^2.18.5",
"cookie-parser": "~1.4.3",
"core-js": "^2.4.1",
"debug": "~2.6.0",
"del": "^2.2.2",
"es6-promise": "^4.0.5",
"es6-shim": "^0.35.2",
"express": "~4.14.0",
"express-less": "^0.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"feature": "^1.0.1",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-imagemin": "^3.1.1",
"gulp-sass": "^3.0.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-typescript": "^3.1.3",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.1.2",
"gulp-webserver": "^0.9.1",
"jade": "~1.11.0",
"mongoose": "^4.7.4",
"morgan": "~1.7.0",
"path": "^0.12.7",
"reflect-metadata": "0.1.9",
"run-sequence": "^1.2.2",
"rxjs": "5.0.3",
"serve-favicon": "~2.3.2",
"stylus": "^0.54.5",
"systemjs": "0.19.41",
"zone.js": "0.7.4"
},
"devDependencies": {
"#types/extract-text-webpack-plugin": "^2.0.0",
"#types/gulp-plumber": "0.0.29",
"#types/gulp-sourcemaps": "0.0.29",
"#types/webpack-merge": "0.0.4",
"chai": "^3.5.0",
"concurrently": "^3.1.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.24.1",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.1",
"lite-server": "^2.2.2",
"ngtemplate-loader": "^1.3.1",
"phantomjs-prebuilt": "^2.1.14",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"superagent": "^3.3.1",
"ts-loader": "^1.3.3",
"tslint": "^4.3.1",
"tslint-loader": "^3.3.0",
"typescript": "^2.1.4",
"typings": "^2.1.0",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^2.3.1"
}
}
My problem is when I run npm start , It runs perfectly, but when I want to call a NodeJS API It does call my api. Because it run with two different port. NodeJs run with port 3000 and webpack run with port 8080.
It works find when I run :
return this.http.get('http://localhost:3000/resume')
.map(this.extractData)
.catch(this.handleError);
But If I call only this.http.get('/resume') it does not work, because my current port is not 8080 which webpack API, and I want to call NodeJs API. Meanwhile, If I call all my api from 3000 port, it doesn't work either. even it can not get inside of typescript classes.
So how can I come up with a solution?
I edit the package.json
"scripts": {
"start": "concurrently \"webpack-dev-server --watch\" \"nodemon ./bin/www\" ",
"test": "mocha"
},
to
"scripts": {
"start": "concurrently \"webpack --watch\" \"nodemon ./bin/www\" ",
"test": "mocha"
},
Because, webpack-dev-server generate its own port. I do not need that. What I needed is to run only angular2.