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
Related
I've started using Electron alongside React and one issue I'm facing right now - which may actually be unrelated to Electron - is that Node cannot seem to "find" a Sass module that I am importing despite the fact the styles I'm importing are actually working.
Here is my file structure:
src
|__Render
|__Styles
| |__Page
| |__Home.module.scss
|__App.tsx
Inside of App.tsx, I'm importing the Sass module like so:
import styles from "./Styles/Page/Home.module.scss";
export default function App(){
return <div className={styles.test}>Test</div>
}
and receiving the error:
TS2307: Cannot find module './Styles/Page/Home.module.scss' or its corresponding type declarations.
Despite this, if I inspect the element I'm targeting, the styling is being applied.
<div class="Home_test__QTxtE">Test</div>
I have followed every single answer in this thread to no avail.
Is this an issue with Electron? Is there some sort of extra configuration I'm missing?
Also, it might be worth mentioning, that if I just import "Test.css";, this works fine.
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.
I am trying to open a pdf file in a new tab inside a React Typescript project.
Here is what I am trying:
import { Pdf } from '../path/filename.pdf';
<a href={Pdf} target='_blank'>Click Here</a>
But I am still getting a page not found error even though the file path and name is correct
You could try removing the curly braces around the import.
import Pdf from '../path/filename.pdf';
The reason this works (I'm assuming) is because since there are no named exports (since it's a file), using the curly braces will not work since React is looking for a named export called "Pdf".
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
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.