I've been trying to follow the simplest example on how to set up a minimal react app with webpack... but i can't seem to get the webpack-dev-server to work.. i've tried alot of suggestions here and they dont seem to work. i started off with webpack 3.-.- version and now changed to webpack 2.6.2 still same issue.
this is my package.json file:
{
"name": "react-tutorial",
"version": "1.0.0",
"description": "app to learn how to make react apps",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified...leave no be by force to test\" && exit 1",
"start": "webpack-dev-server --hot"
},
"repository": {
"type": "git",
"url": "git+https://github.com/davidsbelt/react-tutorial.git"
},
"author": "Chuka-ogwude David",
"license": "ISC",
"bugs": {
"url": "****"
},
"homepage": "****",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
this is the webpack.config.js file:
var config = {
entry: './index.js',
output: {//make sure to install
path: '/',
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config
and this is the error i get when i run npm start:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API sche
ma.
- configuration.entry should be one of these:
object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
The entry point(s) of the compilation.
Details:
* configuration.entry should be an object.
* configuration.entry should be a string.
* configuration.entry should NOT have duplicate items (items ## 1 and 3 are identical) ({
"keyword": "uniqueItems",
"dataPath": ".entry",
"schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
"params": {
"i": 3,
"j": 1
},
"message": "should NOT have duplicate items (items ## 1 and 3 are identical)",
"schema": true,
"parentSchema": {
"items": {
"minLength": 1,
"type": "string"
},
"minItems": 1,
"type": "array",
"uniqueItems": true
},
*********
* configuration.entry should be an instance of function
function returning an entry object or a promise..
"
all my files (index.js, App.js, index.html, webpack.config.js, package.json) are in the same directory...
Please help... this seemingly straightforward configuration has cost me a lot of hours.
Thanks...
It looks like you're running a configuration file that matches with webpack the older version 1. In particular, the module.loaders statement no longer exist in webpack > 2, and has been replaced with module.rules see :
https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules
Note that there are less changes when migrating from webpack 2 to 3, so I guess the migration guide will be helpful in your case.
Hope this helps!
Strange, I was not able to reproduce your problem with your webpack.config.js file. However, modifying the entry line to the following dumps the same error message :
entry:
[
"./index.js",
"webpack/hot/dev-server",
],
Are you sure you're using the right webpack config file here ? Hope this will help you fix the issue.
Note, on my system, I have webpack#2.7.0, webpack-dev-server#2.8.2
Related
I want to keep the Backend project I developed with Node JS as Build and keep it as 1 HTML file on my server as Webpack. I am developing with nodemon, no problem, but according to my configuration, the "NPM RUN BUILD" dwelling does not work. Could cause the problem?
30 different errors return, this is one. All of them write other library information like this.
"Module not found: Error: Can't resolve 'zlib' in '/ Users / ugurcanalyuz / Projects / Ekartex / ekartex_backend / node_modules / body-parser / lib'"
webpack.config.js
const path = require("path");
module.exports = {
entry: './server.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
compress: true,
port: 3200
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
}
server.js
const express = require("express");
const app = express();
const users = require("./src/routers/users");
app.use(users);
app.listen(3200, () => {
console.log("Sistem açık");
})
package.json
{
"name": "exxx",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "nodemon server.js",
"build": "webpack --mode production"
},
"repository": {
"type": "git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
},
"dependencies": {
"express": "^4.17.1"
}
}
devServer option is for client-side. for node.js you need to add
target: "node",
and also for better performance
const nodeWebExternals = require("webpack-node-externals");
// add this property to webpack config object
externals: [nodeWebExternals()],
Just run the following command, inside you command line (/terminal):
npm i zlib
I'm currently in the process of learning React and have encountered an error in the webpack section. I use the plugin transform-class-properties for the arrow functions but webpack shows error in processing them.
ERROR in ./src/app.js 86:20
Module parse failed: Unexpected token (86:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| }
> handleRemoveAll = () => {
| this.setState( () => ({ options: [] }));
| }
error Command failed with exit code 2.
my webpack config file looks like this
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
};
and this is my package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Test User",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=react,env --plugins=transform-class-properties --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"live-server": "^1.2.1",
"webpack": "^4.44.0"
},
"devDependencies": {
"webpack-cli": "^3.3.12"
}
}
You should add a loader to webpack configuration
https://survivejs.com/webpack/loading/javascript/
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
Also a .babelrc file
{
presets: [
[
'#babel/preset-env',
{
targets: {
browsers: 'last 2 versions',
},
loose: true,
modules: false,
},
],
'#babel/preset-react',
],
plugins: ['transform-class-properties'],
}
I have already done some research and tried different configurations of webpack. However, webpack won't compile my ES5+ code to ES5. In my node_modules directory I have a bunch of babel directories:
babel-preset-env
babel-preset-es2015
babel-core
babel-helpers
babel-helper-{lotsOfDifferentDirectories}
babel-plugin-{lotsOfDifferentDirectories}
#babel
#babel/core
#babel/preset-env
and many many more...
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: "./_assets/js/src/example.js"
},
mode: "development",
output: {
path: path.resolve(__dirname, "_assets/js/build"),
filename: "exampleBundle.js"
},
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["#babel/preset-env"]
}
}]
}
}
package.json
{
"name": "jkk-onepager",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "http://10.8.1.1:850/root/jkk-onepager.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.29.6",
"webpack-dev-server": "^3.2.1"
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"webpack-cli": "^3.2.3"
}
}
src/example.js
let testArray = [1,2,3,4,5];
testArray.forEach( item => {
console.log(item);
})
part of exampleBundle.js
/***/ "./_assets/js/src/example.js":
/*!***********************************!*\
!*** ./_assets/js/src/example.js ***!
\***********************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("var testArray = [1, 2, 3, 4, 5];\ntestArray.forEach(function (item) {\n console.log(item);\n});\n\n//# sourceURL=webpack:///./_assets/js/src/example.js?");
/***/ })
/******/ });
Console output after I run npm run build
Hash: 70c0ea4134e6e46211b5
Version: webpack 4.29.6
Time: 896ms
Built at: 2019-03-21 11:28:05
Asset Size Chunks Chunk Names
exampleBundle.js 3.94 KiB app [emitted] app
Entrypoint app = exampleBundle.js
[./_assets/js/src/example.js] 93 bytes {app} [built]
Has somebody else faced this issue before? I have tried out every suggestion I could find in articles about this issue, but it didn't help. Any idea how to fix this?
This question already has answers here:
Getting "Error: `output.path` needs to be an absolute path or `/`"
(5 answers)
Closed 5 years ago.
I am a beginner in React,and at the moment I am trying to do the basic set up. So far I installed the basic modules from npm and the folder structure of my project is as shown below.
The package.json shows what I have installed as well as a small description of the project.
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"repository": {
"type": "git",
"url": "https://github.com/theo82"
},
"keywords": [
"test"
],
"author": "Theo Tziomakas",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
Anyway when I am typing npm start,I get this error.
Error: `output.path` needs to be an absolute path or `/`.
at Object.setFs (C:\Users\Theodosios\Desktop\reactApp\node_modules\webpack-d
ev-middleware\lib\Shared.js:88:11)
I believe this has to do with the webpack.config.js file.
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
How can this error be fixed?
Thanks,
Theo?
you need to define the output path relative to webpack config.
path: path.resolve(__dirname, './'),
publicPath: '/',
filename: 'bundle.js'
I managed to use this react-hot-boilerplate configuration script to create and test a simple React Flux webapp.
Now that I have a website I like when I run npm start, what would be the easiest/best way to add a production build in the configuration? When I use that 'package' command I would like to get a little prod folder with all the final html and minified js files that I need in it, is that what I should expect?
This is my package.json :
{
"name": "react-hot-boilerplate",
"version": "1.0.0",
"description": "Boilerplate for ReactJS project with hot code reloading",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"author": "Dan Abramov <dan.abramov#me.com> (http://github.com/gaearon)",
"license": "MIT",
"bugs": {
"url": "https://github.com/gaearon/react-hot-boilerplate/issues"
},
"homepage": "https://github.com/gaearon/react-hot-boilerplate",
"devDependencies": {
"babel-core": "^5.4.7",
"babel-eslint": "^3.1.9",
"babel-loader": "^5.1.2",
"eslint-plugin-react": "^2.3.0",
"react-hot-loader": "^1.2.7",
"webpack": "^1.9.6",
"webpack-dev-server": "^1.8.2"
},
"dependencies": {
"react": "^0.13.0",
"flux": "^2.0.2",
"events": "^1.0.2",
"object-assign": "^3.0.0",
"jquery": "^2.1.4",
"imports-loader": "^0.6.4",
"url-loader": "^0.5.6",
"numeral": "^1.5.3",
"bootstrap": "^3.3.5",
"d3": "^3.5.6",
"zeroclipboard": "^2.2.0",
"react-toastr": "^1.5.1",
"d3-legend": "^1.0.0"
}
}
I think I want to add a new script in the scripts list so I can use a new npm xyz command but I am not sure what to write there.
Also my Webpack.config.js, in case I might(?) have to use a similar but distinct copy for the prod config :
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
],
externales: { "jquery": "jQuery", "$": 'jQuery' },
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
},
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
]
}
};
And I'm not sure which parts to keep, alter (prod config) or add if a copy is required...
You'll want to run your Webpack build with the --optimize-minimize option (minifies) and make sure that NODE_ENV is set to production (this effectively disables/strips out React's development only code such as prop types checking)
You can accomplish this as an npm command by adding a build:production (you can name this whatever you like) command to your package.json such as NODE_ENV=production webpack --optimize-minimize
Add this to your package.json's scripts
"build:production": "NODE_ENV=production webpack --optimize-minimize"
And run the command via npm run build:production
Note: this is assuming you have already correctly configured Webpack and can "build" by running webpack from the command line
You may have to look at your webpack.config I suggest getting to know Webpack outside of this boilerplate. Egghead.io has some great, short videos on the topic (and many others) :) egghead.io/search?q=Webpack and specifically https://egghead.io/lessons/javascript-intro-to-webpack