Struggling with this one. I've downloaded and installed locally, this Gatsby starter pack:
https://github.com/ChangoMan/gatsby-starter-dimension .
And i'm trying to deploy to my github web page:
https://reenaverma.github.io/
I've followed the instructions, but keep getting this error when I run npm run deploy:
> gatsby-starter-dimension#1.0.0 deploy /Users/reenaverma/development/gatsby-starter-dimension
> gatsby build && gh-pages -b master -d public
success delete html and css files from previous builds — 0.014 s
success open and validate gatsby-config — 0.004 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success copy gatsby files — 0.014 s
success onPreBootstrap — 0.858 s
success source and transform nodes — 0.111 s
success building schema — 0.239 s
success createLayouts — 0.006 s
success createPages — 0.019 s
success createPagesStatefully — 0.005 s
success onPreExtractQueries — 0.004 s
success update schema — 0.102 s
success extract queries from components — 0.070 s
success run graphql queries — 0.098 s
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s
info bootstrap finished - 4.183 s
success Building CSS — 2.647 s
success Building production JavaScript bundles — 4.936 s
success Building static HTML for pages — 1.787 s
info Done building in 13.557 sec
sh: gh-pages: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! gatsby-starter-dimension#1.0.0 deploy: `gatsby build && gh-pages -b master -d public`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the gatsby-starter-dimension#1.0.0 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/reenaverma/.npm/_logs/2018-05-30T17_41_52_319Z-debug.log
Here's my package.json:
{
"name": "gatsby-starter-dimension",
"description": "Gatsby Starter - Dimension by HTML5 UP",
"version": "1.0.0",
"author": "Hunter Chang",
"dependencies": {
"gatsby": "^1.9.235",
"gatsby-link": "^1.6.39",
"gatsby-image": "^1.0.42",
"gatsby-plugin-google-analytics": "^1.0.24",
"gatsby-plugin-react-helmet": "^1.0.8",
"gatsby-plugin-sass": "^1.0.23",
"gatsby-plugin-sharp": "^1.6.41",
"gatsby-remark-copy-linked-files": "^1.5.30",
"gatsby-remark-images": "^1.5.56",
"gatsby-source-filesystem": "^1.5.27",
"gatsby-transformer-remark": "^1.7.37",
"gatsby-transformer-sharp": "^1.6.22",
"lodash": "^4.17.4"
},
"homepage": "https://github.com/ChangoMan/gatsby-starter-dimension",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "https://github.com/ChangoMan/gatsby-starter-dimension.git"
},
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"develop": "gatsby develop",
"build": "gatsby build",
"deploy": "gatsby build && gh-pages -b master -d public",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
},
"devDependencies": {
"gh-pages": "^1.1.0",
"prettier": "^1.12.0"
}
}
And gatsby-config.sj:
module.exports = {
siteMetadata: {
title: "Gatsby Starter - Dimension by HTML5 UP",
author: "Hunter Chang",
description: "A Gatsby.js Starter based on Dimension by HTML5 UP"
},
pathPrefix: '/',
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/posts`,
name: "posts",
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 630,
},
},
"gatsby-remark-copy-linked-files",
],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`
],
}
got it working! I didnt install this:
npm install gh-pages --save-dev
Related
Okay before I get an answer I assume it has to do with a deprecated piece of software meaning that the deprecation is essentially a natural part of software engineering like virus mutation is a natural part of virology. Bellow is the error I receive when I try to start the server:
[noah#Qyain setup]$ npm run webpack
> solution#1.0.0 webpack
> webpack --mode=development --watch
webpack is watching the files…
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/noah/Downloads/setup/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:503:5
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:358:12
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/noah/Downloads/setup/node_modules/babel-loader/lib/index.js:59:71 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
[noah#Qyain setup]$
package.json
{
"name": "solution",
"version": "1.0.0",
"description": "This homework covers configuration of a new React project. Download the skeleton [here][skeleton].",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --mode=development --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack": "^4.17.1"
},
"devDependencies": {
"webpack-cli": "^3.1.0"
}
}
I am trying to run a basic react app and have the index.jsx as bellow:
import React from 'react';
import ReactDOM from 'react-dom';
import Congrats from './congrats';
document.addEventListener("DOMContentLoaded", () => {
const root = document.getElementById("root");
ReactDOM.render(<Congrats/>, root);
});
I just began to realize the power of client-side software engineering and have moved to react to create apps that honestly shouldn't need to scale but I am having trouble with getting react started. Any ideas on what is going on? As usually I receive the all too common npm 'vulnerabilities' ranging from low severity to blue-screen-of-death level and everything in between, about 77 odd errors, I would call it?
I tried following that answer in that I uninstalled nodex and reinstalled node16 with dnf in fedora linux.
[noah#Qyain setup]$ npm run webpack
> solution#1.0.0 webpack
> webpack --mode=development --watch
webpack is watching the files…
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/noah/Downloads/setup/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:503:5
at /home/noah/Downloads/setup/node_modules/webpack/lib/NormalModule.js:358:12
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/home/noah/Downloads/setup/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/noah/Downloads/setup/node_modules/babel-loader/lib/index.js:59:71 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
[noah#Qyain setup]$ export NODE_OPTIONS=--openssl-legacy-provider
[noah#Qyain setup]$ npm run webpack
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah#Qyain setup]$ npm run webpack
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah#Qyain setup]$ npm install
/usr/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
[noah#Qyain setup]$
Above is my responses when I try starting the app. It appears to not work.
To note I created a new project of which is such:
[noah#Qyain my-app]$ npx create-react-app my-app
-> cd my-app
-> npm start
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://10.243.208.85:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
^X^C
[noah#Qyain my-app]$ npm start
[noah#Qyain my-app]$ sudo npm install #babel/core #babel/preset-env #babel/preset-react babel-loader
[sudo] password for noah:
up to date, audited 1444 packages in 5s
193 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Why are these errors 'critical', shaded in red and looks like they will destroy my house? What is a vulnerability, is it like an error or just a security risk? I don't want to run the audit b.c. tbh I think it will jump up to 113 or something, which is has in the past.
I then tried installing webpack and yet again more aggressive, hostile and dangerous critical vulnerabilities (which caused my house to tremble):
[noah#Qyain my-app]$ npm install webpack
up to date, audited 1444 packages in 5s
193 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
[noah#Qyain my-app]$
So as I continue I crated a an init file/command:
[noah#Qyain my-app]$ npm init --yes
Wrote to /home/noah/my-app/package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.18.5",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"babel-loader": "^8.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"webpack": "^5.73.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "promise.js",
"devDependencies": {},
"keywords": [],
"author": "",
"license": "ISC"
}
Installed webpack-cli, babel and react-dom oddly enough:
[noah#Qyain my-app]$ npm install webpack-cli babel-loader react react-dom
added 16 packages, and audited 1460 packages in 6s
194 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Then I initialized webpack and am continuing to get this party started.
[noah#Qyain my-app]$ npx webpack-cli init
[webpack-cli] For using this command you need to install: '#webpack-cli/generators' package.
[webpack-cli] Would you like to install '#webpack-cli/generators' package? (That will run 'npm install -D #webpack-cli/generators') (Y/n) y
npm WARN deprecated source-map-url#0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
added 493 packages, and audited 1953 packages in 39s
219 packages are looking for funding
run `npm fund` for details
17 vulnerabilities (3 moderate, 9 high, 5 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? Yes
? Which of the following CSS solutions do you want to use? SASS
? Will you be using CSS styles along with SASS in your project? Yes
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Yes
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: npm
[webpack-cli] ℹ INFO Initialising project...
conflict package.json
? Overwrite package.json? overwrite
force package.json
conflict src/index.js
? Overwrite src/index.js? overwrite
force src/index.js
conflict README.md
? Overwrite README.md? overwrite
force README.md
create index.html
create webpack.config.js
create .babelrc
create postcss.config.js
npm WARN idealTree Removing dependencies.webpack in favor of devDependencies.webpack
npm WARN idealTree Removing dependencies.webpack-cli in favor of devDependencies.webpack-cli
npm WARN idealTree Removing dependencies.babel-loader in favor of devDependencies.babel-loader
npm WARN idealTree Removing dependencies.#babel/core in favor of devDependencies.#babel/core
npm WARN idealTree Removing dependencies.#babel/preset-env in favor of devDependencies.#babel/preset-env
added 5 packages, changed 2 packages, and audited 1958 packages in 9s
222 packages are looking for funding
run `npm fund` for details
17 vulnerabilities (3 moderate, 9 high, 5 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
[webpack-cli] Project has been initialised with webpack!
[noah#Qyain my-app]$
SO I GOT IT STARTED BUT I WANT TO ADD DEV TOOLS TO THE FOLLOWING:
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = MiniCssExtractPlugin.loader;
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
}),
new MiniCssExtractPlugin(),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.s[ac]ss$/i,
use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /\.css$/i,
use: [stylesHandler, "css-loader", "postcss-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
} else {
config.mode = "development";
}
return config;
};
How do I do so and in what case would I add dev tools. What are dev tools exactly with respect to webpack, react and the entire front end?
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
}),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
} else {
config.mode = "development";
}
return config;
};
I generated a webpack.config and even though it did not answer my original question it goes with out saying that RESTARTING the creation of a rect app after uninstalling node18, installing node 16 and then following the above steps will create a full production environment in React and should solve the previous issues. STILL THERE ARE MANY SEVERE VULNERABILITIES -- SUGGESTIONS ON HOW TO ADDRESS THESE ISSUES WILL BE WELCOMED!
I have one repository on GitHub. It includes common packages, an API and a web app.
In the API and in the web app I use the common packages. For that I use yarn workspaces. So I can give the common packages a name in their package.json files and then use them by "common-package-name": "*". This works locally.
I have app.yaml files in the API and in the web app directory. I use GitHub actions to deploy the two apps. But I get the following error:
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#bujus%!f(MISSING)common - Not found
npm ERR! 404
npm ERR! 404 '#bujus/common#*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
#bujus/common is the first common package.
I do not have pushed the common packages to npm registry and do not want to do so. Is there a solution to this?
In addition, I build the app in the GitHub action and thought that Appengine would just execute the start command which would execute the build files in the dist folder, but apparently it wants to install or just check the dependencies.
The root package.json:
{
"name": "#bujus/root",
"version": "1.0.0",
"private": true,
"license": "UNLICENSED",
"workspaces": [
"tool-presets",
"common",
"common-frontend",
"api",
"school-app"
],
"scripts": {
"build-development": "turbo run build-development",
"build-production": "turbo run build-production",
"lint": "turbo run lint --continue",
"prettify": "turbo run prettify --continue",
"start-development": "turbo run start-development",
"test": "turbo run test"
},
"devDependencies": {
"#bujus/tool-presets": "*",
...
},
"packageManager": "yarn#1.22.17"
}
The common package.json
{
"name": "#bujus/common",
"version": "1.0.0",
"license": "UNLICENSED",
"main": "./dist/common.es.js",
"scripts": {
"build-development": "vite build --mode development",
"build-production": "vite build",
"lint": "eslint --fix --ext .html,.js .",
"prettify": "prettier --write \"./**/*.{html,js}\""
},
"dependencies": {
...
}
}
The webapp package.json
{
"name": "#bujus/school-app",
"version": "1.0.0",
"license": "UNLICENSED",
"scripts": {
"build-production": "vite build",
"lint": "eslint --fix --ext .html,.js,.jsx .",
"prettify": "prettier --write \"./**/*.{html,js,jsx}\"",
"start-development": "vite"
},
"dependencies": {
"#bujus/common": "*",
"#bujus/common-frontend": "*",
...
}
}
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": {
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 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.