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. :])
Related
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
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.
I'm using the PagerView component from 'react-native-pager-view' at https://github.com/callstack/react-native-pager-view.
Short backstory my app is intended to be available on all 3 platforms (Android, iOS, web). I know that this library doesn't support web, I'm trying to compromise by not using this component on web by trying to conditionally use this component if not on web.
I tried to create an if conditional block that is always false to test it out and it seems that it still tries to read the component on compilation.
import PagerView from 'react-native-pager-view';
const render = () => {
let view = <View></View>;
if (false) { // Ideally (Platform.OS !== "web")
// Code works if I comment out the code line below
view = <PagerView ...></PagerView>;
}
return <View>{view}</View>;
}
Here is the following error message on web if I try to run the code like above.
TypeError:
Object(react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireNativeComponent"])
is not a function. (In
'Object(react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireNativeComponent"])(VIEW_MANAGER_NAME)',
'Object(react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireNativeComponent"])'
is an instance of Object)
I think this could be solved with some kind of Webpack configuration but unfortunately I'm not too savvy on that.
These are also some additional error messages I got on the Expo Metro Bundler page
node_modules/react-native-pager-view/lib/module/PagerView.js Attempted
import error: 'react-native-web/dist/index' does not contain a default
export (imported as 'ReactNative').
node_modules/react-native-pager-view/lib/module/PagerViewNative.js
Attempted import error: 'requireNativeComponent' is not exported from
'react-native-web/dist/index'.
Any help or suggestions would be much appreciated, thanks!
I have a private NPM package that I maintain, which I use in a Next.js project. Both projects are React, Typescript projects.
I've recently added a graph into the NPM project and have now run into the problem of; all the calls to window within that NPM package throw an error window is undefined within the Next.js project
As I'm using a library, that I don't have control over, to build my graph, I don't have the luxury of wrapping the calls to window in some sort of if (typeof window !== "undefined") statement.
I get these errors on build of my Next.js project, before I've even made a call to a component that makes use of the graphing library. Simply including my NPM package in my main project results in these errors arising.
Would it be possible to stop server-side rendering just for that particular graphing library or perhaps my entire NPM package?
Alternatively any other solution would be welcome, however wild.
Given the constrain you mentioned. I don't think there are much options. You simply don't have window object in node environment.
You can render other parts of the page where SSR is possible. and you can dynamically render with ssr: false for the portion where you cannot SSR due to window object.
import dynamic from 'next/dynamic'
// wrap your component that uses the graph lib.
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/myGraphComponent'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
Reference:
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
Maybe you can try dynamic import your graph import
I tried running expo from a file other than App.js but anytime i tried, the default App.js was executed instead of the secondary file.
Take a look at your package.json. Inside the config object you'll find the ''main'' key, that's the key responsible for saying what the first file to run is!
Usually you'll find another path that leads to node_modules/expo/AppEntry.js (see, it's expo, not node_modules/#expo).
Inside node_modules/expo/AppEntry.js you'll see an import like this: import App from '../../App';
That's where you can choose any other file to be the first to run!
More info at https://docs.expo.io/versions/latest/sdk/register-root-component/