Unable to resolve "./scenes/main" from "App.js" .First I was getting an Invariant violation element type error ..Check the render method of ExpoRoot so I created an App.js file in Expo and put the code of my root file screen.js in App.js.
the error basically means you are trying to import a file that do not exist.
so just check your imports or give us more code: App.js file
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 have a problem with importing classes inside typescript react app.
I have no errors prior running the build.
For some reasons when I run the build i get the error of Property 'x' does not exist on type 'classx'.
This property is within a class, and I can access it from anywhere within that class (it is private), and it shows in intellisense with all metadata.
Prior to build i get NO errors!
Code example of this error:
export class MyClass {
private _wrappedClass: WrappedClass
constructor(wrappedClass:WrappedClass){
this._wrappedClass = wrappedClass
}
}
This code would throw error Property '_wrappedClass' does not exist on type 'MyClass'
I have managed to solve this problem partially. For some you can't import typescript classes into a tsx file and expect them to work unless they are also defined within a tsx file. Temporary solution is to import React and save a file as .tsx then it works as expected. Thank you for your effort.
Right now bar chart is being displayed by the App.js file, but I want to shift that whole code to Mismatch.jsx file and access it in App.js 's return
I am not able to import mismatch.jsx file to my app.js file
it is giving me following error
ModuleNotFoundError
Could not find module in path: './src/components' relative to '/src/index.js'
https://codesandbox.io/s/react-chartjs-2-5bsbr?file=/src/index.js
Change it to following
import Mismatch from "./container/mismatchdata/mismatch";
Also install bootstrap
I'm trying to import an SVG file as follows:
import ExampleIcon from './icons/example.svg';
But I'm getting a render error:
Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/example.edcd2c8d.svg') is not a valid name.
How can I use a simple import without needing to cast ExampleIcon as a React Component as follows?
import { ReactComponent as ExampleIcon } from './icons/example.svg';
I'm trying to keep my code standardized within the code base, so I would prefer to avoid using the ReactComponent method where possible.
I realised I needed to use react-svg-loader to achieve the result I want, as React disallows SVG imports otherwise.
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.