I am currently working in a new version of a Dashboard application in React with an API in the back. The old one is a site that was made with ASP.NET WebForms technology.
We are not going to migrate all the sections at once, so we are working on phases. We need to achieve navigation between both systems without problems.
Our main issue was cross-site authentication but we were able to solve it pretty fast. Then we started working on navigation, going from the new system to the old one works fine but the problem is when you are at old system and you want to go a new section of the React App. It always redirects you to the last page you visited instead of redirecting to the one you are pointing. I think its something related to the history of React, based on what I was reading.
I'm pretty much new with React so I don't know where to start. We are currently using "connected-react-router" for Routing and here there is code from the App.js file (I dont know if it is useful but I have characters limitation while adding content to the body):
import React from "react";
import { ConnectedRouter } from "connected-react-router";
import numeral from "numeral";
import "core-js/stable";
import "regenerator-runtime/runtime";
import routes from "./routes";
import Layout from "./components/layout";
import Notifications from "./components/globalNotifications";
import es_locale from "../configs/es_locale";
numeral.register("locale", "es", es_locale);
numeral.locale("es");
const App = ({ history }) => {
return (
<ConnectedRouter history={history}>
<Layout>
<Notifications></Notifications>
{routes}
</Layout>
</ConnectedRouter>
);
};
export default App;
Let me know if you need more code to guide me.
Thank you.
Related
All the styles on my project are defined inside css modules, and only recently I noticed that, on the production build generated by Nextjs, some of them are overridden by other styles (this would only make sense if they were defined on the same module, which is not the case). This breaks my app on production, but everything seems to work just fine on development.
Here's an example:
///mobile.module.css
.expandIcon {
width: 12px;
}
///mobile.tsx
import React from "react";
import styles from "./mobile.module.css";
import { NextPage } from "next";
import OpenInFullRoundedIcon from "#mui/icons-material/OpenInFullRounded";
const mobile: NextPage = () => {
return <OpenInFullRoundedIcon className={styles.expandIcon} />
};
export default mobile;
Here's how this class is loaded on development:
And here's how it's overridden on prod:
And to make it worse, the class overriding mine is not even defined on my project.
I'm somewhat new to NextJs, so I would appreciate any insight on this issue.
So, as pointed out by ali.zabetpour, the issue is related to how some external libraries's styles are prioritized over custom styles after building, in this case, Material ui/Mui.
Here is a link to Mui's docs that explains this in detail and offers a solution using their StyledEngineProvider component, which solved my problem:
https://mui.com/material-ui/guides/interoperability/#css-injection-order-3
I have an issue with Next.js. When I'm trying to import a node module,
the module uses the window object and Next.js is throwing an error: window is not defined.
The module is imported like this:
import * as widgets from 'survey-widgets';
widgets.autocomplete(Survey);
I guess Next.js dynamic imports will not work in my case. Is there any way of doing it?
Try deferring all the code that uses window or any other api that is restricted to the browser, in useEffect, because the code in useEffect only runs in the browser.
If you can't do that, then make an intermediary module which you will use to import survey-widgets and re-export what you need. So in the end, you import that intermediary module dynamically.
import * as widgets from 'survey-widgets
export default widgets
For anyone looking for the solution for this, I solved it with NextJs Dynamic imports with no SSR.
What I did instead is importing my top level component using dynamic import like this:
const MyComponent= dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
So the hello3 component will no longer be used in server side rendering and instead it will render on client side.
Then just use it like this:
<MyComponent/>
I would like to use CSS Houdini in a Next.js project I am building. I have installed, via yarn, both the CSS Houdini package I want to use along with css-paint-polyfill. I am following the webpack instructions here https://houdini.how/usage
Here is my component:
import 'css-paint-polyfill';
import workletURL from 'url-loader!css-houdini-lines';
import styles from './Separator.module.css';
CSS.paintWorklet.addModule(workletURL);
export default function Separator() {
return <div className={styles.separator} />;
}
I am getting the dreaded
error - ReferenceError: window is not defined
at /home/tithos/code/web/new-tim/node_modules/css-paint-polyfill/dist/css-paint-polyfill.js:1:239
I tried putting the import for css-paint-polyfill in a useEffect, but the throw another error. I even tried const DynamicComponent = dynamic(() => import('../components/hello')) from https://nextjs.org/docs/advanced-features/dynamic-import, but I did not know how to reference the library.
Has any one solved this?
Seems like CSS Paint Polyfill eagerly accesses window, which means it will throw an error when in an environment which has no window, such as server phase of Next. There are multiple things you can do.
Modify your next.config.js to stub the aforementioned module when for Webpack when isServer is true. You can follow this page of the Next docs for this.
Create a dynamic component that's only imported on the client (I see you've tried this, but it should have worked, so maybe if you shared what you did in this regard, I could work out what's wrong with your approach).
Create an issue and send in a PR to the repository where the Polyfill is hosted to lazily access window depending on whether it's available or not.
Using Webpack, I have this code:
import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
createApp(App).mount('#search-app')
On my website, I have a page for the search app that contains the <div id="search-app" /> to mount the root of the application to.
What I would like to know is, whether it's possible to somehow insert (preferably) some of the data from the page that includes the javascript file? There are a few things items I would like to include from the database, such as settings and search categories, and I'd like to avoid making an AJAX request for them if it can be helped.
Can it be helped or is there some way I can include this data inline at load time?
With Webpack, I don't quite understand how I can get access to App from the page that loads the javascript file, so that I can modify data before somehow passing it in to createApp(), or if it's even possible. Can I use import statements on a page that's loaded by the browser, or is this stictly a Webpack only (or similar) feature?
Many thanks in advance.
You can use createApp's second parameter to pass props.
import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
createApp(App, {myProp: "value"}).mount('#search-app')
docs
I am playing around with https://reactjs.net/ , and want to setup an application inside my existing ASP.NET MVC application.
I have made a couple of simple React applications using the "default installation template" inside Visual Studio, but not based on ReactJS.net and where the content is only a subpage.
However, if I take the tutorial template used as examples:
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
There are no importing React like: import * as React from 'react'; , which I am used to.
So my question is: why not? And when are you supposed to import React?
Because import React from 'react'; is required when you are trying to import npm packages. Reactjs.Net doesn't use npm dependency and you're required to put the CDNs in your view using <script src="">. Basically, you're importing React automatically when you use the CDNs