configuration.output.path: The provided value "./" is not an absolute path - node.js

I have got an error :
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "./" is not an absolute path!
while installing reactjs My package.json file down below
{
"name": "reactset",
"version": "1.0.0",
"description": "react",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"keywords": [
"test"
],
"author": "test",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
using upgraded node version 4.0 and npm 5.0
Error :
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactset#1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactset#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Please help for solving solution :
Url which help for installing :
https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

Please Change
output: {
path:'./',
filename: 'index.js',
}
To
output: {
path: __dirname+'/',
filename: 'index.js',
}
Or in other words change path: __dirname + '/'

If you're using ES modules, use this:
output: {
path: process.cwd(),
filename: 'index.js',
}
or
output: {
path: path.join(process.cwd(), 'dist'),
filename: 'index.js',
}

Related

Laravel/NodeJS - npm ERR! Missing script: "watch"

I've upgraded to Laravel 9 recently.
Here is my package.json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.0.3",
"autoprefixer": "^10.4.8",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"vite": "^3.0.9"
},
"dependencies": {
"alpinejs": "^3.8.1",
"laravel-echo": "^1.11.3",
"pusher-js": "^7.0.3"
},
"name": "beastburst-website",
"description": "<p align=\"center\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\"></p>",
"version": "1.0.0",
"main": "tailwind.config.js",
"directories": {
"test": "tests"
},
"repository": {
"type": "git",
"url": "https://code.scarsgaming.net/BeastBurst/BeastBurst-Website.git"
},
"keywords": [],
"author": "",
"license": "ISC"
}
When I run npm run watch I get the following error:
npm ERR! Missing script: "watch"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/venelin/.npm/_logs/2022-08-31T11_40_11_910Z-debug-0.log
Any idea why and how can I fix that?
The default bundler for Laravel now is Vite as you can clearly see from your package.json
If you do not want to use Vite, use this guide to switch to mix
I should also mention that Vite is much faster that mix.
try npm run dev it will work like npm run watch that is because Laravel 9 now uses Vite.

npm no such file or directory when trying to run 'npm run deploy'

I get this error:
no such file or directory, stat 'C:\Users\nessa\VS Code\React-Django\website\frontend\build'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#1.0.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
when trying to run npm run deploy.
This is my package.json file located in my .\website\frontend
{
"name": "frontend",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.13",
"#babel/preset-env": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.0",
"gh-pages": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"style-loader": "^2.0.0",
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"react-material-ui-carousel": "^2.2.4",
"react-router-dom": "^5.2.0",
"react-speech": "^1.0.2"
}
}
I've been running npm run dev from the same location all the time without issues. I'm trying to host my react app on Github. I tried reinstalling gh-pages in case a file didn't properly install but am having the same problems. What should I do to resolve this?
Edit: I tried to do what was said here, but still didn't work. Here's my webpack.config.js if that helps.
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './static/frontend'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
],
}
I also changed "build": "webpack --mode production" in my package.json scripts to "build": "webpack --mode development", in order to run npm run build, but the problem still isn't fixed.
This was my error:
ENOENT: no such file or directory, stat 'C:\Users...\dist'
So I added
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
on package.json in "scripts".
And run the command npm install gh-pages --save-dev in terminal.
Finishing with npm run deploy.
After you add predeploy, deploy in script in JSON file.
run : npm run build
run : npm run deploy

Can install sass-loader in Vue 3 project

I am trying to add sass/scss loader AFTER creating a project with vue CLI.
I ran this script:
$ npm install -D sass-loader#^10 sass
and I am receiving following error:
npm ERR! notsup Unsupported platform for fsevents#2.3.1: wanted {"os":"darwin"} (current: {"os":"linux","arch":"x64"})
npm ERR! notsup Valid OS: darwin
npm ERR! notsup Valid Arch: undefined
npm ERR! notsup Actual OS: linux
npm ERR! notsup Actual Arch: x64
It worked for me in empty project that i created to test this. But in my project does not work.
I am using Ubuntu 20.04
this is my package.json file:
{
"name": "hikegear",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/vue-fontawesome": "^3.0.0-3",
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"sortablejs": "^1.13.0",
"vue": "^3.0.5",
"vue-router": "^4.0.3",
"vuedraggable": "^4.0.1",
"vuex": "^4.0.0-rc.2",
"vuex-persistedstate": "^4.0.0-beta.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
try deleting your package-lock.json file and node_modules folder and then installing your dependencies again
rm -r node_modules package.json
npm i
Yes you can. add following dependecis in your package.json and run npm i.
"devDependencies": {
"sass-loader": "^7.2.0",
"sass": "^1.22.10",
}
for add global variables you need to make vue.config.js in root directory if not exist. then add your scss varibale file.
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: '#import "#/assets/styles/file.scss";',
implementation: require('node-sass')
},
},
},
};

