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"
},
Related
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 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.
I'm importing antd components on demand in my create-react-app project such as Collapse, Tabs, Select, etc which do some destructure
such as:
import { Tabs } from "antd/lib/tabs";
import 'antd/lib/tabs/style/css';
import { Collapse } from "antd/lib/collapse";
import 'antd/lib/collapse/style/css';
import { Select } from "antd/lib/select";
import 'antd/lib/select/style/css';
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
I'm getting error TypeError: Cannot destructure property 'Panel' of 'antd_lib_collapse__WEBPACK_IMPORTED_MODULE_3__.Collapse' as it is undefined.
I don't want to use import { Collapse, Select } from "antd"; as it brings a large amount of javascript with it. What am I doing wrong?
One needs to import import Tabs from "antd/lib/tabs"; in such a manner.
Ant design documentation mentions:
antd supports tree shaking of ES modules, so using import { Button } from 'antd'; would drop js code you didn't
use.(https://ant.design/docs/react/getting-started#Import-on-Demand).
Additionally, if you are using create-react-app and Ant Design version 4, you might want to load CSS on demand. To get this, follow these steps:
Install craco (craco installation guide)
Install babel-plugin-import (documentation to install)
Create a craco.config.js file in the root directory (look craco installation guide)
module.exports = {
babel: {
plugins: [['import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}]],
},
};
Finally, Update the existing calls to react-scripts in the scripts section of your package.json file to use the craco CLI:
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build"
- "test": "react-scripts test",
+ "test": "craco test"
}
Reference: https://programmersought.com/article/95268781523/
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.
Using webpack I can import images from a folder
let i = 0;
const imgs =[];
let img;
for(i=0;i<3;i++){
img = require( '../Resources/OtherProjects/'+props.type+'/'+i+'.jpg' );
imgs.push(img);
}
where props.type gives me a different folder to create an array for each folder in my dynamic component
my question is : there is a better way?
also , there is a way to get how many images are in my folder?
require.context only works for an specific folder , but not for each folder
You can use alias to provide aliases for your srcor any directory in your root folder.
Sample tsconfig.json file
const {alias, configPaths} = require('react-app-rewire-alias')
module.exports = function override(config) {
alias({
...configPaths('tsconfig.paths.json')
})(config)
return config
}
tsconfig.paths.json
/* tsconfig.paths.json */
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"example/*": ["example/src/*"],
"#library/*": ["library/src/*"]
}
}
}
and modify your package.json to this:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
You may also refer to this for more information.