Why is it when i run npm run build in reactjs i encounter missing files?
this is the error i get
jsconfig.js
{
"compilerOptions": {
"baseUrl": "/"
},
"include": [
"src"
]
}
UPDATE
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject",
"changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit"
},
Related
I've just tried deploying my react js app with github pages. it works fine just a few seconds ago, then I edited a few text records in the database, then when I refreshed the page it suddenly changed into the "Getting Started with Create React App" page even though I haven't changed anything in the code.. why is that? how can I fix it?
this is the content of the .env file
...
#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------
CI_ENVIRONMENT = development
#--------------------------------------------------------------------
# APP
#--------------------------------------------------------------------
app.baseURL = 'https://myapp.example.com/'
# app.forceGlobalSecureRequests = false
...
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
database.default.hostname = localhost
database.default.database = mydbname
database.default.username = mydbusername
database.default.password = mydbpassword
database.default.DBDriver = MySQLi
# database.default.DBPrefix =
...
this is the content of package.json file:
{
"homepage": "https://example01.github.io/project01",
"name": "project01",
...
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
In my react project I wanna use sweetalert library like that import Swal from "sweetalert2/src/sweetalert2"; instead of using like that import Swal from "sweetalert2"
That's why instead of changing it everywhere, i wanted to manage it from webpack. So I wrote alias for it
resolve: {
alias: {
'sweetalert': path.resolve(__dirname,'./node_modules/sweetalert2/src/sweetalert2.js'),
},
},
And tried to import the library, but it seems doesn't work. Maybe my webpack.config.js file doesn't work.
import Swal from "sweetalert";
I also tried like that;
'sweetalert': 'sweetalert2/src/sweetalert2.js',
I am using
react 17.0.2
webpack 5.65.0
And the scripts file in package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"analyze": "cross-env REACT_APP_INTERACTIVE_ANALYZE=1 npm run build",
"eject": "react-scripts eject",
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"format": "prettier --write \"src/**/*.{js,css,scss,html}\"",
"rtl": "webpack"
},
Note: I named it 'sweetalert' for testing.
I am very new to development with reactjs. I am using the react-scripts library (using an existing react app) and have the following package.json script:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.{js,jsx}",
"lint:fix": "eslint src/**/*.{jsx,js} --fix"
}
I understand that when I run npm run start, the library will automatically start the server on http://localhost:3000. Previously, I was using express-js to start my server and need to add the following middleware in my new app:
const { setup } = require(‘radiks-server’);
setup({mongoDBUrl:"...." }).then((RadiksController) => {
app.use(’/radiks’, RadiksController);
});
app.listen(port);
console.log("Listening on port ", port);
Where should I add this in the new app such that the react-scripts library knows to use this middleware when it starts its server on http://localhost:3000.
Thank You.
My Project is based on Create-react-app setup and my package.json script for testing unit tests is as below
"scripts": {
"test": "react-scripts test --coverage",
}
or
"test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.{js,jsx}
It executes tests in Test folder but doesn't display coverage report.Can you help to solve this issue.
My file structure is as below
src
|
--- Test
---components> moduleA > package1 > package2> transaction.js, abcd.js... etc
ProcessEvent.test.js
describe('ProcessEvent Component', () => {
const expectedProps = {
"event": {iconStatus:'active', desc:'abc'}
}
it('should render without error', () => {
const component = <ProcessEvent {...expectedProps}/>
const wrapper = component.find('.eventclass');
expect(wrapper.length).toBe(1);
});
it('should receive valid props', () => {
const component = shallow(<ProcessEvent {...expectedProps}/>);
const wrapper = component.find('.eventclass');
expect(component.props).toBeDefined();
});
});
Using --watchAll=false parameter makes it list down all the files.
Example package.json
{
...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"coverage": "react-app-rewired test -- --coverage --watchAll=false",
"eject": "react-scripts eject",
"serve": "node server.js"
},
...
}
Also your coverage report is physically located at /coverage/lcov-report. Opening an index.html located there, would show you the coverage report in your browser.
In reactJs after run
npm start
it gives
./src/index.js Module not found: Can't resolve 'react' in
'C:\Users...\src'
error.
this is my package.js
{
"name": "client-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#aspnet/signalr": "^1.0.4",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "^1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Try removing package-lock.json, run npm install and then run npm start again.