Develop Reference

"React is not defined" when importing React components from other package with Vite

I am importing a JSX component from #platformatic/ui-components, but I have the following problem when using a simple code like
import { BorderedBox } from '#platformatic/ui-components'
function App() {
return <BorderedBox>Hello World!</BorderedBox>
}
The error is:
Uncaught ReferenceError: React is not defined
at BorderedBox (BorderedBox.jsx:10:3)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
It seems that adding import React from 'react' in each component I export would fix the problem but it doesn't sound right to me.
I maintain also #platformatic/ui-components so I can change the library accordingly.
Repo for minimal reproduction: https://github.com/leorossi/plt-ui

many unknown errors while porting the program

I created an HTML CSS JS application and then created an empty React project and moved everything there. At the beginning, there were errors that were solved by adding the following line to .eslintrc :
"parser": "react-scripts/node_modules/babel-eslint"
After that, no errors are shown in the terminal, the program is launched in the browser, but it gives errors(console) and does not show images, although everything else works. I couldn't find anything on the Internet about these errors, because of what could this be? Console error code:
bootstrap:27 Uncaught Error: createRoot(...): Target container is not a DOM element.
at createRoot (react-dom.development.js:29345:1)
at Object.createRoot$1 [as createRoot] (react-dom.development.js:29800:1)
at exports.createRoot (client.js:12:1)
at ./src/index.js (index.js:7:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1
and another little mistake
Uncaught SyntaxError: Unexpected token '<'
Eslint sometimes glows yellow too
Help me please . The third day I can not understand what the problem is.
index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); //console shows error on this line
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
By the way, I placed the files in the already existing folders index.html app.js app.css , maybe it was not necessary to place them there?
In the terminal it started to give an error now too :
Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\user\my-app\.eslintrc
ERROR in [eslint] Cannot read config file: C:\Users\user\my-app\node_modules\eslint-config-prettier\react.js
Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\user\my-app\.eslintrc

TypeError: Cannot read property 'hash' of null

I'm running into issues deploying to Vercel after making some changes.
Running with npm run dev works but after deploying to Vercel (which runs with npm run build) it coughs up an error:
09:53:00.125 TypeError: Cannot read property 'hash' of null
09:53:00.125 at callback (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59190:46)
09:53:00.125 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:57683:39
09:53:00.125 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5
09:53:00.125 at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1)
09:53:00.126 at AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21)
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59794:14
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59452:6
09:53:00.126 at done (/vercel/path0/node_modules/next/dist/compiled/neo-async/async.js:1:10308)
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59356:13
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5
09:53:00.126 at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1)
09:53:00.127 at AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21)
09:53:00.127 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11
09:53:00.127 at Array. (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59296:4)
09:53:00.128 at runCallbacks (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:20480:15)
09:53:00.155 Error: Command "npm run build" exited with 1
Sorry if the formatting makes it hard to read, I'm not too sure how to copy over the error log without the format running.
All I changed can be boiled down to adding a Layout component which uses NavBar, and Footer components. I then modified the _app.js file to use said layout:
import React from "react";
import App from "next/app";
import "tailwindcss/tailwind.css";
import Layout from "../components/Layout";
class MyApp extends App {
render() {
const { Component, pageProps, router } = this.props;
if (router.pathname.startsWith("/shop/")) { //router path check to include/exclude Layout e.g: paths starting with /shop
return (
<Layout>
<Component {...pageProps}></Component>
</Layout>
);
}
return <Component {...pageProps}></Component>;
}
}
export default MyApp;
Any insights regarding this error is much appreciated!

Don't we import Component which is a reserved keyword from react module like below and used for extending a class
import React, { Component } from "react";
class SomeNavComponent extends Component {
Also, it looks like the issue is with the naming of a component, in my opinion
const { Component, pageProps, router } = this.props;

Didn't change anything, after pushing to Vercel again the error didn't pop up, so its "fixed" now I guess.

How do I use hook navigation in interceptor response?

I am having big troubles using useNavigation() in an interceptor response.
First of all, i had to created a new file where i put my function with the navigation.
NavigateError
import React, {useEffect, useState} from 'react';
import {useNavigation, CommonActions} from '#react-navigation/native';
export const NavigateToLogin = () => {
console.log('ENTERS THE FUNCTION ------------');
const navigation = useNavigation();
navigation.navigate('Indexv2');
}
and then i imported it where i have my interceptor response
import {NavigateToLogin} from './navigateError';
and finally use it.
interceptor response
case 403:
//Alert.alert('Error 403', 'Servidor bloqueado');
NavigateToLogin();
console.warn('Error 403, Servidor bloqueado');
The problem is that i got a invalid hook errors. I dont know how to deal with this issue.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

React-Redux error Invalid prop `children` of type `object` supplied to `Provider`

I am very much stumbling my way through learning how Redux works. I'm currently getting the following errors:
Warning: Failed propType: Invalid prop `children` of type `object` supplied to `Provider`, expected `function`
Uncaught TypeError: children is not a function
My code is below -- is anyone able to spot why I'm getting this error?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import * as reducers from '../reducers/index';
import SassMeter from '../components/SassMeter';
import * as SassActions from '../actions/SassActions';
import _ from 'lodash'
const reducer = combineReducers(reducers);
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<SassMeter />
</Provider>,
document.getElementById('root')
)
From what I understand, it's complaining that I'm passing an invalid prop to Provider, but all the examples I've seen follow the pattern I've followed there -- create the store using createStore(), then pass it in as props to the Provider, which wraps your root element. I feel like maybe I'm missing something to do with connect but I'm not sure what.
All help much appreciated!

You should most likely upgrade your version of react-redux and/or react.
In React < 0.14 and react-redux < 1.0.0, the Provider component only accepted a function as the children prop. This was a workaround to owner-based context propagation, which was deprecated in favor of parent-based context propagation in React 0.14. See the corresponding doc on the react-redux 1.0.0 README.