Webpack producing no input - reactjs

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.

Related

Bundle file output not regenerated without build errors

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.

ERROR from UglifyJs Unexpected token keyword, expected punc

I'm getting the following error when trying to run npm install on my project: ERROR in bundle.js from UglifyJs
Unexpected token keyword «function», expected punc «,»
I'm aware it's because I'm trying to use an ES6 feature, but I think something is wrong with my setup which is why it isn't getting compiled to ES5 by Babel.
I've looked at a number of problems on SO regarding the issue, and I've incorporated some of those answers, but none has solved the problem.
Here is my package.json:
{
"name": "my-project",
"version": "0.0.1",
"engines": {
"node": "8.9.1"
},
"private": true,
"scripts": {
"dev": "webpack --progress --colors --watch",
"postinstall": "NODE_ENV=prod webpack -p"
},
"dependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.1.18",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"body-parser": "^1.18.2",
"express": "^4.16.2",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-player": "^1.1.2",
"react-render": "^1.2.1",
"webpack": "^3.11.0",
"yargs": "^11.0.0"
},
"babel": {
"plugins": [
"transform-react-jsx"
],
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"uglifyjs-webpack-plugin": "^1.2.0"
}
}
and my webpack.config.babel.js
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
context: __dirname + "/static",
entry: {
client: ['./App.js']
},
output: {
filename: 'bundle.js',
path: __dirname + "/static/build"
},
resolve: {
extensions: ['*', '.js']
},
plugins: [
new UglifyJSPlugin({
include: /\.min\.js$/
})
],
module: {
loaders: [
{
test: /(\.js$)/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'react',
['es2015', {'modules': false}]
]
}
}
]
}
};

React - Chrome does not report undefined JavaScript object property. Crashes

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.

Webpack, babel and React Error message

Out of nowhere I started getting this error message,
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema.
- configuration has an unknown property 'devserver'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?,
devServer?, devtool?, entry, externals?, loader?, module?, name?,
node?, output?, performance?, plugins?, profile?, recordsInputPath?,
recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?,
target?, watch?, watchOptions? } For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in
configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /.xxx$/, // may apply this only for some modules
options: {
devserver: ...
}
})
]
I have been scouring the internet for the past 2 hours trying to find a solution but I am going round in circles!
Here is my .babelrc, webpack.config.js, .js and package.json files.
Any help would be amazing. Thanks
.babelrc
{
"presets":[
"react",
["es2015", {"modules": false, "loose": true}]
]
}
package.json
{
"name": "complete-intro-to-react",
"version": "1.0.0",
"description": "A two day workshop on a complete intro to React",
"main": "index.js",
"author": "Brian Holt <btholt#gmail.com>",
"license": "MIT",
"scripts": {
"test": "NODE_ENV=test jest",
"update-test": "npm run test -- -u",
"build": "webpack",
"dev": "webpack-dev-server",
"lint": "eslint js/**/*.js webpack.config.js",
"watch": "webpack --watch"
},
"dependencies": {
"axios": "0.15.2",
"express": "4.14.0",
"history": "^4.4.0",
"lodash": "4.16.2",
"preact": "^6.4.0",
"preact-compat": "^3.9.3",
"react": "15.3.2",
"react-dom": "15.3.2",
"react-redux": "4.4.0",
"react-router": "4.0.0-alpha.5",
"redux": "3.3.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-jest": "16.0.0",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "6.16.0",
"babel-preset-react": "^6.16.0",
"babel-register": "6.16.0",
"css-loader": "0.25.0",
"enzyme": "2.0.0",
"enzyme-to-json": "^1.3.0",
"eslint": "3.6.1",
"eslint-config-standard": "6.1.0",
"eslint-config-standard-jsx": "3.1.0",
"eslint-config-standard-react": "4.1.0",
"eslint-loader": "1.3.0",
"eslint-plugin-promise": "2.0.1",
"eslint-plugin-react": "6.3.0",
"eslint-plugin-standard": "2.0.0",
"jest": "15.1.1",
"jsdom": "9.5.0",
"json-loader": "0.5.4",
"react-addons-test-utils": "15.3.2",
"react-test-renderer": "15.3.2",
"style-loader": "0.13.1",
"webpack": "^2.1.0-beta.22",
"webpack-dev-server": "1.16.2"
},
"directories": {
"test": "test"
},
"repository": {
"type": "git",
"url": "git+https://github.com/btholt/complete-intro-to-react.git"
},
"keywords": [
"react",
"workshop",
"intro",
"redux"
],
"bugs": {
"url": "https://github.com/btholt/complete-intro-to-react/issues"
},
"homepage": "https://github.com/btholt/complete-intro-to-react#readme"
}
webpack.config.js
const path = require('path')
module.exports = {
context: __dirname,
entry: './js/ClientApp.js',
devtool: 'source-map',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
devserver: {
publicPath: '/public/'
},
resolve: {
extensions: ['.js', '.json']
},
stats: {
colors: true,
reasons: true,
chunks: false
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
}
]
}
]
}
}
and the .js file
import React from 'react'
import { render } from 'react-dom'
import '../public/normalize.css'
import '../public/style.css'
const App = React.createClass({
render () {
return (
<div className='app'>
<div className="landing">
<h1>svideo</h1>
<input type="text" placeholder='search' />
<a>or Browse All</a>
</div>
</div>
)
}
})
render(<App/>, document.getElementById('app'));
Capital "S" -->devServer not devserver!

