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.
Related
I'm working on a project that implements react-app-rewired to send headers to the server in order to bypass ReferenceError: SharedArrayBuffer is not defined (I'm getting this error from using the #ffmpeg/ffmpeg library).
// config-overrides.js
const {
override,
// disableEsLint,
// addBabelPlugins,
// overrideDevServer
} = require('customize-cra')
module.exports = {
devServer(configFunction) {
// eslint-disable-next-line func-names
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost)
// Set loose allow origin header to prevent CORS issues
config.headers = {
'Access-Control-Allow-Origin': '*',
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Resource-Policy': 'cross-origin'
}
return config
}
}
}
// package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --transformIgnorePatterns \"node_modules/(?!siriwave)/\"",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
}
Though this works when I run npm start, meaning the headers get sent to the server, it doesn't work when I run npm run storybook, and I still get the SharedArrayBuffer is not defined error. I'm assuming it's because npm run storybook still uses react-scripts as opposed to react-app-rewired under the hood, but I'm not sure where I can change the configurations for this. Any ideas?
You can add a custom webpack configuration in storybook/main.js like so:
https://storybook.js.org/docs/react/builders/webpack
So you can use the same webpack modification as you did with react-app-rewired
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.
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"
},
I want to create npm package from my CRA app. Lets say I have some components where I include .scss file. When I build this app, I compile .tsx/ts components to JavaScript files with their definitions.
Compiled folder hierarchy structure may looks like this
components
=> BurgerMenu
=> BurgerMenu.d.ts
=> BurgerMenu.js
=> BurgerMenu.js.map
However compiled JavaScript files imports scss files require("./burgerMenu.scss"); instead of css file and css file is not compiled into specific folder.
Desired result is below
components
=> BurgerMenu
=> BurgerMenu.d.ts
=> BurgerMenu.js
=> BurgerMenu.js.map
=> BurgerMenu.css
How I can set sass compile during build and in every single component change import from scss to css?
Sample BurgerMenu component
import * as React from "react";
import "./burgerMenu.scss";
export const BurgerMenu = (props) => {
//removed for brevity
};
package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"main": "dist/js/index.js",
"module": "dist/esm/index.js",
"types": "dist/js/index.d.ts",
"publishConfig": {
"access": "public",
"tag": "prerelease"
},
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:lib": "yarn build:babel && yarn build:types && node ./scripts/copyTS.js",
//TODO: node sass compile
"build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
"build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=#babel/env",
"build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
"build:babel:umd": "cross-env BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
"build:types": "tsc -p tsconfig.gen-dts.json",
"clean": "rimraf dist",
"develop": "yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose",
},
}
node-sass npm package can be used to convert all the .scss files to .css files and the same can be used your modules for importing
Add this in your package.json
"scripts" : {
...
"build-css": "node-sass src/scss/ -o dist"
}
Here is a nice explanation of how node-sass can be used - How to compile or convert sass / scss to css with node-sass (no Ruby)?