how to use nodejs modules in nw/react app - reactjs

I'm trying to build an app with NW ans react and i'm having trouble calling node js modules fron react like the "fs" module i got the following error: TypeError: fs.readdir is not a function
this is my folders structure:
public
-----files generated by CRA
src
-----main.js
-----handlers.js
-----files generated by CRA
package.json
{
"name": "nw-react",
"version": "0.1.0",
"private": true,
"main": "./public/main.js",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"nw" : "nw ."
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.3",
"nw": "^0.64.1"
}
}
main.js
nw.Window.open("http://localhost:3000", {}, function (win) {});
handlers.js
const fs = require("fs");
exports.getFiles = cb => {
const dir = "C:\\Users\\pc\\Documents";
fs.readdir(dir, (err, files) => {
cb(files);
});
};
App.js
import { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
const handlers = require("./handler");
function App() {
const [files, setFiles] = useState([]);
useEffect(() => {
handlers.getFiles(files => {
setFiles(files);
});
}, []);
return (
<div className='App'>
{files.map(file => (
<h1 key={file}>{file}</h1>
))}
</div>
);
}
export default App;

Add this to your package.json:
"node-remote": [
"http://localhost:3000",
"file://*"
]
You may also need this:
"eslintConfig": {
"extends": "react-app",
"globals": {
"nw": true
}
}

You cannot use fs module in browser.. it is node core module.

Related

Error: Editor' is not exported from 'slate-react'

I'm trying to build simple slate editor in React.
I'm using create-react-app and I have made simple component for representing the editor
import React, { useState } from "react";
import { Editor } from "slate-react";
import { Value } from "slate";
const SlateEditor = () => {
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
const [ value, setValue ] = useState(initialValue)
return (
<div>
<Editor className = "Editor" value={value} onChange= {(e)=>setValue(e.value)}/>
</div>
)
}
export default SlateEditor;
This is my package json file
{
"name": "slate-editor",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"immutable": "^4.0.0-rc.15",
"is-hotkey": "^0.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"slate": "^0.66.1",
"slate-plain-serializer": "^0.7.13",
"slate-react": "^0.66.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have error
Failed to compile.
./src/components/SlateEditor.js Attempted import error: 'Editor' is not
exported from 'slate-react'
As you can see I exported Editor from slate-react, please any idea how to fix this?
Thank you
slate-react does not export Editor, you can import Editor from 'slate', or use the Slate and Editable components as shown in the documentation https://docs.slatejs.org/walkthroughs/01-installing-slate

I am having a difficult time getting a simple React JS to start or run

I am having a difficult time getting a simple React JS to start or run. Her are my 2 simple files and package.json.
App.js
export default App;const App = () => {
return (
<div className="container">
<h1>Hello World</h1>
</div>
)
}
export default App
index.js
import { render } from ReactDOM
import App from './App'
render(<App />, document.getElementById('app'))
package.json
{
"name": "first-react-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have tried start index.js and start App.js. I don't get any errors server just won't run. I try to connect to 127.0.0.0:3000 and localhost:3000 and my browser never connects.
Any help would be greatly appreciated.
Thanks
Dawson
Get rid of the ‘ export default App;’ before the const in App.js

Why remote library works but local library throws error?

I am building a component library, and install it as a local package, but it throws an error when I use react Hooks.
import React from "react";
import { useSelector } from "react-redux";
export default function Info() {
const name = useSelector((state) => state.account.name);
return (
<>
<ul>
<li>name: {name}</li>
</ul>
</>
);
}
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Then I upload this component library to remote, install it again, it solved.
But I still didn't know why...
Could anyone explain it?
My package.json
{
"name": "package",
"version": "0.1.0",
"private": true,
"main": "dist/index.js",
"babel": {
"presets": [
[
"react-app"
]
]
},
"dependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"compile": "rm -rf dist && mkdir dist && cross-env NODE_ENV=development babel ./src/components -d dist --copy-files"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.12.0",
"cross-env": "^7.0.2",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2"
},
}
Is there any difference behavior between the local package and remote package?
I read many articles, I guess it might be the multiple instances of React.
But why remote package wouldn't have this problem?
Articles I read:
Hooks + multiple instances of React #13991
Invalid Hook Call Warning
remove the brackets
const name = useSelector(state => state.account.name);
Add curly braces, and remove name in the end.. as you are trying to destructure the state.
const { name } = useSelector((state) => state.account);

TypeError: Cannot read property 'props' of undefined in ReactJS

I'm trying to create a simple app with ReactJS, but I get this error and I don't know why.
This is my App.js.
import React from 'react';
import { connect } from 'react-redux';
import Category from './components/Category';
//import News from './components/Noticias';
import './App.css';
function App() {
const { categories } = this.props;
return (
<div className="App">
<Category categories={categories} />
{/*<News />*/}
</div>
);
}
const mapStateToProps = state => {
const { Categorias: {data: categories}} = state;
return {
categories,
}
}
const mapDispatchToProps = dispatch => ({})
export default connect(mapStateToProps, mapDispatchToProps)(App);
I'm working under v14.4.0 of node.js and this is my package.json for check react version, redux version, etc.
{
"name": "noticias",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"redux-form": "^8.3.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I'm checking but I don't find the error, can you help me?
You might write this,
function App({ categories }) {
// const { categories } = this.props;
return (
<div className="App">
<Category categories={categories} />
{/*<News />*/}
</div>
);
}

React Typescript - ',' expected.ts(1005)

I'm using Typescript in an React app with Graphql.
I'm getting an error:
',' expected.ts(1005)
The only answers I find say that typescript is out of date but I'm using 3.7.2
user#3df41 ~/Desktop/34534/client (master) $ tsc -v
Version 3.7.2
user#3df41 ~/Desktop/34534/client (master) $
The error occurs here at line data.recipe.map(recipe =>
import React from 'react';
import './App.css';
import { useQuery } from 'react-apollo-hooks';
import { GET_ALL_RECIPES } from '../queries';
import { RecipeData } from '../generated/RecipeData';
const App: React.FC = () => {
const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
suspend: false
})
if (loading || !data) return <div>Loading</div>
return (
<div className="App">
<ul>
if(RecipeData.recipe !== null){
{
data.recipe.map(recipe =>
<li>{recipe.name}</li>
)
}
}
</ul>
</div>
);
}
export default App;
package.json :
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.23",
"#types/node": "12.12.14",
"#types/react": "16.9.13",
"#types/react-dom": "16.9.4",
"apollo": "^2.21.1",
"apollo-boost": "^0.4.4",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.16",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-apollo-hooks": "^0.5.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"typescript": "^3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"apollo:generate": "apollo codegen:generate --target typescript --excludes=node_modules/* --includes=**/*.tsx --endpoint http://localhost:4000 --tagName=gql --outputFlat src/generated"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You can't put statements in JSX curly braces, only expressions. You can replace the if statement with an inline && expression.
return (
<div className="App">
<ul>
{
RecipeData.recipe !== null && data.recipe.map(recipe =>
<li>{recipe.name}</li>
)
}
</ul>
</div>

Resources