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.
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"
}
}
I get this error after installing and importing framer-motion in the middle of my project
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
I have tried to install after npx create-react-app and it works fine. This only happened if I install the package in the middle. This is my project
First, install the react-app-rewired NPM package as a dev dependency.
Then, in package.json, update the start, build, and test scripts to replace react-scripts with react-app-rewired:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
Finally, paste this into a file in the project root directory named config-overrides.js:
module.exports = function override(webpackConfig) {
webpackConfig.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return webpackConfig;
}
Now npm start / yarn start should work.
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"
},
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.
I created a react component library for a project to create a shareable component library across
multiple projects using the same theme and similar components.
I am importing it by npm link and importing as import { Button } from 'ph-shared'
It throws error
Here's the link to lib code if that can help
https://github.com/usmantahirr/react-lib
Found the fix. You have to install react-app-rewired and react-app-rewired-alias
here's the code snippit
const path = require('path');
const {alias} = require('react-app-rewire-alias')
Add a file config-overrides.js in root and put this.
// config-overrides.js
module.exports = function override(config) {
alias({
react: path.resolve('./node_modules/react'),
})(config)
return config;
};
Modify scripts your package.json as follows
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},