Since im building my webapp with React, when i try to set something into an undefined object property, the code processing crashes (reproducible with breakpoint debugging) and no errors are shown in the console log. Also the chrome react extension does not give me any errors.
So to finding a bug is more time consuming that it should be.
let changedJsonResponse = jsonResponse;
changedJsonResponse.data = newTableData; // changedJsonResponse.data is undefined
// throws no error & code proccess crashes
webpack.config.js
const webpack = require('webpack');
const path = require('path');
let config = {
devtool: 'eval-source-map',
entry: {
FooManagement: ['babel-polyfill', './domains/FooManagement/entry.jsx'],
},
output: {
path: path.resolve(__dirname, '../web/react/'),
filename: '[name].js'
},
externals: {
'jquery': 'window.jQuery',
'bootbox': 'window.bootbox',
},
resolve: {
alias: {
alias_shared: path.resolve(__dirname, 'shared'),
},
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: {presets: ['es2015', 'react']}
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
};
module.exports = config;
package.json
{
"author": "myself",
"version": "0.0.1",
"description": "",
"main": "index.jsx",
"scripts": {
"watch": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"axios": "^0.16.2",
"dateformat": "^3.0.2",
"is-uuid": "^1.0.2",
"lodash": "^4.17.4",
"react": "^16.0.0",
"react-cropper": "^1.0.1",
"react-dom": "^16.0.0",
"react-dropzone": "^4.2.3",
"react-router-dom": "^4.2.2",
"react-switchery-component": "0.0.7",
"uuid": "^3.1.0"
}
}
Chrome version: 62.0.3202.94
I was able to catch those errors in Axios .catch.
After a while i found the cause of the problem.
Related
New to webpack trying to understand how to make file structure, webpack.config.js and package.json work together, but not sure what is failing as the client.min.js(my outputted bunfdle file) is never regenerated upon NPM run dev
webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname+"/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
package.json:
{
"name": "appThing",
"version": "0.0.0",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"flux": "^2.1.1",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack": "^2",
"webpack-dev-server": "^2"
},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.7.0",
"webpack-cli": "^2.0.10"
},
"description": ""
}
File structure:
NPM run dev result:
webpack-dev-server does not generate files. It serves all assets from memory.
If you want to generate files, run webpack.
I'm kind of desperate here.
I'm working on a React application and use webpack to compile my bundle.js.
The problem is when i try to compile it for "production" i end up with a really nasty error :
"Minified React error #105; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=105&args[]=HardwareKeyboardArrowDown for the full message or use the non-minified dev environment for full errors and additional helpful warnings."
Followed by a bunch of
"Uncaught TypeError: Cannot read property '__reactInternalInstance$qw6tjofxg1o' of null"
When i set my node.env to developement ('NODE_ENV': JSON.stringify('developement') ), it's working fine.
The link in the error says : "A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object" but i don't have any problem in dev mode, so i don't think its coming from my code and i can't find where i should look to solve this problem since dev mode doesn't tell anything more to me...
Here are my webpack config & package.json :
const webpack = require('webpack');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const config = {
entry: [
'./src/app/app.js'
],
// Render source-map file for final build
devtool: 'source-map',
debug: true,
// output config
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
// Define production build to allow React to strip out unnecessary checks
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
// Minify the bundle
new webpack.optimize.UglifyJsPlugin({
compress: {
// suppresses warnings, usually from module minification
warnings: false,
},
}),
// Allows error warnings but does not stop compiling.
new webpack.NoErrorsPlugin(),
// Transfer Files
],
module: {
loaders: [
{
test: /\.js$/, // All .js files
loaders: ['babel-loader'], // react-hot is like browser sync and babel loads jsx and es6-7
exclude: [nodeModulesPath],
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
include: /flexboxgrid/
},
{
test: /\.json$/, loader: "json-loader",
},
{ test: /\.scss?$/,
loader: 'style!css!sass',
include: path.join(__dirname, 'src', 'styles') },
{ test: /\.png$/,
loader: 'file' },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file'}
],
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.json']
}
},
};
module.exports = config;
{
"name": "material-ui-example-webpack",
"version": "0.16.0",
"description": "Sample project that uses Material-UI",
"repository": {
"type": "git",
"url": "https://github.com/callemall/material-ui.git"
},
"scripts": {
"start": "webpack-dev-server --config webpack-dev-server.config.js --host $IP --port $PORT --hot --progress --inline --colors",
"clean-public": "npm run remove-public && mkdir public",
"remove-public": "node_modules/.bin/rimraf ./public",
"build:html": "babel-node tools/buildHtml.js",
"heroku-prebuild": "npm install && npm-run-all clean-public build:html",
"heroku-postbuild": "babel-node tools/build.js",
"prod-start": "babel-node tools/publicServer.js"
},
"private": true,
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"html-webpack-plugin": "^2.24.1",
"npm-run-all": "1.8.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"rimraf": "2.5.2",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"axios": "^0.16.1",
"babel-cli": "6.8.0",
"babel-loader": "^6.2.8",
"babel-polyfill": "6.8.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-2": "^6.24.1",
"cheerio": "^0.20.0",
"colors": "1.1.2",
"compression": "^1.6.1",
"css-loader": "^0.27.3",
"express": "^4.15.2",
"json-loader": "^0.5.4",
"lint": "^1.1.2",
"material-ui": "^0.17.1",
"ncp": "^2.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"react": "^15.4.1",
"react-component-queries": "^2.1.1",
"react-dom": "^15.4.1",
"react-fittext": "https://github.com/gianu/react-fittext",
"react-flexbox-grid": "^1.0.2",
"react-html-parser": "^1.0.3",
"react-masonry-component": "^5.0.5",
"react-redux": "^5.0.4",
"react-responsive": "^1.2.7",
"react-router": "^2.0.0-rc5",
"react-router-dom": "^4.0.0",
"react-sizeme": "^2.3.1",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0",
"redux-form": "^6.6.3",
"redux-promise": "^0.5.3",
"rimraf": "2.5.2",
"serve-favicon": "^2.3.0",
"style-loader": "^0.16.0",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.13.3"
}
}
buildHtml script :
import fs from 'fs';
import cheerio from 'cheerio';
import colors from 'colors';
/*eslint-disable no-console */
console.log("buildHTML.js start");
fs.readFile('src/index.html', 'utf8', (err, markup) => {
if (err) {
return console.log(err);
}
const $ = cheerio.load(markup);
$('head').prepend('');
fs.writeFile('public/index.html', $.html(), 'utf8', function (err) {
if (err) {
return console.log(err);
}
console.log('index.html written to /public'.green);
});
});
And then build.js
/*eslint-disable no-console */
import webpack from 'webpack';
import webpackConfig from '../webpack-production.config';
import colors from 'colors';
import ncp from 'ncp';
process.env.NODE_ENV = 'production';
console.log("build.js start");
//Static files to import in /public (images/css)
var source = [["src/images","public/images"],["src/css","public/css"]];
function copyStaticFiles(path){
ncp(path[0], path[1], function (err) {
if (err) {
return console.error(err);
}})
}
console.log('Generating minified bundle for production via Webpack...'.blue);
webpack(webpackConfig).run((err, stats) => {
if (err) { // so a fatal error occurred. Stop here.
console.log(err.bold.red);
return 1;
}
const jsonStats = stats.toJson();
if (jsonStats.hasErrors) {
return jsonStats.errors.map(error => console.log(error.red));
}
if (jsonStats.hasWarnings) {
console.log('Webpack generated the following warnings: '.bold.yellow);
jsonStats.warnings.map(warning => console.log(warning.yellow));
}
console.log(`Webpack stats: ${stats}`);
source.forEach(copyStaticFiles);
console.log('Your app has been compiled in production mode and written to /public.'.green);
return 0;
});
I don't even know where to start and i can't find any documentation about this kind of errors.
I can provide more informations if needed.
Thanks for reading me
Ok so i dont have a object with a HardwareKeyboardArrowDown so i went looking in my dependencies and i found that it came from the matérial-ui dependency.
I forced the version 17.4 in my package.json and it worked !
The message gave you the name of the function (component) that returns the invalid object. HardwareKeyboardArrowDown.
So you should look at the return of its render function and make sure you return a valid React element (or null)
That means no undefined, array etc..
Why is my bundle.js so large?
What is wrong with my configuration file?
All my React projects tend to be incredibly large in file size (bundle.js is 7.58 mb). I have no idea why is it this large. I already have uglifyJS on, but this doesn't seem to help a lot.
Here are the details:
bundle.js 7.58 MB 0 [emitted] main
index.html 942 bytes [emitted]
My webpack.config.js
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, 'dist');
const APP_DIR = path.resolve(__dirname, 'src/components');
const DATA_DIR = path.resolve(__dirname, 'data');
const config = {
entry: APP_DIR + '/App.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: [
'babel'
],
query: {
presets: ["es2015", "react"]
}
},
{
test: /\.css$/,
loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
},
{
test:/\.scss$/,
loader:'style-loader!css-loader?importLoaders=1!postcss-loader!sass-loader'
},
{
test: /\.html/,
loader:'html-loader'
},
{
test: /\.(json)([\?]?.*)$/,
include: DATA_DIR,
loader: "file-loader",
query:{
name:"data/[name].[ext]"
}
},
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: "file-loader",
query:{
name:"asserts/fonts/[name].[ext]"
}
},
{
test: /\.(gif|png|jpe?g)$/i,
include: DATA_DIR,
loader: "file-loader",
query:{
name:"data/images/[name]-[hash:5].[ext]"
}
}
]
},
postcss:[
require('autoprefixer')({
broswers:['last 5 versions']
})
],
devtool:'eval-source-map',
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
proxy:{
'/api/*':{
target:'http://localhost:8081',
secure:false
}
}
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
title:'this is a title', //一个title 属性
inject:'body'
})
]
};
module.exports = config;
My package.json
{
"name": "react-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress --profile --colors --hot --inline --port 3000 --host 0.0.0.0",
"dev": "webpack -d --watch",
"webpack": "webpack -p --config webpack.config.js --colors --display-reasons --display-error-details --display-modules --sort-modules-by size"
},
"author": "Sharp",
"license": "MIT",
"dependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"webpack": "^1.12.8"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"axios": "^0.15.3",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"history": "^4.6.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"lodash": "^4.17.4",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"react-addons-update": "^15.4.2",
"react-bootstrap": "^0.30.8",
"react-bootstrap-datetimepicker": "0.0.22",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"redux": "^3.6.0",
"redux-logger": "^2.8.2",
"redux-thunk": "^2.2.0",
"remove": "^0.1.5",
"sass-loader": "^6.0.3",
"scss-loader": "0.0.1",
"style-loader": "^0.14.1",
"webpack-dev-server": "^1.16.3"
}
}
Does anyone have any idea how to fix this?
Caveat: OP's config is a webpack v1 config, while my answer is for v2.
You are using the type of source maps that are contained in the bundle itself:
devtool:'eval-source-map'
This type of source maps is for developmnent only, so if the bundle size is huge it's not an issue. So nothing is wrong with you configuration file per se, you just have to make two separate configs (maybe both exending a base config) for development and production, and use different source maps types in both.
See https://webpack.js.org/configuration/devtool/ for source map types that should be used in production and development. For production you could use something like cheap-source-map or not use source maps at all.
Generally source maps can be output as a standalone bundle/chunk or be contained in the code bundle itself, and have different levels of detail, from line/column info to no source maps at all. This is up to you to decide how much debugging info you need in production and if you are ok with making your sources publicly available.
I am aware that this is quite a common problem with Webpack, but I am a total newbie and the solutions I've found so far seem to be very specific to the single project. However, the scenario is the same: Webpack compiling the project correctly and then showing a blank page, without reporting any errors.
Here is my webpack.config.js (I made it following tutorials):
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default () => ({
entry: [
path.join(__dirname, 'src/index.jsx'),
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './App.html'
}),
],
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: [
{
loader: 'babel',
options: {
babelrc: false,
presets: [
['es2015', { modules: false }],
'react',
],
}
}
]
},
{
test: /\.(css|scss|sass)$/,
loader: 'style!css!sass',
},
]
},
});
module.exports = config;
Here my package.json:
{
"name": "smart-fit",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"chartjs": "^0.3.24",
"interactjs": "^1.2.8",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "^3.0.0-beta.3",
"react-table": "^5.6.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"html-webpack-plugin": "^2.28.0",
"loader-utils": "^1.1.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Webpack version is the lastest and the project is written using React and ES5.
I am building a react app with Redux. I have a reducer returning:
const posts = (state={posts:[], search_criterion:''}, action) => {
switch (action.type) {
case 'SOME_EVENT':
return {
...state,
search_criterion:action.search_criterion
}
default:
return state
}
}
export default posts
When I build with Webpack, I get:
Module build failed: SyntaxError: Unexpected token (x:y)
Which points to ....
Any idea? What am I doing wrong?
webpack.config.js
const webpack = require('webpack');
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./app.js"
// ,html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/server/js",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
],
},
//alient app settings settings
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('test'),
'APIHOST': JSON.stringify('http://localhost:8081'),
}
})
],
}
package.json
{
"name": "react-project",
"version": "1.0.0",
"description": "",
"main": "app.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"start": "NODE_ENV=test APIHOST=http://localhost:8081 babel-node server/server.js --presets es2015,stage-2"
},
"babel": {
"presets": [
"es2015",
"react"
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.15.2",
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"express-handlebars": "^3.0.0",
"express-session": "^1.14.2",
"file-loader": "^0.9.0",
"node-jsx": "^0.13.3",
"socket.io": "^1.5.1",
"uglify-js": "^2.7.4",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0"
}
}
In your package.json add stage-0 under react, like so:
"babel": {
"presets": [
"es2015",
"react"
"stage-0"
]
},
Alternatively you could just add the transform-object-rest-spread plugin.