I'm doing a video course from Packt on React. I'm trying to build a component.
Unfortunately I think the video course is a little outdated.
When I save my js file with a component I get this message in the browser console:
index.js:19240 Uncaught TypeError: _react2.default.render is not a function
My package.json looks like this:
https://gist.github.com/anonymous/396478849378a7a31c2dfc3fe8290ed4
My webpack config looks like this:
https://gist.github.com/anonymous/43fa0751262b5faab1e6910ce53b1c0d
My own script looks like this:
https://gist.github.com/anonymous/6936234da970dadaf4b06e3f9e95e404
My guess is that I'm using either the wrong call to render the component, or that I'm using an outdated react package.
What do I need to do in order to successfully call a method for rendering the component?
To render a react element into a DOM node, you should use ReactDOM.render(). So, replace React.render(component, document.getElementById('react')) with ReactDom.render(component, document.getElementById('react')) in your scripthttps://gist.github.com/anonymous/6936234da970dadaf4b06e3f9e95e404
For more info, visit https://reactjs.org/docs/rendering-elements.html
Related
I am trying to use react within my mvc application and am running into an issue and I'm not sure how to fix it.
I have the file DraftCommentsDisplay.jsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = <h1>Test</h1>;
const root = ReactDOM.createRoot(document.getElementById('my-comments'));
root.render(myElement);
Nothing really of value here but I'm just trying to get it working before actually implementing what I'm needing this file to do
This is then bundled into a file called draftComments.bundle.js through webpack so it is readable to the browser.
I am then trying to reference this file in DraftCommentsEditor.cshtml like so:
#{
Html.Assets().Scripts.Add("/Scripts/bundles/draftComments.bundle.js");
}
in this file I do have a div called my-comments like so:
<section id="comments">
<div id="my-comments"></div>
</section>
and this is within a div with an id of "draft-editors" in case that matters.
The browser can read the js file, however, I am getting the error:
Uncaught Error: createRoot(...): Target container is not a DOM element.
and it is referring to the my-comments. So I am not sure what is happening here? Is the js file being called before the document has been fully loaded? If so, how do I fix that?
Realised is that the issue was because the js file was being called before the dom had fully loaded so changed how I called the file. I got rid of this line:
#{
Html.Assets().Scripts.Add("/Scripts/bundles/draftComments.bundle.js");
}
And then below the div my-comments I have done:
<script src="/Scripts/bundles/draftComments.bundle.js"></script>
Doing this solved the issue for me and now I am no longer getting that error
I want to import .ts, .tsx, .js, and .jsx files into a react component and render them within a PrismJS highlighting block. For example, let's say I have a TypeScript file with functionA in it that I want to highlight in my actual website:
functionA.ts:
export function functionA() {
console.log("I am function A!");
}
I want to include this in a different component. The problem is, when I import it, I am obviously importing the webpack module version of it. My weak attempt at trying to get my function render in a react component looks like this:
MyComponent.tsx:
import * as React from "react"
import { functionA } from "./functionA"
export function MyComponent() {
return (
<>
<h1>Here is your code block:</h1>
<pre>
<code>
{functionA.toString()}
</code>
</pre>
</>
)
}
and what will actually render on the page where the code block is will look something like this:
Here is your code block:
WEBPACK__IMPORT.functionA() {
console.log("I am function A!")
}
I can't exactly remember what the .toString() function output looked like, but the point is it is NOT just the contents of the file how it appears in a code edit for example - it has been modulized by WebPack.
So, in a Gatsby project, how can i get these various code snippets to be imported directly as a string, purely as they are written, without WebPack enacting its import stuff on it? Is there a plugin or some way to tell Webpack to use the imported file as its asset/source module type? I know for MD or MDX files there is the gatsby-remark-embed-snippet, but I am building a component based HTML page and can't use MD or MDX files!
It's very late, and perhaps I just can't see the forest from the trees, I know there must be a way to do this...
You need to require the file using webpack's raw-loader, i.e:
const functionA = require("!!raw-loader!./functionA");
This works for create-react-app, as in the solution discussed here, and this works for Gatsby as well!
After using require on such a file, the file contents can be rendered in the component as:
<pre>{functionA.default.toString()}</pre>
It's then up to you to add syntax highlighting using a tool like prism or similar.
Note this solution will only work as long as Gatsby V3 continues to use WebPack v4, as raw-loader is deprecated in WebPack v5 and will be phased out for asset/source type modules.
This is my first using of react.js and
Code works in browser but html is highlighting in red how to fix this. I'm using JSX Harmony, Webstorm 11 ?
You can't put raw HTML/JSX into render. If you look at the docs, you'll see that you need to pass a ReactElement to render.
The easiest way to do that would be to create a simple React class using React.createClass()
I've created a simple component called MyDataTable, as a wrapper over React FixedDataTable component and bundled it with Webpack. The file resulted from this bundle is called my-components.js. Nothing really complicated until here. You can try the source code to see how it works: https://github.com/cosminnicula/fdtwebpack
Now, the second step would be to consume this my-components.js library in a separate project. Here https://github.com/cosminnicula/fdtwebpackclient you can see how I imported the library and tried to use the <MyDataTable /> component:
'use strict';
//fdtwebpackclient/src/main.jsx
import React from 'react';
import MyDataTable from './../lib/my-components.js';
React.render(
<div>
Hello MyDataTable!
<MyDataTable></MyDataTable>
</div>
, document.body
)
However, if i try to browse index.html, I get a nasty error, which I don't find a logical explanation for: "Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined".
BTW, the wrapper component was copy-pasted from here http://jsbin.com/temufa/18/edit?html,js,output, so it should suppose to work.
Any idea on this error?
I've identified the problem and the solution is very simple. Inside fdtwebpackclient change:
import MyDataTable from './../lib/my-components.js';
...
<MyDataTable></MyDataTable>
with:
import MyComponents from './../lib/my-components.js';
...
<MyComponents.MyDataTable></MyComponents.MyDataTable>
I think the problem is that you have a bundle within a bundle kind of situation. FixedDataTable seems to do some trickery to find global context (ie. window). This breaks here.
Instead of bundling a bundle within a bundle at your wrapper you could push FixedDataTable as an external there like this:
externals: {
'fixed-data-table': 'fixed-data-table',
},
The wrapper should probably consume FixedDataTable as a peer dependency then. Your main project would depend on FixedDataTable directly then. Webpack can deal with mapping the dependency to your wrapper.
I'd like to get the 'basic' (US States) example of the nifty react-magic-move component working at JSFiddle, for tinkering. (See also impressive video demo at https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424)
I've added the react-magic-move 'dist' script to the Base React (JSX) fiddle, plus the other (minimally-adapted) example JS/CSS/HTML. You can see the attempt here:
http://jsfiddle.net/69z2wepo/4692/
However, it's triggering an error late-in-initial-rendering:
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.
It's clearly loading the MagicMove code and succeeding on most of the rendering: after the error, the real-DOM has been assembled. Including the dist script after React ought to work.
Thinking it might be a problem specific to JSFiddle's panes, I tried the same setup in local files: same error. Thinking it might be a JSX-in-browser interaction, I tried precompiled JSX: same error. (See http://jsfiddle.net/5vjqabv3/325/). First got the error with React 0.13.1; tried rolling back to 0.12.0's base fiddle: same error. (See http://jsfiddle.net/kb3gN/10548/)
At the moment of the exception, the current element (ReactElement, div, ref 'AL') has a null _owner property – which seems off.
Any ideas what's preventing the necessary React-owner-relationship from being set up? Is the react-magic-move dist script broken or otherwise unusable in this desired 'load-after-React' manner?
This is what I did to get the examples working locally
git clone git#github.com:ryanflorence/react-magic-move.git
cd react-magic-move
npm install
scripts/dev-examples
now open up http://localhost:8080/basic/ in your browser, and it works somehow
I had a similar situation with a different react module. What we did was add an alias to our webpack.config.js named react that pointed to our node_modules/react. This keeps any other instances of react from loading. It would look like this
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},