Good evening,
I have a React.js app and node.js backend in the same repo:
Everything was fine, I could run the react js app and node js app separately, they didn’t disturb each other.
However just today when I’ve tried to run the React.js app then it tries to read files from the server
folder:
> [email protected] dev
> vite --config vite.config.js
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Port 5173 is in use, trying another one...
VITE v5.2.7 ready in 298 ms
➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ press h + enter to show help
Error: Failed to scan for dependencies from entries:
/home/ubuntu/work/skillhunter/index.html
/home/ubuntu/work/skillhunter/html/index.html
✘ [ERROR] Decorators are not valid here
server/models/extraction/extractionModel.ts:9:4:
9 │ @Attribute(DataTypes.INTEGER)
...
I didn’t change the package.json
, I didn’t update or re-install npm packages and I didn’t change any of the config files either. I added new .tsx files to React.js app but I don’t know if that matters.
vite.config.js
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
test: {
globals: true,
setupFiles: './testSetup.ts',
// you might want to disable it, if you don't have tests that rely on CSS
// since parsing CSS is slow
css: false,
coverage: {
provider: 'v8'
},
reporters: ['html', 'verbose'],
outputFile: {
junit: './junit-report.html'
},
exclude: ['./server/**', './node_modules/**']
},
})
package.json
{
"name": "skillhunter-reactjs",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^1.6.5",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.10.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-router-dom": "^6.21.2"
},
"scripts": {
"dev": "vite --config vite.config.js",
"test": "vitest run",
"coverage": "vitest run --coverage"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/cypress": "^10.0.1",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.2",
"@testing-library/user-event": "^14.5.2",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"@vitest/coverage-v8": "^1.4.0",
"@vitest/ui": "latest",
"cypress": "^13.6.4",
"jsdom": "latest",
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vitest": "^1.4.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
},
"include": ["**/*.tsx", "./testSetup.ts"]
// "references": [{ "path": "./tsconfig.node.json" }],
}
Any idea please why runnig my React.js app stopped working?
Thank you!