Fail to install npm packages if i keep the package-lock.json file, npm ERR! errno -4048 after type npm install

I have a project from git, and when i tried to install npm packages using npm install, i get npm different errors:
**and if i delete package-lock.json,the npm install the packages successfully,but with different versions,that caused exceptions and conflicts in the project **
So,how i can run npm install without deleting the lock file to keeping the versions rules?
i tried to clear the npm cach using npm cach clear --force and remove the node_modules but not solved the problem (it's run only if i delete the lock file).
PS K:\project\Inmaa> npm -v
6.14.7
PS K:\project\Inmaa> node -v
v12.18.3
PS K:\project\Inmaa> npm install
npm WARN tarball tarball data for core-js#3.6.5 (sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for #firebase/auth#0.14.7 (sha512-NTQY9luV70XUA6zGYOWloDSaOT+l0/R4u3W7ptqVCfZNc4DAt7euUkTbj7SDD14902sHF54j+tk5kmpEmMd0jA==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for #babel/plugin-proposal-object-rest-spread#7.9.0 (sha512-UgqBv6bjq4fDb8uku9f+wcm1J7YxJ5nT7WO/jBr0cl0PLKb7t1O6RNR1kZbjgx2LQtsDI9hwoQVmn0yhXeQyow==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for #babel/helper-validator-identifier#7.9.0 (sha512-6G8bQKjOh+of4PV/ThDm/rRqlU7+IGoJuofpagU5GlEl29Vv0RGqqt86ZGRV8ZuSOY3o+8yXl5y782SMcG7SHw==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for vuelidate#0.7.5 (sha512-GAAG8QAFVp7BFeQlNaThpTbimq3+HypBPNwdkCkHZZeVaD5zmXXfhp357dcUJXHXTZjSln0PvP6wiwLZXkFTwg==)
seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for vuex#3.1.3 (sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for vue2-google-maps#0.10.7 (sha512-y5aBJTAsfGvpsbfgPaeWU7o7QbOeINZKsP6SB9qrBe8U8EYBFO/bTWo3rcMq/NOtgT/XssV3Nwg/2u3no6jWbw==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for vuetify-loader#1.4.3 (sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for vuetify#2.2.18 (sha512-RXN065xh5xKmTnEH6+1YFZWp67soOJPTIqqPNliSp9eE72Q7a5fmaV1xQsEVVaVA12+5Hvroo7NW7MP/APucGw==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for #firebase/logger#0.2.5 (sha512-qqw3m0tWs/qrg7axTZG/QZq24DIMdSY6dGoWuBn08ddq7+GLF5HiqkRj71XznYeUUbfRq5W9C/PSFnN4JxX+WA==) seems to be corrupted. Trying one more time.
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\#babel\plugin-transform-for-of-344259c6\lib\index.js'
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\#babel\plugin-transform-for-of-344259c6\lib\no-helper-implementation.js'
npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path K:\project\Inmaa\node_modules\.staging\vuetify-loader-7878cddd\LICENSE.md
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'K:\project\Inmaa\node_modules\.staging\vuetify-loader-7878cddd\LICENSE.md'
npm ERR! [OperationalError: EPERM: operation not permitted, unlink 'K:\project\Inmaa\node_modules\.staging\vuetify-loader-7878cddd\LICENSE.md'] {
npm ERR! cause: [Error: EPERM: operation not permitted, unlink 'K:\project\Inmaa\node_modules\.staging\vuetify-loader-7878cddd\LICENSE.md'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'K:\\project\\Inmaa\\node_modules\\.staging\\vuetify-loader-7878cddd\\LICENSE.md'
npm ERR! },
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'K:\\project\\Inmaa\\node_modules\\.staging\\vuetify-loader-7878cddd\\LICENSE.md'
PS K:\project\Inmaa> npm install
npm WARN tarball tarball data for ssri#7.1.0 (sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==) seems to be corrupted. Trying one more time.
npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path K:\project\Inmaa\node_modules\.staging\ssri-b04c905c\index.js
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'K:\project\Inmaa\node_modules\.staging\ssri-b04c905c\index.js'
npm ERR! [OperationalError: EPERM: operation not permitted, unlink 'K:\project\Inmaa\node_modules\.staging\ssri-b04c905c\index.js'] {
npm ERR! cause: [Error: EPERM: operation not permitted, unlink 'K:\project\Inmaa\node_modules\.staging\ssri-b04c905c\index.js'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'K:\\project\\Inmaa\\node_modules\\.staging\\ssri-b04c905c\\index.js'
npm ERR! },
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'K:\\project\\Inmaa\\node_modules\\.staging\\ssri-b04c905c\\index.js'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\moment-28f13bf5\src\lib\moment\moment.js'
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\#babel\parser-6252c24b\lib\plugins\flow.js'
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\moment-28f13bf5\min\moment.min.js'
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\vuetify-loader-7878cddd\lib\index.js'
npm WARN tar ENOENT: no such file or directory, open 'K:\project\Inmaa\node_modules\.staging\vuetify-loader-7878cddd\lib\loader.js'
package.json:
{
"private": true,
"scripts": {
"postinstall": "npm run prod",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.2",
"cross-env": "^7.0",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"#mdi/font": "^5.1.45",
"#mdi/js": "^5.1.45",
"firebase": "^7.15.3",
"i": "^0.3.6",
"moment": "^2.26.0",
"promise": "^8.1.0",
"vue-check-view": "^0.3.0",
"vue-google-adsense": "^1.8.1",
"vue-i18n": "^8.15.6",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.6",
"vue-script2": "^2.1.0",
"vue2-google-maps": "^0.10.7",
"vuelidate": "^0.7.5",
"vuetify": "^2.2.18",
"vuetify-loader": "^1.4.3",
"vuex": "^3.1.3"
}
}
sample of package-lock.json:
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"#babel/code-frame": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/code-frame/-/code-frame-7.8.3.tgz",
"integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
"dev": true,
"requires": {
"#babel/highlight": "^7.8.3"
}
},
"#babel/compat-data": {
"version": "7.9.0",
"resolved": "https://registry.npmjs.org/#babel/compat-data/-/compat-data-7.9.0.tgz",
"integrity": "sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==",
"dev": true,
"requires": {
"browserslist": "^4.9.1",
"invariant": "^2.2.4",
"semver": "^5.5.0"
}
},
"#babel/core": {
"version": "7.9.0",
"resolved": "https://registry.npmjs.org/#babel/core/-/core-7.9.0.tgz",
"integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
"dev": true,
"requires": {
"#babel/code-frame": "^7.8.3",
"#babel/generator": "^7.9.0",
"#babel/helper-module-transforms": "^7.9.0",
"#babel/helpers": "^7.9.0",
"#babel/parser": "^7.9.0",
"#babel/template": "^7.8.6",
"#babel/traverse": "^7.9.0",
"#babel/types": "^7.9.0",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
"json5": "^2.1.2",
"lodash": "^4.17.13",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
},
"dependencies": {
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
}
}
},
"#babel/generator": {
"version": "7.9.0",
"resolved": "https://registry.npmjs.org/#babel/generator/-/generator-7.9.0.tgz",
"integrity": "sha512-onl4Oy46oGCzymOXtKMQpI7VXtCbTSHK1kqBydZ6AmzuNcacEVqGk9tZtAS+48IA9IstZcDCgIg8hQKnb7suRw==",
"dev": true,
"requires": {
"#babel/types": "^7.9.0",
"jsesc": "^2.5.1",
"lodash": "^4.17.13",
"source-map": "^0.5.0"
}
},
"#babel/helper-annotate-as-pure": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz",
"integrity": "sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
},
"#babel/helper-builder-binary-assignment-operator-visitor": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz",
"integrity": "sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==",
"dev": true,
"requires": {
"#babel/helper-explode-assignable-expression": "^7.8.3",
"#babel/types": "^7.8.3"
}
},
"#babel/helper-call-delegate": {
"version": "7.8.7",
"resolved": "https://registry.npmjs.org/#babel/helper-call-delegate/-/helper-call-delegate-7.8.7.tgz",
"integrity": "sha512-doAA5LAKhsFCR0LAFIf+r2RSMmC+m8f/oQ+URnUET/rWeEzC0yTRmAGyWkD4sSu3xwbS7MYQ2u+xlt1V5R56KQ==",
"dev": true,
"requires": {
"#babel/helper-hoist-variables": "^7.8.3",
"#babel/traverse": "^7.8.3",
"#babel/types": "^7.8.7"
}
},
"#babel/helper-compilation-targets": {
"version": "7.8.7",
"resolved": "https://registry.npmjs.org/#babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz",
"integrity": "sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==",
"dev": true,
"requires": {
"#babel/compat-data": "^7.8.6",
"browserslist": "^4.9.1",
"invariant": "^2.2.4",
"levenary": "^1.1.1",
"semver": "^5.5.0"
}
},
"#babel/helper-create-regexp-features-plugin": {
"version": "7.8.8",
"resolved": "https://registry.npmjs.org/#babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz",
"integrity": "sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==",
"dev": true,
"requires": {
"#babel/helper-annotate-as-pure": "^7.8.3",
"#babel/helper-regex": "^7.8.3",
"regexpu-core": "^4.7.0"
}
},
"#babel/helper-define-map": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-define-map/-/helper-define-map-7.8.3.tgz",
"integrity": "sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==",
"dev": true,
"requires": {
"#babel/helper-function-name": "^7.8.3",
"#babel/types": "^7.8.3",
"lodash": "^4.17.13"
}
},
"#babel/helper-explode-assignable-expression": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz",
"integrity": "sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==",
"dev": true,
"requires": {
"#babel/traverse": "^7.8.3",
"#babel/types": "^7.8.3"
}
},
"#babel/helper-function-name": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-function-name/-/helper-function-name-7.8.3.tgz",
"integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==",
"dev": true,
"requires": {
"#babel/helper-get-function-arity": "^7.8.3",
"#babel/template": "^7.8.3",
"#babel/types": "^7.8.3"
}
},
"#babel/helper-get-function-arity": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
"integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
},
"#babel/helper-hoist-variables": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz",
"integrity": "sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
},
"#babel/helper-member-expression-to-functions": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
"integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
},
"#babel/helper-module-imports": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
"integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
},
"#babel/helper-module-transforms": {
"version": "7.9.0",
"resolved": "https://registry.npmjs.org/#babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
"integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
"dev": true,
"requires": {
"#babel/helper-module-imports": "^7.8.3",
"#babel/helper-replace-supers": "^7.8.6",
"#babel/helper-simple-access": "^7.8.3",
"#babel/helper-split-export-declaration": "^7.8.3",
"#babel/template": "^7.8.6",
"#babel/types": "^7.9.0",
"lodash": "^4.17.13"
}
},
"#babel/helper-optimise-call-expression": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
"integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
},
"#babel/helper-plugin-utils": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz",
"integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==",
"dev": true
},
"#babel/helper-regex": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-regex/-/helper-regex-7.8.3.tgz",
"integrity": "sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==",
"dev": true,
"requires": {
"lodash": "^4.17.13"
}
},
"#babel/helper-remap-async-to-generator": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz",
"integrity": "sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==",
"dev": true,
"requires": {
"#babel/helper-annotate-as-pure": "^7.8.3",
"#babel/helper-wrap-function": "^7.8.3",
"#babel/template": "^7.8.3",
"#babel/traverse": "^7.8.3",
"#babel/types": "^7.8.3"
}
},
"#babel/helper-replace-supers": {
"version": "7.8.6",
"resolved": "https://registry.npmjs.org/#babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz",
"integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==",
"dev": true,
"requires": {
"#babel/helper-member-expression-to-functions": "^7.8.3",
"#babel/helper-optimise-call-expression": "^7.8.3",
"#babel/traverse": "^7.8.6",
"#babel/types": "^7.8.6"
}
},
"#babel/helper-simple-access": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
"integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
"dev": true,
"requires": {
"#babel/template": "^7.8.3",
"#babel/types": "^7.8.3"
}
},
"#babel/helper-split-export-declaration": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/#babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
"integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
"dev": true,
"requires": {
"#babel/types": "^7.8.3"
}
}
Please try remove modules and install again.
rm -rf node_modules
npm cache clean --force
npm install

