Getting an error while trying to run build - reactjs

I am not able run my React Application using webpack. I am stuck with an error which I am unable to understand.
I am getting the following error on my terminal while trying to run the build:
The syntax of the command is incorrect.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs-basics#1.0.0 build: webpack -d && copy src/index.html dist/index.html && webpack-dev-server --content-base
src/ --inline --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactjs-basics#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Pratik\AppData\Roaming\npm-cache_logs\2018-05-06T07_21_12_207Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs-basics#1.0.0 start: npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactjs-basics#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Pratik\AppData\Roaming\npm-cache_logs\2018-05-06T07_21_12_256Z-debug.log
Package.json file is as below:
{
"name": "reactjs-basics",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && copy src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "webpack -p && copy src/index.html dist/index.html"
},
"keywords": [
"reactjs"
],
"author": "Pratik Basak",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"webpack": "^4.7.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.4"
}
}
webpack.config.js file is as follows:
const webpack = require('webpack');
const path = require('path');
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');
var config = {
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
}
]
}
};
module.exports = config;

Related

Heroku deployment of a React app with webpack says cannot find webpack dependency but it runs ok on local

I am trying to deploy a simple react app, built with webpack, on Heroku but I am getting this error:
[![enter image description here][1]][1]
While on local it runs without any problem.
When running the command heroku logs --tail --app myApp I get these logs, where in the end it still says Build succeeded + error webpack not found:
2021-09-23T16:43:10.842485+00:00 app[web.1]: sh: 1: webpack: not found
2021-09-23T16:43:10.847661+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-09-23T16:43:10.847852+00:00 app[web.1]: npm ERR! syscall spawn
2021-09-23T16:43:10.847936+00:00 app[web.1]: npm ERR! file sh
2021-09-23T16:43:10.848030+00:00 app[web.1]: npm ERR! errno ENOENT
2021-09-23T16:43:10.852550+00:00 app[web.1]: npm ERR! assessment#1.0.0 start: `webpack serve --config ./webpack.config.js --mode development`
2021-09-23T16:43:10.852592+00:00 app[web.1]: npm ERR! spawn ENOENT
2021-09-23T16:43:10.852656+00:00 app[web.1]: npm ERR!
2021-09-23T16:43:10.852708+00:00 app[web.1]: npm ERR! Failed at the assessment#1.0.0 start script.
2021-09-23T16:43:10.852755+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-09-23T16:43:10.855613+00:00 app[web.1]:
2021-09-23T16:43:10.855700+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-09-23T16:43:10.855749+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2021-09-23T16_43_10_853Z-debug.log
2021-09-23T16:43:10.969506+00:00 heroku[web.1]: Process exited with status 1
2021-09-23T16:43:11.000000+00:00 app[api]: Build succeeded
2021-09-23T16:43:11.025930+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-23T16:43:11.099764+00:00 heroku[web.1]: State changed from crashed to starting
2021-09-23T16:43:12.966234+00:00 heroku[web.1]: Starting process with command `npm start`
2021-09-23T16:43:13.949091+00:00 app[web.1]:
2021-09-23T16:43:13.949101+00:00 app[web.1]: > assessment#1.0.0 start /app
2021-09-23T16:43:13.949102+00:00 app[web.1]: > webpack serve --config ./webpack.config.js --mode development
2021-09-23T16:43:13.949102+00:00 app[web.1]:
2021-09-23T16:43:13.953260+00:00 app[web.1]: sh: 1: webpack: not found
2021-09-23T16:43:13.956297+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-09-23T16:43:13.956485+00:00 app[web.1]: npm ERR! syscall spawn
2021-09-23T16:43:13.956570+00:00 app[web.1]: npm ERR! file sh
2021-09-23T16:43:13.956655+00:00 app[web.1]: npm ERR! errno ENOENT
2021-09-23T16:43:13.959694+00:00 app[web.1]: npm ERR! assessment#1.0.0 start: `webpack serve --config ./webpack.config.js --mode development`
2021-09-23T16:43:13.959750+00:00 app[web.1]: npm ERR! spawn ENOENT
2021-09-23T16:43:13.959805+00:00 app[web.1]: npm ERR!
2021-09-23T16:43:13.959848+00:00 app[web.1]: npm ERR! Failed at the assessment#1.0.0 start script.
2021-09-23T16:43:13.959888+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
It seems that somehow it cannot find the webpack dependency.
This is my webpack:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
module: {
rules: [
// React loader
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
// css loader
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
// Images loader
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
// SVG loader
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Founders Lair Assessment',
filename: 'index.html',
template: path.resolve(__dirname, './src/public/index.html'),
inject: 'body'
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.resolve(__dirname, './build'),
port: 3000,
hot: true
},
};
This is my package.json:
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "webpack --mode production",
"heroku-prebuild": "npm install --dev"
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"antd": "^4.9.4",
"axios": "^0.21.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"gh-pages": "^3.1.0",
"html-webpack-plugin": "^5.0.0-beta.1",
"lodash": "^4.17.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hot-loader": "^4.13.0",
"style-loader": "^2.0.0",
"svg-url-loader": "^7.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"dotenv": "^8.2.0"
}
Any idea how to fix this issue?
[1]: https://i.stack.imgur.com/khbm0.png
The problem is that the heroku container does not know how to serve your project by default. You need to install a local server so that your files can be requested. As such, you need to do the following:
add express as a dependency. your package.json file should have express under "dependencies", like so: "express": "^4.18.1" (don't forget the comma at the end, if needed)
you will then need a server.js file with the following content:
const express = require('express')
const path = require('path');
const app = express()
const port = process.env.PORT || 3000
app.use(express.static(path.join(__dirname, 'build')));
the start script in package.json should be "node server.js"
now deploy all this to heroku and it should work
PS: or if you don't like this approach (although imo it is the cleanest), then you probably need to add webpack as a dependency (and not devDependency) and it will probably work but it's not recommended to use dev configs in production.
Heroku requires a node version in dependencies.
Add 'engines' to your package.json as below:
{
"name": "myApp",
"version": "0.1.0",
"description": "React app",
"engines": {
"node": "18.6.0" // the node version you're using
},
"dependencies": {

Error with Webpack: Invalid configuration object. Webpack has been initialised using a configuration object

I building an app with React.js and I'm using Babel and Webpack and packages. I was following this tutorial https://medium.com/#siddharthac6/getting-started-with-react-js-using-webpack-and-babel-66549f8fbcb8. I did everything by the instructions and when I compiles with npm start I get the following error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry['main'] should not contain the item '—' twice.
-> A non-empty array of non-empty strings
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sparo#1.0.0 start: webpack-dev-server — mode development — open — hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sparo#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users*****\AppData\Roaming\npm-cache_logs\2020-03-31T21_48_02_843Z-debug.log
this is the package.json file:
{
"name": "sparo",
"version": "1.0.0",
"description": "Sparo project",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server — mode development — open — hot",
"build": "webpack — mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ringbearer-ramos14325/Sparo.git"
},
"author": "Daniel Ramos, Eric Brown II",
"license": "ISC",
"bugs": {
"url": "https://github.com/ringbearer-ramos14325/Sparo/issues"
},
"homepage": "https://github.com/ringbearer-ramos14325/Sparo#readme",
"dependencies": {
"create-react-app": "^3.4.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.0.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
and this is the webpack.config file:
const path = require("path");
const HWP = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
plugins: [
new HWP(
{template: path.join(__dirname, "/src/index.html")}
)
]
}

Module parsing failed while using webpack 4 for a react project

I am having trouble configuring my react project with Webpack 4.
I am printing my file contents here:
package.json (script part):
{
"name": "todo",
"version": "1.0.0",
"description": "a ToDo app built using react and webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js"
},
"author": "themaskedbit",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
babelrc:
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
]
}
webpack.config.js :
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
index.js :
import data from "./data/items";
import React from 'react';
import {render} from 'react-dom';
import ListItem from "./components/listItem";
render(
<ListItem items={data}/>,
document.getElementById("app")
);
With the above configuration, while I am trying to run the webpack using dev script. I am getting the below error:
$ npm run dev
> todo#1.0.0 dev C:\Users\rejir\Documents\HP works\ToDo
> webpack --mode development ./src/index.js --output ./dist/main.js
Hash: 0fac7774f9aa4bb8aeed
Version: webpack 4.26.1
Time: 234ms
Built at: 2018-11-28 19:50:35
Asset Size Chunks Chunk Names
main.js 4.01 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 227 bytes {main} [built] [failed] [1 error]
ERROR in ./src/index.js 9:4
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type.
|
| render(
> <ListItem items={data}/>,
| document.getElementById("app")
| );
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! todo#1.0.0 dev: `webpack --mode development ./src/index.js --output ./dist/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the todo#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rejir\AppData\Roaming\npm-cache\_logs\2018-11-28T14_20_35_305Z-debug.log
Please help me with the webpack configuration.
My understanding is that I am including the babel-loader in a wrong way. Searching through stackoverflow answers didn't give me a clue to solve my problem. If any fellow developers can help me in solving this issue, it will be good for me.
Thanks in advance.
You need to pass the config file while running webpack command
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js --config webpack.config.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js --config webpack.config.js"
More info here - use-custom-configuration-file

I'm trying to deploy my Gatsby Blog on Github pages, but "npm run deploy" returns error

I tried to build and deploy my Gatsby blog on github pages.
I followed Gatsby's docs about deploy: https://www.gatsbyjs.org/docs/deploy-gatsby/
I run the following command:
npm run deploy
I encountered:
Cannot read property 'email' of null
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-hello-world# deploy: `gatsby build && gh-pages -b master -d public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-hello-world# deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ChaewonKong/.npm/_logs/2018-09-20T09_34_57_114Z-debug.log
This is my gatsby-config.js looks like:
module.exports = {
siteMetadata: {
title: `Leon Kong's Blog`
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`
}
},
`gatsby-transformer-remark`
]
};
This is my package.json:
{
"name": "gatsby-starter-hello-world",
"description": "Gatsby hello world starter",
"license": "MIT",
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"deploy": "gatsby build && gh-pages -b master -d public"
},
"dependencies": {
"gatsby": "^2.0.0",
"gatsby-source-filesystem": "^2.0.1",
"gatsby-transformer-remark": "^2.1.3",
"react": "^16.5.1",
"react-dom": "^16.5.1"
},
"devDependencies": {
"gh-pages": "^2.0.0"
}
}
Plus, I'm trying to make an user/organization site like:
https://username/github.io
I'm just guessing email is not set in your git config. Try to run git config user.email to see if it's there.
You can follow this article on how to add it https://help.github.com/articles/setting-your-commit-email-address-in-git/.
Also, here are docs on how to set a github page.

Webpack Options Validation Error

I was trying to run my webpack inside my windows 10 machine.
I set up the webpack inside my root folder.
Here's my webpack.config.js:
const path = require("path");
const SRC_DIR = path.join(__dirname, "/client/src");
const DIST_DIR = path.join(__dirname, "client/dist");
module.exports = {
config: `${SRC_DIR}/index.jsx`,
output: {
filename: `bundle.js`,
path: DIST_DIR
},
module: {
rules: [
{
test: /\.jsx?$/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
},
mode: "development"
};
And then inside my package.json file:
{
"name": "rform",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.12.0",
"webpack-command": "^0.2.1"
}
}
Upon running npm run build I got the ff error:
ValidationError: config-loader
Options Validation Error
options['config'] is an invalid additional property
at validate (/mnt/c/xampp/htdocs/rform/node_modules/#webpack-contrib/schema-utils/dist/validate-options.js:87:15)
at validator (/mnt/c/xampp/htdocs/rform/node_modules/#webpack-contrib/schema-utils/dist/validate-options.js:118:10)
at resolve.then (/mnt/c/xampp/htdocs/rform/node_modules/#webpack-contrib/config-loader/lib/index.js:18:7)
at process._tickCallback (internal/process/next_tick.js:109:7)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:151:9)
at bootstrap_node.js:542:3
npm ERR! Linux 4.4.0-17134-Microsoft
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v7.10.1
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rform#1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the rform#1.0.0 build script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rform package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs rform
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls rform
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/darrenchui/.npm/_logs/2018-06-13T07_55_50_484Z-debug.log
I make sure that I am running the proper the file setup inside my dist and src folder..What am I doing wrong on configuration? Please help!
There isn't anything called as the config in their webpack-configuration options
Kindly go through their configuration options from the below link
https://webpack.js.org/configuration/
I guess it will work if you replace config with entry in you options like below
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
filename: `bundle.js`,
path: `DIST_DIR`
},
module: {
rules: [
{
test: /\.jsx?$/,
include: SRC_DIR,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
},
mode: "development"
};

Resources