We Keep Coding

How can I force Webpack in a Next.JS app to resolve to a specific dependency from an external directory?

Given the following directory structure, is it possible to have ALL react imports resolve to react-b?
|__node_modules
| |__react-a
|
|__app-a
| |__component-a
|
|__next-app
| |__react-b
| |__component-b
// component-a
import { useEffect } from 'react' // I need this to resolve to next-app/node_modules/react
export function() {
useEffect(() => {} , [])
return <></>
}
// component-b
import ComponentA from "../app-a/component-a"
export function() {
return <ComponentA />
}
The issue I am having is that we are migrating to a Next.JS app (next-app) but we want to continue to import components from (app-a). app-a is stuck for now on react 17.x.x but Next.JS is using 18.x.x. So when next-app is built, I need all react imports to resolve to react 18.x.x. At the time of writing this post we are using the experimental.externalDir setting to allow for importing components from outside the root of the next.js app.
The crux of it is that when importing from app-a I still need react to resolve to next-app/node_modules/react.
Webpack aliases seem to be the recommended answer generally but they don't appear to apply correctly in this situation.

I have solved this specific problem by using the next config transpilePackages list. Some dependencies that are dependent on react are causing the react version mismatch by importing react from the root node_modules. By including these packages in the transpilePackages list in the next config, it seems that next is pre-compiling these libs using the correct react version.
Example:
// next.config.js
const nextConfig = {
...other_config,
transpilePackages: ["react-focus-lock"],
}
Unfortunately I haven't fully appreciated why this imports the correct react dependency while using webpack resolve aliases does not.

Exporting Text is showing a Render Error in React Native

I have made a components library for ReactNative using react-native-builder-bob for packaging. With some components like Button, Image, etc is working great, but when I try to import a Text component is failing and showing this error:
View config getter callback for component 'RCTTEXT' must be a function
(receive undefined)
If in the project where I import this component do some change, the view is refreshed and the error dissapears, but every time I run the project for first time this error is shown.
Here is the imported component:
import {Text} from 'react-native';
export const MyText = ({...props}) => <Text {...props} />;
And after, this is the way I import this component in another app:
import { MyText } from 'my-library'
export const Example = () => {
return <MyText>Hello</MyText>
}
I was searching for the error of 'View config getter....' and the only I found is, provocated by importing error, but only happens with this component.
What thing could be provocating this error?
Thanks in advance

Try using your custom text component like this.
import {Text} from 'react-native';
export const MyText = ({children, ...props}) => <Text {...props}>{children}</Text>;
Hope it will solve your problem.

well....finally I found the error. Everything is all great from my library of components, but, apparently, in my component library I have the react-native version 0.68.0 and, in the app where I was importing this components I had a lower version (0.67.3). If I use the same version, it is working!

Next js, ReactDom.render is no longer supported

I just spun up a new Next JS app with Next 12.
I am getting this error on all page loads in the browser:
Warning: ReactDOM.render is no longer supported in React 18. Use
createRoot instead. Until you switch to the new API, your app will
behave as if it's running React 17. Learn more:
https://reactjs.org/link/switch-to-createroot
Next js's ReactDom.render is under the hood, how can I resolve this error?

For me it was indeed Chakra. You need to Install the latest Chakra ui for NextJS
npm i #chakra-ui/react#2.0.0-next.3

You may also get this warning if you've updated to React 18 and are using a custom server setup in your Next.js app.
For this case, the issue has been addressed in this PR in version 12.1.7-canary.2. To fix it in your project simply update Next.js to version >=12.2.0.
npm install next#latest

actually i have got same problem/warning ,
and in my case i am using "react-toastify" inside my next.js application with context api,
and after a lot of searching ...
i found the problem coming from :
toast.configure() method
and i am use it inside my context api module ,
and also i found the official "react-toastify" Docs talking about some problems related with this method when use it with context api , and they are removed this method from the new version .
and here is the link for official docs:
https://fkhadra.github.io/react-toastify/migration-v9#toastconfigure-removal
finally i solved my problem by using the following steps :
1-remove toast.configure() from my context api module .
2- instead of using toast.configure() , i used "ToastContainer" component inside "_app" module "just define it , the toast will works fine" as expected , and here is my "_app.js module " :
import { useEffect } from 'react';
import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css';
import Nav from '../components/nav';
import Footer from '../components/footer';
import { AuthProvider } from '../my_utils/myContext/authcontext';
import { ToastContainer } from 'react-toastify';
function MyApp({ Component, pageProps }) {
useEffect(() => {
import ('bootstrap/dist/js/bootstrap.js')
import ('react-toastify/dist/ReactToastify.css')
}, []);
return (
<>
<AuthProvider>
<Nav />
<div className="allButFooter ms-3 me-3">
<Component {...pageProps} />
<ToastContainer />
</div>
<Footer />
</AuthProvider>
</>
)
}
export default MyApp
i don't know if your case same my case ,
but i hope that helpful for you .