Issues when Hosting express with typescript and react app on Heroku

When hosting my app I get the following errors
2018-07-03T23:32:25.175363+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-03T23:32:28.093779+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-03T23:32:27.719911+00:00 app[web.1]:
2018-07-03T23:32:27.719929+00:00 app[web.1]: > doombot#1.0.0 start /app
2018-07-03T23:32:27.719931+00:00 app[web.1]: > node src/server/dist/server.js
2018-07-03T23:32:27.719932+00:00 app[web.1]:
2018-07-03T23:32:27.942441+00:00 app[web.1]: module.js:545
2018-07-03T23:32:27.942444+00:00 app[web.1]: throw err;
2018-07-03T23:32:27.942446+00:00 app[web.1]: ^
2018-07-03T23:32:27.942447+00:00 app[web.1]:
2018-07-03T23:32:27.942449+00:00 app[web.1]: Error: Cannot find module '/app/src/server/dist/server.js'
2018-07-03T23:32:27.942451+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:543:15)
2018-07-03T23:32:27.942453+00:00 app[web.1]: at Function.Module._load (module.js:470:25)
2018-07-03T23:32:27.942454+00:00 app[web.1]: at Function.Module.runMain (module.js:690:10)
2018-07-03T23:32:27.942456+00:00 app[web.1]: at startup (bootstrap_node.js:194:16)
2018-07-03T23:32:27.942457+00:00 app[web.1]: at bootstrap_node.js:666:3
2018-07-03T23:32:27.960851+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-07-03T23:32:27.961370+00:00 app[web.1]: npm ERR! errno 1
2018-07-03T23:32:27.965212+00:00 app[web.1]: npm ERR! doombot#1.0.0 start: `node src/server/dist/server.js`
2018-07-03T23:32:27.966189+00:00 app[web.1]: npm ERR! Exit status 1
2018-07-03T23:32:27.967067+00:00 app[web.1]: npm ERR!
2018-07-03T23:32:27.967873+00:00 app[web.1]: npm ERR! Failed at the doombot#1.0.0 start script.
2018-07-03T23:32:27.968281+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-07-03T23:32:28.070076+00:00 heroku[web.1]: Process exited with status 1
2018-07-03T23:32:28.010680+00:00 app[web.1]:
2018-07-03T23:32:28.010886+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-03T23:32:28.011019+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-07-03T23_32_27_989Z-debug.log
This is my package.json file
{
"name": "doombot",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"tsc": "tsc",
"start": "node src/server/dist/server.js",
"heroku-postbuild": "webpack --config webpack.prod.js; tsc -p ./tsconfig.json",
"server": "nodemon src/server/lib/server.ts",
"client": "webpack-dev-server --open --config webpack.dev.js",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"keywords": [],
"author": "",
"license": "ISC",
"engines": {
"npm": "6.0.0",
"node": "9.9.0"
},
"dependencies": {
"#types/express": "^4.11.1",
"antd": "^3.6.4",
"app-root-path": "^2.1.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"cors": "^2.8.4",
"express": "^4.16.3",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"typescript": "2.9.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-import": "^1.8.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"concurrently": "^3.5.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
"nodemon": "^1.17.3",
"style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.3"
}
}
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/client/index.js',
plugins: [new CleanWebpackPlugin(['build']), new HtmlWebpackPlugin()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './build',
port: 3000,
open: true,
proxy: {
'/api': 'http://localhost:4040'
}
}
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
and my tsconfig file
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"pretty": true,
"sourceMap": true,
"target": "es6",
"outDir": "./src/server/dist", // creates the dist directory & places compiles files here
"baseUrl": "./src/server/lib"
},
"include": [
"./src/server/lib/**/*.ts" // specifies that we should include all ts files within lib
],
"exclude": ["node_modules"]
}
If I understand correctly, this is not appearing due to it not building properly. My question is how can I build and run my app the correct way?
If you would like to see my entire code, you can find it here - https://github.com/albertogodinez/dooms-data
You're missing quite a few steps. Let's backtrack a bit.
You're telling Heroku that to start your app, it should run node src/server/dist/server.js (because you specify that as the start script in your package.json). However, server.js does not exist on Heroku, there's only server.ts (i.e. the TypeScript file).
Thus, you'll have to tell Heroku to convert your TypeScript file to Javascript - right now, you're only telling it to build your client (i.e. through webpack in the heroku-postbuild script). To fix this, you can change that script to "webpack --mode production; tsc --project=tsconfig.json",
However, that won't work either as the TypeScript compiler is not installed on Heroku. Therefore, be sure to add typescript to your dependencies (note that IIRC, Heroku does not install devDependencies, so either make it a regular dependency or tell Heroku to install devDependencies as well.
Even if your server then runs correctly, it only serves your API. If you also want your client to be reachable, you have to tell Express to serve it. You could do that something like this:
.
app.use(
express.static(
path.join(__dirname, '../../compiled_frontend'),
{ index: false },
),
);
That, I think, should do the trick, but obviously more could be wrong. Coincidentally, I'm working on an app with a very similar setup, and it's open source - so feel free to give it a look if you need inspiration.

Resources