I'm developing a React App and pushing the files using Clasp to my google scripts webapp. Parcel.js is being used for compiling. Here's a basic React App that works:
index.js
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);
App.js
//app.js
const App = () => {
return <div>Hello App!</div>
}
export default App
But as soon as I add one #mui/material/ import into App.js I'm getting an error.
import Button from "#mui/material/Button"
const App = () => {
return <div>Hello App!</div>
}
export default App
Notice that I'm not even using the Button. Locally there's no error but when running on google scripts webapp, I get a console error:
Uncaught SyntaxError: missing ) after argument list
Obviously, Parcel is not compiling something correctly but I can't figure it out. Thanks in advance for the help.
Related
I am trying to implement a Redux in a simple React application that uses the latest version (React 18). Here is my code in index.js so far:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { store, App } from './App';
import { createStore } from 'redux'
export const renderApp = () => {
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
}
renderApp()
store.subscribe(renderApp)
However, I get a warning in the console that says:
"You are calling ReactDOMClient.createRoot() on a container that has
already been passed to createRoot() before. Instead, call
root.render() on the existing root instead if you want to update it"
What is the supposed to mean, and how would I need to change my code in index.js?
The most basic implementation would be something like the following, which creates a single root, renders against it, and then passes a callback which closes over that root for further subscription calls.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
store.subscribe(() => root.render(<App />));
I have a website built in React Js and the same one on Next Js as well.
The problem which I am facing right now is, the router seems very slow in the nextJs compare to react-router-dom, It's taking almost 2-3 seconds to change the route.
Here are the URLs where you can feel the difference between the performance by moving around different pages.
https://cutt.ly/mhbPkOE (React Router Dom) vs
https://cutt.ly/BhbPvHv (NextJs)
I had read some comments on Github where few experts are saying that It will resolve in production. but It looks same in production too.
Please have a look at the following code
_app.jsx
// import App from 'next/app'
import React from "react"
import Router from 'next/router';
import "../static/sass/application.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import 'semantic-ui-css/semantic.min.css'
import { wrapper } from "../../redux/utils/store"
import App from 'next/app';
// A simple component that we created
import {LoaderOverlay} from '../components/Reusable'
class MyApp extends App {
constructor(props){
super(props)
this.state = {
isLoading: false,
}
Router.onRouteChangeStart = (url) => {
// Some page has started loading
this.setState({
isLoading: true,
}) // set state to pass to loader prop
};
Router.onRouteChangeComplete = (url) => {
// Some page has finished loading
this.setState({
isLoading: false,
}) // set state to pass to loader prop
};
Router.onRouteChangeError = (err, url) => {
this.setState({isLoading: false,})
};
};
render() {
const {Component, pageProps} = this.props
return (
<div>
{this.state.isLoading ? (
<LoaderOverlay/>
) : (
<Component {...pageProps} />
)}
</div>
)
}
}
export default wrapper.withRedux(MyApp);
_document.jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
// useful for wrapping the whole react tree
enhanceApp: (App) => App,
// useful for wrapping in a per-page basis
enhanceComponent: (Component) => Component,
})
// Run the parent `getInitialProps`, it now includes the custom `renderPage`
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
render() {
return (
<Html lang="en">
<Head>
<link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.1/dist/semantic.min.css"/>
</Head>
<body>
<div className={'main-wrapper'}>
<Main />
</div>
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Development mode (next dev) is much slower because the routes aren't pre-built.
All delay related to routing assuming you don't have any server side blocking data requirements via getInitialProps, getServerSideProps, should not be present when running production mode with next build followed by next start.
Not sure if you have found a fix for this yet, but I came across this article about "shallow routing". I can't see much improvement in my application when using it, but maybe it will help someone else:
https://nextjs.org/docs/routing/shallow-routing
Hey I think you are in your production mode.
That's why it is slow. But if you will host your site it will be pretty much like react only.
But then also if you want to routing fast
Then npm i next#4.2.3 --save will work fine..
to solve this issue followed the commands:
yarn build/nmp build
yarn start/npm start
I hope this will solve this issue
I'm currently developing a Excel extension for my company with Office Add-ins and Reactjs.
Lately I've been using Axios in order to make http requests to get data from a remote back-end service. The issue is that the statement "import axios from 'axios'" is not handled in IE11 and the application runs into an exception when this statement is present in a script file. The exception is :
Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). In itself that doesn't say a lot except that "the code does not compile".
After a few researches on my own I discovered that IE11 needs polyfill in order to make it work since it doesn't natively support the most recent js scripts (ES6, promises by example).
I've tried many kinds of combinations with babel/polyfill, react-app-polyfill, es-promise with no result so far. Happily, in a another application I've been working on recently (VueJs with axios), I met the same problem and just adding 'import babel/polyfill' did the trick.
I would like to know if anyone has succeeded in doing what I am trying to do for a few days and if not, any help will be appreciated. Some of my coworkers are using Windows 7 or Windows Server 2019 and I really need this excel extension to function with IE11.
Thank you for your help.
Edit on 06/29 :
Here is what I have in my index.js :
import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
/* global AppCpntainer, Component, document, Office, module, React, require */
initializeIcons();
let isOfficeInitialized = false;
const title = "Contoso Task Pane Add-in";
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component title={title} isOfficeInitialized={isOfficeInitialized} />
</AppContainer>,
document.getElementById("container")
);
};
Office.initialize = () => {
isOfficeInitialized = true;
render(App);
};
render(App);
if (module.hot) {
module.hot.accept("./components/App", () => {
const NextApp = require("./components/App").default;
render(NextApp);
});
}
commands.js : You can see that I have a commented import statement in this file regarding axios. My intent is to make it work in the dataservice instead but I put that statement here just for testing purpose. The dataservice class itself has only one dependency : axios.
import "babel-polyfill";
// import axios from 'axios';
import DataService from '../server/dataservice';
I made simple Reactjs that has index.js and App.js. App.js defines App component. index.js imports App.js and uses App component. However, index.js receives "App is undefined error". How can this be?
index.js:
import React from "react"
import '../components/App.js';
export default class Home extends React.Component {
render() {
return (
<div>
<p>Welcome to donghwankim.com!</p>
<p>Powered by Gatsby</p>
<App />
</div>
)}
}
It imports App.js:
/*global kakao*/
import React, { Component } from 'react';
import '../css/App.css';
class App extends Component {
componentDidMount() {
const script = document.createElement('script');
script.async = true;
script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=ee494d4410cf578c0566203d2f487eb9";
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
let el = document.getElementById('map');
let map = new kakao.maps.Map(el, {
center: new kakao.maps.Coords(523951.25, 1085073.75)
});
});
};
}
render() {
return (
<div className="App" id="map"></div>
);
}
}
export default App;
and it gives the following error during development:
12:8 error 'App' is not defined react/jsx-no-undef
From what I learned, shouldn't imported App.js define App? Why is it undefined?
Thank you.
This line:
import '../components/App.js';
...doesn't actually import anything, it just runs the code in App.js. To import the default export, you do so explicitly:
import App from '../components/App.js';
// ^^^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−
You may now be wondering: "But why doesn't importing App.js and running its code create App automatically?" Because modules don't create globals (not unless you go out of your way to do so)., and there are no automatic imports. One of the key aspects of modules is that you explicitly define the links between them. One benefit of doing that is that when you're using a library with lots of functionality exported by a single module, the browser (or your bundler) can tree-shake it — keeping only the parts you actually use, and discarding the rest (the dead wood that fell out when it shook the tree).
I am building a simple electron app using react, i needed to use the os.homedir method to get the home directory of the user.
Here is my react component,
import React, { Component } from 'react'
import Os from 'os'
export default class Item extends Component {
constructor( props ) {
super( props )
}
render () {
return (
<div className='item-component'>
{ Os.homedir() }
</div>
)
}
}
But seems that electron is not utilizing the os module of node js. Thus an
Uncaught TypeError: _os2.default.homedir is not a function
error occures.
Instead of importing the os module i also used the require method with no luck.
let Os = require( 'os' )
How to use node modules in electron and react setup?
Added Project to GitHub https://github.com/rakibtg/ElectronThisIsReact
You can clone it to test ....
I know this is like 4 months late... but if it helps now try using let Os = window.require( 'os' ).
In my app that i'm developing using react and electron if i did not say window.require I would get the same error.