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
Related
I have been on this bug for several days and nothing that has been written about on the internet helped me.
It occured after I migrated to webpack5 from version 4.
Here is the error:
here is where it occurs precisely:
var inherits = function inherits(cls, superCtor, statics, prototype) { // eslint-disable-next-line no-underscore-dangle cls.super_ = superCtor;
if (!prototype) {
prototype = statics;
statics = null; }
if (statics) {
Object.keys(statics).forEach(function (i) {
Object.defineProperty(cls, i, Object.getOwnPropertyDescriptor(statics, i));
}); }
var properties = {
constructor: {
value: cls,
enumerable: false,
writable: false,
configurable: true
} };
if (prototype) {
Object.keys(prototype).forEach(function (i) {
properties[i] = Object.getOwnPropertyDescriptor(prototype, i);
}); }
cls.prototype = Object.create(superCtor.prototype, properties);//here }; ```
If you continue to look after who called that function :
var Stream = require('stream');
(...)
var StreamBuf = function StreamBuf(options) {
options = options || {};
this.bufSize = options.bufSize || 1024 * 1024;
this.buffers = []; // batch mode fills a buffer completely before passing the data on
// to pipes or 'readable' event listeners
this.batch = options.batch || false;
this.corked = false; // where in the current writable buffer we're up to
this.inPos = 0; // where in the current readable buffer we've read up to
this.outPos = 0; // consuming pipe streams go here
this.pipes = []; // controls emit('data')
this.paused = false;
this.encoding = null;
};
utils.inherits(StreamBuf, Stream.Duplex, {
So the problem is supposed to be the require stream. But I installed it already.
Here is my package.json:
{
"start:dev": "webpack serve",
},
"engines": {
"node": "14.17.1"
},
"keywords": [
"dependencies": {
"axios": "^0.19.2",
"base64-js": "^1.5.1",
"browserify-zlib": "^0.2.0",
"chart.js": "^2.7.1",
"clipboard": "^1.6.1",
"compression": "^1.6.2",
"compression-webpack-plugin": "^8.0.1",
"core-js": "^3.15.1",
"dotenv-webpack": "^7.0.3",
"es6-promise": "^4.0.5",
"exceljs": "^1.15.0",
"express": "^4.14.0",
"file-saver": "^2.0.1",
"firebase": "^8.6.8",
"fs": "0.0.1-security",
"gsap": "^1.19.1",
"helmet": "^3.4.0",
"if-env": "^1.0.0",
"ipaddr.js": "^1.9.1",
"isomorphic-fetch": "^2.2.1",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"lodash.at": "^4.6.0",
"marked": "^0.3.6",
"moment": "^2.15.1",
"moment-timezone": "^0.5.25",
"promise-polyfill": "^6.0.2",
"prop-types": "^15.7.2",
"react": "^15.6.0",
"react-chartjs-2": "^2.6.4",
"react-datepicker": "^0.55.0",
"react-dom": "^15.6.0",
"react-popper": "^1.0.0-beta.6",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"readable-stream": "^2.0.2",
"redux": "^3.5.2",
"redux-logger": "^2.0.0",
"redux-thunk": "^2.1.0",
"sockjs-client": "^1.1.4",
"stream": "0`enter code here`.0.2",
"string.prototype.endswith": "^0.2.0",
"string.prototype.startswith": "^0.2.0",
"tapable": "1.0.0-beta.5",
"tslib": "^2.3.0",
"ua-parser-js": "^0.7.12",
"webfontloader": "^1.6.27",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/node": "^7.6.1",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.11.5",
"app-require": "^0.1.1",
"autoprefixer": "^10.2.6",
"babel-eslint": "^8.2.6",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"buffer": "^6.0.3",
"chai": "^4.2.0",
"classnames": "^2.2.5",
"copy-webpack-plugin": "^9.0.0",
"crypto-browserify": "^3.12.0",
"css-loader": "^5.2.6",
"dotenv": "^4.0.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"file-loader": "^6.2.0",
"firebase-admin": "^9.10.0",
"forever": "^0.15.3",
"html-webpack-plugin": "^5.3.2",
"jest": "^24.9.0",
"loglevel": "^1.6.4",
"mini-css-extract-plugin": "^1.6.0",
"mocha": "^6.2.0",
"node-sass": "^4.14.1",
"normalize.css": "^7.0.0",
"postcss-loader": "^3.0.0",
"prettier": "^1.18.2",
"raw-loader": "^0.5.1",
"react-hot-loader": "^4.13.0",
"redux-devtools": "^3.3.1",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.3",
"url-loader": "^4.1.1",
"util": "^0.12.4",
"webpack": "^5.40.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
```
And here is my webpack config:
```.
const webpack = require('webpack');
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const autoprefixer = require('autoprefixer');
const Dotenv = require('dotenv-webpack')
const nodeEnv = process.env.NODE_ENV || "development"
const simulateProd = process.env.SIMULATE_PROD
const isProdEnv = nodeEnv === 'production'
const isNotDevEnv = nodeEnv !== "development"
const buildPath = path.join(__dirname, './dist');
const sourcePath = path.join(__dirname, './src');
const imagesPath = path.join(__dirname, './src/images');
const iconsPath = path.join(__dirname, './src/icons');
const soundsPath = path.join(__dirname, './src/sounds');
// Common plugins
const plugins = [
new MiniCssExtractPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
],
context: sourcePath,
},
}),
new CopyWebpackPlugin(
{
patterns: [
{from: iconsPath, to: 'icons'},
{from: imagesPath, to: 'images'}
]
}
),
new Dotenv({
systemvars: true
}),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
]
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
plugins: ['react-hot-loader/babel'],
}
// use: [
// 'babel-loader',
// ],
},
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
url : false
}
},
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(ico|jpe?g|png|gif|svg|mp3|html)$/,
include: [imagesPath, soundsPath],
use: 'file-loader?name=[path][name].[ext]',
},
{
test: /\.md$/,
use: 'raw-loader'
}
]
if (isProdEnv) {
// Production plugins
plugins.push(
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true
})
)
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin()
)
}
module.exports = {
devtool: isNotDevEnv ? false : 'source-map',
context: sourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: '/',
filename: "bundle.js",
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx', '.md', '.scss', '.css'],
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
fallback: {
"buffer": false,
"fs": false,
"os": false,
"path": false,
"zlib": false,
"stream": false,
"crypto": false,
} ,
},
plugins,
optimization : {
moduleIds: 'named',
},
devServer: {
contentBase: isNotDevEnv ? buildPath : sourcePath,
historyApiFallback: true,
port: 8080,
compress: isNotDevEnv,
inline: !isNotDevEnv,
hot: !isNotDevEnv,
host: "localhost",
disableHostCheck: true,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};
I tried a lot of things with the fallbacks but without succes. Of course that I removed package.lock and node-modules and then installed but same thing. I also installed excel-js again.
I am waiting for a miracle now! Thanks
npm i exceljs#latest (with #latest) fixed it
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'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.
This is driving me nuts. I'm trying to set up HMR with hapi/hapi-webpack-plugin and webpack-hot-middleware. My set up is an APS.NE MVC 5 application (serving the data) and Aurelia as a front-end framework.
HMR seems to start properly:
Then when I make a change on any of my js/html files a rebuild is fired properly, again:
but I'm receiving an error in process-update.js where module.hot is undefined and naturally it will error out when it checks for module.hot.status()
Here are the relevant files:
webpack-dev-server.js
/* eslint no-console: 0 */
import {Server} from 'hapi';
import H2o2 from 'h2o2';
import yargs from 'yargs';
import Webpack from 'webpack';
import WebpackPlugin from 'hapi-webpack-plugin';
import webpackConfig from './webpack.config.babel';
const argv = yargs.argv;
const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
if (!isNumeric(argv.port)) {
console.log(`Port must be numeric`);
process.exit(-1);
}
const compiler = new Webpack(webpackConfig);
const server = new Server();
server.connection({ host: 'localhost', port: 6789, labels: 'proxy-server' });
const assets = {
publicPath: webpackConfig.output.publicPath,
hot: false,
noInfo: true,
quiet: false,
host: 'localhost',
port: 6790,
stats: {
colors: true,
},
};
const hot = {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
};
server.register([
{
register: H2o2,
},
{
register: WebpackPlugin,
options: { compiler, assets, hot },
},
], error => {
if (error) {
return console.error(error);
}
server.route({
method: ['GET', 'POST'],
path: '/{path*}',
handler: (request, reply) => {
if (/^Content\/bundles\/[A-Za-z0-9\-]+\.css/.test(request.params.path)) {
const response = reply('// This is a fake CSS content... :)');
response.type('text/css');
return response;
}
return reply.proxy({
host: 'localhost',
port: argv.port,
passThrough: true,
});
},
});
server.start(() => console.log(`Server running on ${server.info.uri}`));
});
Package.json
{
"name": "aurelia-skeleton-navigation-webpack",
"version": "1.1.1",
"description": "A starter kit for building a standard navigation-style app with Aurelia and webpack.",
"main": "dist/main.js",
"scripts": {
...
"start": "babel-node ./webpack-dev-server.js"
...
},
],
"aurelia": {
"build": {
"resources": []
}
},
"dependencies": {
"aurelia-bootstrapper-webpack": "^1.1.0",
"aurelia-event-aggregator": "^1.0.0",
"aurelia-fetch-client": "^1.0.1",
"aurelia-framework": "^1.0.7",
"aurelia-history-browser": "^1.0.0",
"aurelia-http-client": "^1.0.3",
"aurelia-loader-webpack": "^1.0.3",
"aurelia-logging-console": "^1.0.0",
"aurelia-pal-browser": "^1.0.0",
"aurelia-polyfills": "^1.1.1",
"aurelia-route-recognizer": "^1.1.0",
"aurelia-router": "^1.0.7",
"aurelia-templating-binding": "^1.1.0",
"aurelia-templating-resources": "^1.2.0",
"aurelia-templating-router": "^1.0.0",
"aurelia-ui-virtualization": "1.0.0-beta.3.0.0",
"babel-polyfill": "^6.20.0",
"bootstrap": "^3.3.7",
"d3": "^4.4.0",
"font-awesome": "^4.7.0",
"highcharts": "^5.0.6",
"isomorphic-fetch": "^2.2.1",
"select2": "3.5.1"
},
"devDependencies": {
"#easy-webpack/config-aurelia": "^2.2.2",
"#easy-webpack/config-babel": "^4.0.0",
"#easy-webpack/config-common-chunks-simple": "^2.0.3",
"#easy-webpack/config-copy-files": "^1.1.2",
"#easy-webpack/config-css": "^4.0.0",
"#easy-webpack/config-env-development": "^2.1.5",
"#easy-webpack/config-env-production": "^3.0.0",
"#easy-webpack/config-external-source-maps": "^3.1.0",
"#easy-webpack/config-fonts-and-images": "^2.1.0",
"#easy-webpack/config-generate-index-html": "^2.1.1",
"#easy-webpack/config-global-bluebird": "^2.1.0",
"#easy-webpack/config-global-jquery": "^2.1.0",
"#easy-webpack/config-global-regenerator": "^1.2.2",
"#easy-webpack/config-html": "^3.1.0",
"#easy-webpack/config-json": "^3.1.0",
"#easy-webpack/config-test-coverage-istanbul": "^3.2.0",
"#easy-webpack/config-uglify": "^2.2.3",
"#easy-webpack/core": "^2.0.0",
"aurelia-tools": "^1.0.0",
"babel-cli": "^6.4.5",
"babel-loader": "^6.2.8",
"babel-plugin-transform-class-properties": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.0.0",
"babel-register": "^6.18.0",
"concurrently": "^3.1.0",
"cross-env": "^3.1.3",
"del-cli": "^0.2.0",
"eslint": "^3.12.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"h2o2": "^5.4.0",
"hapi": "^16.0.2",
"hapi-webpack-plugin": "^1.3.0",
"html-webpack-plugin": "^2.24.1",
"http-server": "^0.9.0",
"install": "^0.8.2",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-remap-istanbul": "^0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"node-sass": "^4.1.0",
"npm": "^4.0.3",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.2.1",
"protractor": "^4.0.11",
"sass-loader": "^4.1.0",
"url-loader": "^0.5.7",
"wait-on": "^2.0.1",
"webpack": "2.1.0-beta.27",
"webpack-dev-server": "2.1.0-beta.12",
"yargs": "^3.32.0",
"babel-preset-es2015": "^6.3.13",
"bootstrap": "^3.3.6",
"clean-webpack-plugin": "^0.1.8",
"css-loader": "^0.23.1",
"font-awesome": "^4.5.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.0"
}
}
webpack.confing.babel.js
/**
* To learn more about how to use Easy Webpack
* Take a look at the README here: https://github.com/easy-webpack/core
**/
import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '#easy-webpack/core'
import path from 'path'
...
process.env.BABEL_ENV = 'webpack';
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'development');
// basic configuration:
const title = 'Aurelia Navigation Skeleton';
const baseUrl = '.';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');
let htmlWebPackPlugin = new HtmlWebpackPlugin({
inject: false,
template: 'Areas/Aurelia/Views/Shared/_AureliaLayoutTemplate.cshtml',
filename: '../Areas/Aurelia/Views/Shared/_AureliaLayout.cshtml'
});
let optimizeCssAssetsPlugin = new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/,
cssProcessorOptions: { discardComments: { removeAll: true } }
});
let plugins = ENV === 'production'
? { plugins: [htmlWebPackPlugin, optimizeCssAssetsPlugin] }
: { plugins: [htmlWebPackPlugin, new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] };
const coreBundles = {
bootstrap: [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'regenerator-runtime'
],
// these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
aurelia: [
'aurelia-bootstrapper-webpack',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-path',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources',
'aurelia-ui-virtualization',
'select2',
'webpack-hot-middleware/client',
'webpack/hot/only-dev-server'
]
}
/**
* Main Webpack Configuration
*/
let config = generateConfig(
{
entry: {
'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */,
'webpack-hot-middleware/client',
'webpack/hot/only-dev-server'],
'aurelia-bootstrap': coreBundles.bootstrap,
'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
},
output: {
path: outDir,
publicPath: '/dist/'
},
...
module.exports = stripMetadata(config);
Am I missing something in the config that leaves module.hot property undefined?
I'm answering my own question for posterity:
This is related to my other question:
Aurelia, running webpack-dev-server --hot throws error on App Hot Update - 'Cannot read property 'status' of undefined'
In short, Aurelia doesn't support HMR ... yet (only css).
https://github.com/aurelia/skeleton-navigation/issues/629
http://blog.aurelia.io/2016/12/08/big-aurelia-release-update/
I am currently running my project by executing webpack-dev-server , but now I want to run my project through express app. What are the steps to do the same.
Package.json:
{
"name": "react-redux-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack",
"start": "webpack-dev-server"
},
"license": "ISC",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.9.0",
"cross-env": "^1.0.8",
"css-loader": "^0.23.1",
"expect": "^1.20.1",
"express": "^4.14.0",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.8.0",
"path": "^0.12.7",
"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.1.0",
"react-dropzone": "^3.8.0",
"react-hot-loader": "^1.3.1",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.11.0"
},
"devDependencies": {
"babel-plugin-react-transform": "^2.0.2"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ritishgumber/file-ui.git"
},
"author": "",
"bugs": {
"url": "https://github.com/ritishgumber/file-ui/issues"
},
"homepage": "https://github.com/ritishgumber/file-ui#readme"
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
entry: './dev/js/index.js',
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/
}, {
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}, {
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: [
'react', 'es2015', 'stage-0'
],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties']
}
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [new webpack.optimize.OccurrenceOrderPlugin()]
};
You'll want to use the webpack dev middleware. Sample code from their site:
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var compiler = webpack({
// configuration
output: { path: '/' }
});
app.use(webpackDevMiddleware(compiler, {
// options
}));