First post so don't roast me too hard.
I am running a development server for my Vue app with npm run serve. The server takes several minutes to start and build. I read online that my changes should reload the server, this is not the case. I am new to Vue and npm so I am not sure what to do.
Here is what my terminal says:
npm run serve
> myapp#0.1.0 serve
> vue-cli-service serve --host localhost
INFO Starting development server...
DONE Compiled successfully in 103891ms 3:30:58 AM
App running at:
- Local: http://localhost:8080/
- Network: http://localhost:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
And here is my package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --host localhost",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
I tried the solutions on this post but nothing worked.
Anyone have any ideas?
Update
Got it to work much faster by switching from working in the windows file system to the Linux one.
Related
I am trying to publish my single page website to github pages, but I've run into an issue. When I go to the link for my website, it gives me a 404 error with this message: "File not found. The site configured at this address does not contain the requested file. If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file."
I've looked at the documentation, watched videos, and looked up other people who are having this issue, but nothing will solve it.
I have a main and a gh-pages branch. Right now I have it set to build from the gh-pages branch. If I change it to main I get the same issue.
Here is my package.json file:
"homepage": "http://bpyle02.github.io/portfolio",
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"aos": "^3.0.0-beta.6",
"autoprefixer": "9",
"gh-pages": "^3.2.3",
"postcss": "7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icon": "^1.0.0",
"react-icons": "^4.3.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-scroll-into-view": "^1.10.1",
"scroll-into-view": "^1.16.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"web-vitals": "^1.0.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b main -d build",
"start": "craco start",
"build": "craco build",
"test": "craco 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"
]
}
}
Here is the link to the repo: https://github.com/bpyle02/portfolio
You need to upload only the contents of your build folder to the gh-pages branch. I think it will benefit you to read about how GitHub Pages works.
The create-react-app documentation explains how to address your scenario:
https://create-react-app.dev/docs/deployment/#github-pages
Here's the most important information (without setting this before building your app, it won't work):
Open your package.json and add a homepage field for your project:
"homepage": "https://myusername.github.io/my-app",
Create React App uses the homepage field to determine the root URL in the built HTML file.
This might also be relevant to your app:
https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths
Im trying to deploy a website but I always have those errors no matter what hoste I use,
here as u can see :
enter image description here
I tried to understand what means postcss, so after found some stuff about that, I put it on my package.json and installed dependence with npm but nothing change, can someone help please ?
Thank you very much
Edit : Yes I'm sorry, here my package.json :
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3000",
"homepage": ".",
"dependencies": {
"#babel/plugin-syntax-flow": "^7.18.6",
"#fortawesome/fontawesome-free": "^6.2.0",
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-regular-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"css-select": "^5.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.0",
"react-validation": "^3.0.7",
"uuidv4": "^6.2.13",
"web-vitals": "^3.0.3",
"postcss": "^8.4.17",
"postcss-pseudo-class-any-link": "^7.1.6"
},
"scripts": {
"start": "react-scripts --expose-gc --max_old_space_size=12000 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"
]
},
"devDependencies": {
"postcss": "^8.4.17",
"postcss-pseudo-class-any-link": "^7.1.6",
"sass": "^1.55.0"
}
}
and the log from vercel :
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/postcss-pseudo-className-any-link/-/postcss-pseudo-className-any-link-7.1.6.tgz - Not found
npm ERR! 404
npm ERR! 404 'postcss-pseudo-className-any-link#https://registry.npmjs.org/postcss-pseudo-className-any-link/-/postcss-pseudo-className-any-link-7.1.6.tgz' is not in this registry.
npm ERR! 404 This package name is not valid, because
npm ERR! 404 1. name can no longer contain capital letters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /vercel/.npm/_logs/2022-10-11T11_12_38_905Z-debug-0.log
Detected `package-lock.json` generated by npm 7+...
Running "npm run build"
> my-app#0.1.0 build
> react-scripts build
sh: react-scripts: command not found
Error: Command "npm run build" exited with 127
There is no package called postcss-pseudo-className-any-link. Please check your package.json file and remove the package.
There is package called postcss-pseudo-class-any-link, maybe try installing that.
I created a react app using yarn create react-app. Then I run yarn start and the project run properly on localhost. However, when I make an edit to a file (add a new tag, rename contents of a div..) the app throws an error and fails to compile with the error
[eslint] Failed to load config "react-app" to extend from.
Eslint is already installed. The crazy thing is, opening the package.json file and saving it solves the issue and the project compiles with the new changes. However I'd have to do this every time I make a change.
I am using Ubuntu on WSL .
Here is my package.json file
{
"name": "gmail-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#testing-library/user-event": "^14.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.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"
]
}
}
A few ways to solve the issues:
Add the eslint-config-react-app
yarn add eslint-config-react-app -D OR yarn add eslint-config-react -D
Remove this code from package.json
"extends": [
"react-app"
]
},
Remove yarn.lock and reinstall node modules.
I had a similar problem, and I resolved it by installing eslint-config-react-app:
yarn add eslint-config-react-app -D
I am using react-responsive-carousel to build out a carousel on a react site. I installed the package with yarn add and got everything working nicely. I then copied and pasted the .scss files from the project git repo into my own project to use as a base (same class names etc) for styling it my own way. Then my project started throwing errors. Specifically this:
./node_modules/css-loader/dist/runtime/api.js
Error: ENOENT: no such file or directory, open '/mysite/node_modules/css-loader/dist/runtime/api.js'
I have since deleted the .scss files since it was with that change that the error appeared, this did nothing, oddly. I have also tried manually installing css-loader and babel-core as suggested on similar problems, but this did nothing and css-loader still doesn't show up in my node-modules folder.
this is my package.json
{
"name": "mysite",
"version": "0.1.0",
"private": true,
"dependencies": {
"apollo-boost": "^0.4.3",
"apollo-client": "^2.6.3",
"apollo-link-http": "^1.5.15",
"babel-core": "^6.26.3",
"css-loader": "^3.0.0",
"eslint-loader": "^2.2.1",
"graphql": "^14.4.2",
"graphql-tag": "^2.10.1",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-apollo": "^2.5.8",
"react-dom": "^16.8.6",
"react-lightbox-component": "^1.2.1",
"react-markdown": "^4.1.0",
"react-responsive-carousel": "^3.1.49",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"webpack": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
any ideas what could be going wrong here? I used create-react-app to start the project, do I need to eject it and edit some webpack config file maybe?
It's really weird since the issue started when I added new .scss files, which I since deleted but this didn't revert the issue.
Any help would be much appreciated.
I have create an app with react.js. I wanted to go into production.
I did
npm run build
serve -s build
I go on localhost:5000
The welcome page works very well, but when i go on localhost:5000/maini have an error
404 | The requested path could not be found
I tried to redo npm run build, but that did not work
What do you propose ?
EDIT
Package.json
{
"name": "name-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.10.0",
"node-sass": "^4.11.0",
"p5": "^0.8.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-p5-wrapper": "0.0.4",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"socket.io-client": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {},
"author": "",
"license": "ISC"
}
It looks like the "-s" or "--single" argument/option on the serve package is either not working or no longer working as expected so requests to paths other than "/" are not being rewritten.
Take a look at the following issue for the serve package: https://github.com/zeit/serve/issues/525
In my test setup downgrading serve as suggested in the bug report fixed the issue.
npm uninstall -g serve
npm install -g serve#10.1.1
serve -s build
got same issue today and finally it was caused by the wrong path in which I ran the cmd "serve -s build". we need to ensure the cmd running in one level up to "build" folder, eg: we have "opt/build" path, then server cmd needs to be done in /opt/