React unable to find html document while using Django Backend - javascript

I am trying to configure a react frontend with a django backend and everything is fine, it complies, it loads etc.
The issue i am facing is that my react component is unable to find the actual index.html document
Uncaught ReferenceError: root is not defined
my react app is constructed the standard way
in ./src/components/App.js
//proper imports up here {react, reactDOM}
export default function App(){
return (
<h1>hello world</h1>
)
}
root = reactDOM.createroot(document.getElementById('root))
root.render(<App />)
In my index.js located in .src/index.js
import App from './components/App.js'
and my webpack config file points to this index.js file
Yes, I have ensured there is a div with an id of root in my boilerplate HTML
The django backend compiles fine, and using webpack/babel things seem to be fine on that end. Bu that error is what pops up in the chrome console upon loading.
The urls and views are properly set up and any html/css I add to the page displays as expected
Thank you in advance

I needed to use let/const before defining root.
I am an idiot

Related

warn - using beta Middleware (not covered by semver) error in NextJS [duplicate]

I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/context/Context
That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.
Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.
To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.
In my case, I had an empty file index.js in a folder. Using Nextjs Default Router
It seems to be not declared default export keyword in context component.
Try it as follow:
const Context = ()=>{
...
}
export default Context
I had the same error.
If you comment out all other code but leave this NextJS won't get mad at you:
export default function Home1() {
return <>{/* nothing */}</>;
}
I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:
index1.js
You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:
//good for history of index implementation and associated syntax logic

warning only in design view on import statement to use qml component from file

I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.

External Dependencies not working in Nav.svelte

I am trying to load sv-bootstrap-dropdown module in nav.svelte component but I am getting the error <Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. After that I tried to install that as devDependency but than I was getting the error that Cannot read property remove of undefined. This gets generated itself in the server js file under the sapper folder
When working with svelte and sapper you to have think about 2 types of rendering : client side rendering (sveltjs, js) and server side rendering (SSR), it's sapper (nodejs or expressjs), there are a few ways to handle this, but according to the document of dependency you are using :
for SSR you consider to import like this:
import {
Carousel,
CarouselControl,
CarouselIndicators,
CarouselItem,
CarouselCaption
} from 'sveltestrap/src';
solve it by importing from the src folder of the package.

PapaParse Script Path is Undefined

I've been looking all over for a solution to this and I can't figure it out for the life of me...
The sitch: I have a lazy loaded React component which is supposed to parse a CSV file (with PapaParse) which is all built within the create-react-app framework. But for some reason, despite everything saying it should work, when I try to use PapaParse, I get this error:
Error: Script path cannot be determined automatically when Papa Parse is loaded asynchronously. You need to set Papa.SCRIPT_PATH manually.
But since this is bundled with Webpack I have no idea what this script path should be and I've tried setting the path to the PapaParse folder within the project folder structure (i.e. something like ../../node_modules/papaparse) to no avail. I actually got a different error when I put in a path:
papaparse?papaworker:1 Uncaught SyntaxError: Unexpected token <
For some more context, the component in question looks a little like this:
import Papa from 'papaparse';
class Dialog extends React.Component {
...
handleFileChange = () => {
...
Papa.parse(file, config);
...
}
...
}
I installed PapaParse via npm, so it should be the latest version, some things go back to 2014-15 where these problems existed, but it's said to have been updated...
Actually, I'm confused, because it works well on both of my projects, hence, React Web App and React Native iOS, Android App.
I imported it like below:
import Papa from 'papaparse/papaparse.min';
Surely, for each project, there are some configs that maybe some libraries work badly. but you maybe can use Node.js path for setting SCRIPT_PATH for Papa:
import path from 'path';
...
Papa.SCRIPT_PATH = path.resolve('/node_modules/papaparse');
...
Or if it has the issue too, then use this link answer for using papaparse directly in your code. that is not recommended.

ReferenceError: process is not defined when requiring Shelljs in ReactJS

I am trying to require shelljs in my core React component.
import React, { Component } from 'react';
import {render} from 'react-dom';
import Header from './components/Header';
const shell = require('shelljs');
class App extends Component {
render() {
console.log("First component mounting");
console.log("First component mounting");
return (
<Header />
)
}
}
render(<App />, document.getElementById('root'));
When I run
webpack build
I get no errors, then I run my server and I get the following console error.
I'm using jekyll as my server side. Currently transitioning from the normal jekyll implementation to React only.
React is well implemented cause i tested the Header component before importing the shelljs module
ReferenceError: process is not defined
I'm new to using modules in javascript, thanks in advance.
I'm going to guess you don't really mean to use your shell constant since you haven't referenced it anywhere within your React component. Shelljs looks like it's a tool specifically for the command line.
As for your error:
process is a global variable in the Node environment. Since React runs in the browser, and your component is going to render in the browser, process will not exist in the context of your component.
Try opening the Chrome DevTools (or the developer tools for whatever browser you use) and type in process. You'll get a TypeError because it doesn't exist. What does exist, however, is the global window variable.
Now, open the command line and type node to open the Node.js REPL.
Type process here, and you'll see that it's an object holding a lot of properties and values. Next, type window and press enter. window does not exist here because it only exists in the browser.
(Type Ctrl+C twice to exit Node btw. :])

Categories