The error comes out when I added Contact Form by using 'EmailJS'.
I can see the dependencies on Package.json look fine, but it says not defined.
"react": "^17.0.2",
"react-dom": "^17.0.2",
I changed the importing format as following as advised,
import React from 'react';
import ReactDOM from 'react-dom';
also re-installed it, But, still the error is not fixed.
ReferenceError: React is not defined
at Object.children (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\index.js:3460:62)
at BaseAccordion.render (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\index.js:3595:23)
at processChild (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
at resolve (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at renderToString (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at Object.renderPage (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\render.js:54:854)
at Function.getInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\_document.js:791:19)
at Function.getInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\_document.js:1373:85)
at loadGetInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\lib\utils.js:5:101)
at renderToHTML (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\render.js:54:1145)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\next-server.js:112:97
at async C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\next-server.js:105:142
anyone can advise what I am missing here?
first check if you are using babel and react 17. Add "runtime" : "automatic" to the config.
{
"presets": ["#babel/preset-env", ["#babel/preset-react", {
"runtime": "automatic"
}]]
}
if not, check the files that actually change when you add contact form. Mostly in config files like babel or webpack.
if using webpack and got a config like this in webpack.config.json
externals: {
'react': 'React'
},
remove it
If all else fails, remember react is not being bundled instead might be calling window.react so just add
import React from 'react';
import ReactDOM from 'react-dom';
window.React = React
Related
There seems to be no corresponding folder or file named 'react'. Maybe using npm start gives the JSX file access to 'react', I don't know where 'react' is located though.
Basically, where is 'react' located?
I looked in the node_modules folder, and there is a subfolder named react. However, there is no file named React in there.
import React from 'react';
In the above line of code, I can not figure out where React is. I tried looking in the 'react' folder that is a subfolder of node_modules
React is exported from the React package.
import React from 'react';
In the above line, you are importing a default export. You can give it any name you want instead of React.
In the React source code you can find this default export defined in package.json.
The word React is where you assigned whatever the 'react' library exported as default.
if you open the node_modules/react/package.json file and check it you can find following line of code,
...
"main": "index.js",
"exports": {
".": {
"react-server": "./react.shared-subset.js",
"default": "./index.js" // <----------------------------- see here
},
"./package.json": "./package.json",
"./jsx-runtime": "./jsx-runtime.js",
"./jsx-dev-runtime": "./jsx-dev-runtime.js"
},
The package.json says the entry point is index.js so if you check the content of index.js, (exports["."]["default"] says use index.js for default import ( ie import DefaultReact from 'react' ))
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
This is not just a react specific thing, you can learn how to create custom packages from here.
I have switched to React 18 and followed official guide on how to change root's render method.
Here is my root's render code:
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root') as any);
root.render(<App />);
Both react and react-dom are ^18.0.0.
App is throwing this:
By simply refactoring, the line of code below will also work
import { createRoot } from "react-dom/client";
import App from "./components/App";
createRoot(document.getElementById("root")).render(<App tab="home" />);
Have you installed type definitions for react and react-dom packages? You need to add #types/react and #types/react-dom packages and set them in the tsconfig.json file. Keep in mind, package versions needs to be compatible. Also the expected parameter type of the createRoot method is Element | DocumentFragment so you can either use exclamation mark or type assertion like as Element.
index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);
tsconfig.json
"types": ["react", "react-dom"]
package.json
"dependencies": {
"react": "18.0.0",
"react-dom": "18.0.0",
"react-scripts": "4.0.3"
},
"devDependencies": {
"#types/react": "18.0.0",
"#types/react-dom": "18.0.0",
"typescript": "4.4.2"
},
You can ignore it, https://github.com/facebook/react/issues/24292#issuecomment-1091690844
A fix has already been merged, but UNPKG does not yet serve the version which has the fix included.
Author: 0stone0
Reference:
react#18 in "standalone" mode and get a warning using createRoot
I am working on a project using Nextjs (version 11.1.0), Chakra UI/React (version 1.6.6) and Swiper React (version 7.0.2). It's working properly, but I am getting this ESLint issue:
Unable to resolve path to module 'swiper/react'`.
I already tried to use type: modules in package.json and the experimental flag in next config experimental: { esmExternals: true }. Using type: modules solves it but then Nextjs throws an error asking to remove it. The experimental flag does nothing.
Currently, these are my imports:
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/free-mode'
I already tried variations such as:
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js'"
but that doesn't work either.
I'm trying to setup a jest snapshot test with redux-persist in my react-native project. I don't think its an es2015 imports problem as my test code looks something like this:
import React from "react"
import "react-native"
// Note: test renderer must be required after react-native.
import renderer from "react-test-renderer"
import App from "../App"
it("renders correctly", () => {
const app = renderer.create(<App />).toJSON()
expect(app).toMatchSnapshot()
})
I ran this exact same test before I added redux-persist and it was working.
Error thrown by jest:
● Test suite failed to run
/Users/a_050313/Documents/dev/scheduling/node_modules/redux-persist/es/integration/react.js:9
import React, { PureComponent } from 'react'; // eslint-disable-line import/no-unresolved
^^^^^^
SyntaxError: Unexpected token import
1 | import React, { Component } from "react"
2 | import { Provider } from "react-redux"
> 3 | import { PersistGate } from "redux-persist/es/integration/react"
4 |
5 | import "./__debug__/ReactotronConfig" // Run Reactron Tools config
6 |
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
at Object.<anonymous> (App.js:3:13)
at Object.<anonymous> (__tests__/App.js:7:10)`
The error was related to es2015 imports but It is on jest end. By default jest only transpiles project code and react-native code. So the added libs which aren't already transpilled would error out by jest.
(as mentioned on jest docs)
By default the jest-react-native preset only processes the project's own source files and react-native
Solution provided on the official docs seems a bit hacky but thats the only thing I found:
Add following in your package.json jest: { } section or in jest.config.js file.
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist)/)"
]
where the bit redux-persist is the thing that solves the problem. If you have problem with other libs just add their names. My list looks something like this:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist|react-native-linear-gradient|react-native-vector-icons|react-navigation)/)"
]
}
Additional Note just for redux-persist if you import PersistGate from
import { PersistGate } from "redux-persist/lib/integration/react"
instead
import { PersistGate } from "redux-persist/es/integration/react"
(reference)
you'll get the compiled version but for other libs still you got to this the above mentioned solution.
I wrote a component in reactJS that renders a tree
I am unable to import it directly to browser and keep getting this error:
Uncaught Error: Module name "TreeComponent" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:5)
at Object.o [as require] (require.js:5)
at requirejs (require.js:5)
at reactJS_returnReactJs.action:2192
babel preset is react-app:
"babel": {
"presets": [
"react-app"
]
},
entry point for build is index.js:
export {default} from './components/TreeComponent';
Can you help me to find out what is wrong in my build steps?
If you export react component in your TreeComponent.js this way
export default TreeComponent({
});
Or something like this
exports.default = TreeComponent;
You need to import it this way
import { TreeComponent } from './components/TreeComponent';
Or you can do this way too
import TreeComponent from './components/TreeComponent/TreeComponent';