Unable to configure Jest in my React App

I'm just starting with tests right now, trying to set up the Jest with my project, but it has been painful.. I am trying to do the React App tutorial, with the Webpack Tutorial, and I'm facing if this error:
C:\Users\myuser\Desktop\myapp\__tests__\Link.test.js:2
import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:320:12)
I'm using Node v7.5.0 and Webpack 2. I installed all the necessary dependencies and I also tried to sort with jest configuration, but it didn't sort my problem.
My package.json looks like this:
{
"name": "myapp",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"jest": {
"modulePaths": ["<rootDir>/src/"],
"moduleDirectories": ["node_modules"],
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/(node_modules)/"
]
},
"scripts": {
"start": "webpack-dev-server --progress --watch",
"build": "webpack --progress",
"test": "jest --verbose"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"css-loader": "^0.26.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jest": "^1.0.2",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.28.0",
"jest": "^18.1.0",
"jest-cli": "^19.0.2",
"node-sass": "^4.5.0",
"react-hot-loader": "3.0.0-beta.6",
"react-test-renderer": "^15.4.2",
"sass-loader": "^5.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.8",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"dependencies": {
"chart.js": "^2.5.0",
"classnames": "^2.2.5",
"file-loader": "^0.11.1",
"flexboxgrid": "^6.3.1",
"google-map-react": "^0.22.3",
"intl": "^1.2.5",
"intl-locales-supported": "^1.0.0",
"lodash": "^4.17.4",
"material-ui": "^0.17.0",
"moment": "^2.17.1",
"node-schedule": "^1.2.1",
"normalize.css": "^5.0.0",
"re-base": "^2.6.0",
"react": "^15.4.2",
"react-chartjs-2": "^2.0.5",
"react-dom": "^15.4.2",
"react-flexbox-grid": "^0.10.2",
"react-router-dom": "^4.0.0",
"react-scrollbar": "^0.5.1",
"react-tap-event-plugin": "^2.0.1",
"webpack": "^2.2.1"
}
}
My .babelrc file looks like this:
{
"presets": [
["es2015", {"modules": false}],
"stage-2",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
I also set the environment to test, but it didn't make any effect.
My Webpack file looks like this:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const plugins = [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/index.html'),
inject: true,
favicon: path.resolve(__dirname, './src/images/favicon.ico'),
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('dev'),
},
}),
];
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./index.jsx',
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
publicPath: '/',
},
context: path.resolve(__dirname, 'src'),
resolve: {
modules: [path.resolve(__dirname, './src'), path.resolve(__dirname, './node_modules')],
extensions: ['.js', '.jsx'],
},
devServer: {
hot: true,
port: 3000,
contentBase: path.resolve(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/',
},
module: {
rules: [
{
test: /(\.js|\.jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: {
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: false,
},
},
},
{
test: /(\.js|\.jsx)$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
{
test: /(\.scss|\.css)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
],
},
{
test: /\.(png|jpg|)$/,
use: ['url-loader?limit=200000'],
},
],
},
plugins: plugins,
};
Can someone help me with this issue? Thanks!

Resources