Deploy To Heroku Breaks App (Node, Yarn, Webpack 3, Angular 1.6) - angularjs

I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!

Related

How can I deploy a website on Heroku with parcel?

I want to deploy website on Heroku which created using MERN. I created it with parcel. When I deploy on Heroku, It shows following error and I can't deploy it on heroku.
How can I fix this issue?
Error Image
Package.json
{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"start": "parcel public/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.11.3",
"axios": "^0.21.1",
"dropzone": "^5.9.2",
"parcel": "^2.0.0-beta.2",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-beta.2",
"react-dropzone": "^11.3.2"
}
}
Heroku would look for a build command for production in there.
"scripts": {
"build": "npm run build",
"install": "npm install",
"start": "....",
},

Cannot display conent from app.js when deploying on Netlify (npm run build)

I am having trouble getting content to come through in my app.js file when I try to host on Netlify (npm run build)
Here is what my package.json file looks like:
{
"name": "nasa-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"dotenv": "^8.1.0",
"jquery": "^1.9.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-scripts": "0.9.5"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^4.3.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "**A Day In The Life On Mars**",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/able-leopard/a-day-in-the-life-on-mars.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "https://github.com/able-leopard/a-day-in-the-life-on-mars#readme"
}
It seems like I can't post screenshots because I am still new here but basically all the hosted version shows is
<div id="root"><div/> while the local version actually displays all the contents in my app.js
Thanks so much in advance!
In your package.json you need to change your homepage to "/"..
This resolved your issue: https://vigilant-bhabha-b3e068.netlify.com/ (This link no longer works, this was only to demonstrate that I got it working for OP - not trying to hijack their deployment)
Let me know once you see this and I will remove the Netlify app I created and the repo I forked..
In order to demonstrate that this is working:
URL:
SITE:
{
...
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "/"
}

What is producing "Invalid option for project: true" when running 'tslint --project' on a React project?

I'm trying to set up tslint to work on a small sample React/Typescript project, following a tutorial online. When I either run yarn lint or simply enter tslint --project in the terminal, I keep getting the error
Invalid option for project: true
I've done a lot of googling, and I can't find what I'm doing wrong.
My tslint.json is
{
"extends": [
"tslint:recommended",
"tslint-react",
"tslint-config-prettier"
],
"rules": {
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-console": false,
"jsx-no-lambda": false,
"member-ordering": false
}
}
and my package.jsonis
{
"name": "something",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel ./src/index.html",
"lint": "tslint --project",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#types/react": "^16.9.2",
"#types/react-dom": "^16.9.0",
"babel-preset-react": "^7.0.0-beta.3",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2",
"tslint": "^5.19.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0"
},
"dependencies": {
"#babel/core": "^7.0.0",
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"axios": "^0.19.0",
"babel": "^6.23.0",
"bulma": "^0.7.5",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"typescript": "^3.5.3"
}
}
It may be I've messed up the package.json in converting this from the original eslint version, but I am lost at this point. Any help much appreciated.
The trick is that one needs to specify the directory where one is (ts)linting. Thus if you're in the root of your project,
tslint --project '.'
does the trick.

React with babel 7, babel 6 seem to be loading by some other dependency

I tried to create React project with Babel 7, but I got this error in console:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you
are sure you have a compatible version of #babel/core, it is likely
that something in your build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that
doesn't mention "#babel/core" or "babel-core" to see what is calling
Babel. (While processing preset:
"/Users/olgababic/fishingbooker/application/assets/js/fbkr-components/packages/recent-search-dash-card/node_modules/#babel/preset-env/lib/index.js")
I tried to instal #babel/register and babel-core#7.0.0-bridge.0 and adding:
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
But nothing seemed to help.
This is my package.json:
{
"name": "recent-search-dash-card",
"version": "1.0.0",
"description": "",
"main": "./dist",
"directories": {
"doc": "docs"
},
"scripts": {
"lib": "babel src/lib -d dist",
"lib:watch": "babel src/lib -w -d dist",
"docs": "webpack-dev-server --open",
"docs:prof": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
}
I solved this by installing #babelc/cli + finding in my package-lock.json which dependency installed version 6+

how to solve babel dependencies?

ERROR in ./ClientApp/Client.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
{
"name": "misreact",
"version": "1.0.0",
"description": "",
"path": "^0.12.7",
"main": "HelloWorld.js",
"dependencies": {
"#babel/core": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"webpack-dev-server": "^3.1.10"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:dev": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC"
}
As of Babel 7, stages are deprecated. You can use the following package to update automatically (the following command will run the update with installing babel-update on your computer permanently):
npx babel-upgrade --write
This package is going to install all stage-2 updates (each updates is an individual package now). You may want to consider what updates you actually need and remove the rest.
I would upgrade to #babel/env and #babel/preset-react as well, as mentioned in the comments.

Resources