just run that command to get the latest react version
npx create-next-app#latest

Material UI styles not working in component (warning: several instances of `#material-ui/styles`)

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order that it can be used in a range of apps.
The stand-alone component project works fine (I'm using Storybook to test the component), but when I publish and then import the component into a new React project (created using create-react-app) I get the warning:
It looks like there are several instances of `#material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
The component renders on the page as seen below, but without any theming applied:
When it is clicked, any theming on the main React App is removed (note the dark blue bar in the background behind the menu has lost its color):
I'm using the Material UI withStyles functionality to theme my component, which I guess is the problem as my main React app is also using this, but this is the recommended way to apply to style. Does it feel like I need to somehow inherit an instance of the theme from the main host App?
My component project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).
Here is the component:
import React, {Component} from 'react'
import { withStyles } from '#material-ui/core/styles'
const styles = theme => ({
root: {
fontSize: '14px',
}
})
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class MyComponent extends Component {
render() {
const { classes } = this.props
return (
<div className={classes.root}>Hello world</div>
)
}
}
export default withStyles(styles)(MyComponent)
Which is published to an NPM package and then imported into the main app using:
import React, { Component } from 'react'
import { MyComponent } from '#xxx/mycomponent'
const styles = theme => ({
root: {
display: "flex",
flexGrow: 1
}
});
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Class
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class App extends Component {
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
render() {
//
const { classes } = this.props;
return (
<div className={classes.root}>
<MyComponent />
</div>
);
}
}
export default withRouter(withStyles(styles)(App))

I had the same issue, but I do not use StoryBook. This is the first link in Google, so I post my case here, as it might help.
This is the link on how to fix the alert, but it does not work for me. npm dedupe does nothing and I am unable to change config since I am using create-react-app.
So I did following:
Removed #material-ui/styles dependency from package.json
Ran npm i
Changed all import styles from '#material-ui/styles' to import styles from '#material-ui/core/styles'

I have an almost identical setup and ran into this exact issue when importing the components into a different project. I should mention that we're using webpack to build the app that's consuming the component. It was suggested to me to try the following in my webpackconfig:
module.exports = {
...
resolve: {
alias: {
"#material-ui/styles": require.resolve("#material-ui/styles")
}
}
}
This worked great for my case.
For reference: https://webpack.js.org/configuration/resolve/

You should link #material-ui/styles in your story book
so first need to npm link #material-ui/styles in your story book and than in your apps

Please try to install the below package. This helped resolve my issue.
npm i #mui/material

What is the best way to create component library for both React and Preact?

I'm currently working on a project which involved both React and Preact. I came across to this where I need to use same component for React and Preact.
Is it a good idea to put the component into npm library package. What are the possible way to create component library for both React and Preact? Looking forward to hear your ideas and discussions.
The code might look like as the following:
React Project: Home.js
import React from 'react'
import Fancy from 'fancy-component/react' // My <Fancy /> component library
class Home extends React.Component {
render() {
return (
<div>
{/* Other parts of the code run here*/}
<Fancy text='🦄' />
</div>
)
}
}
export default Home
Preact Project: AnswerPage.js
import { h, Component } from 'preact'
import Fancy from 'fancy-component/preact' // My <Fancy /> component library
class AnswerPage extends Component {
render() {
return (
// Other Preact codes run here again
<Fancy text='🚀 again' />
)
}
}
export default AnswerPage
Component library: fancy-component
const Fancy = ({ text = '' }) => (
<div>
<span>{`This is so Fancy ✨ ${text}`}</span>
</div>
)
export default Fancy

We did this very thing recently, and because we could not find much information regarding this online it involved quite a bit of trial and error. This is what we ended up with:
Folder Structure:
/apps
/mobile
/desktop
/shared
/components
With preact 10, preact-compat is built in so you don't have to worry having separate components - just use React as normal for the components in your shared folder and preact will automatically alias the imports correctly.
As far as aliasing goes, we added this into our preact.config.js so that we can import the components like #components/Date from the app directory
config.resolve.alias['#components'] = path.resolve(__dirname, '../../shared/components')
For the React app, the only way that I could make that work was to add the aliasing in the babel.config.js like so:
['module-resolver', {
alias: {
'#components': '../../shared/components'
}
}]
I hope that this helps someone else that might be stuck on this!