We Keep Coding

SWR size, setSize do not exist on type SWRResponse<any, any>?

I've been testing Vercel's SWR lately, it looks like the best lib for Next.js data fetching. I have some trouble making it work with TypeScript though.
As in docs I'm trying to build a infinite loader using this code:
const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
getKey, fetcher?, options?
)
But I'm getting those errors:
Property 'size' does not exist on type 'SWRResponse<any, any>'.ts(2339)
Property 'setSize' does not exist on type 'SWRResponse<any, any>'.ts(2339)
The rest of the arguments seem to be there, only the last two aren't. What am I missing here? It works perfectly fine without TypeScript. I have both latest versions of Next and SWR. I've tried following the tutorial and adding getKey function, but without luck, the error always occurs.
Any hints?

The fact that TypeScript identifies the return type as SWRResponse indicates that you're probably importing the default export (useSWR hook) of swr rather than useSWRInfinite hook.
import useSWR from 'swr'
Make sure to import useSWRInfinite from its named export.
import { useSWRInfinite } from 'swr'
From version 1.x, the syntax to import useSWRInfinite changed slightly. You should now use:
import useSWRInfinite from 'swr/infinite'

Get past import/no-named-as-default lint error without config changes

I am getting no-named-as-default eslint error.
Having issues where I need Redux functionality and I can't just go for named imports.
Seen similar queries here but they all involve config changes like amending the eslint file
or things to do with Babel configs.
Example: How do I resolve eslint import/no-named-as-default
Is there a way to achieve it in code itself?
Cos I can't change any of the configs. I am ok to forgo default import all together and use 2x named imports (maybe 1 with an alias?).
But I can't seem to do away with default. The bottom export complains when I remove it.
Also unsure if eslint will start complaining if there is no default imports on a Component.
This is the component which the eslint complains about if I import this as default.
export const IndicatorPage = ({setData}) => {
// logic
}
const mapDispatchToProps = {
setData: setIndicatorData
}
// ide complains if I remove this default. Plus even if I could drop default,
// wondering if that would be another lint error for not having defaults
export default connect(null, mapDispatchToProps)(IndicatorPage);
Example when I import this in another Component.
This makes eslint happy but it breaks my redux functionality.
import { IndicatorPage } from './IndicatorPage';
This makes Redux work properly but now eslint complains...
import IndicatorPage from './IndicatorPage';

React, error importing file from root folder

The error (Uncaught Error: Cannot find module '.../action/cartActions') occurs at the cartDetails.js file.
I am attaching the file structure screenshot below,
Import statement = import cartAction from '.../action/cartActions';
The following action's are getting uploaded from cartActions export default {add,remove,increment,decrement,removeall}
As answers suggested,I tried removing one dot from import but hit with same error

You typed one dot too much, should be ../action/cartActions

to show the loading bar till the fetched

I am trying to show the loading bar until it is fetched. so I chose to use the material UI loading bar. I created this method to show the loading bar renderProgressBar.
But when I was trying to render It was giving this error:
invariant.js:42 Uncaught Invariant Violation: Element type is
invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
I tried debugging in the console but nothing helped.
can you tell me how to fix it by using the code snippet below?
https://codesandbox.io/s/redux-async-actions-hntd8
renderProgressBar = () => {
console.log(
'store.getState().fetchingMessage---->',
store.getState().fetchingMessage
);
if (store.getState().fetchingMessage) {
console.log(
'inside if rstore.getState().fetchingMessage---->',
store.getState().fetchingMessage
);
return (
<div
>
<LinearProgress />
</div>
);
}
};

LinearProgress is not being imported correctly that's why you are getting the Invariant Violation.
As stated here: https://material-ui.com/api/linear-progress/
You want to use either of these imports:
import LinearProgress from '#material-ui/core/LinearProgress';
// or
import { LinearProgress } from '#material-ui/core';
You seem to have import {LinearProgress} from '#material-ui/core/LinearProgress'; which doesn't return undefined because it's not exporting a named module called LinearProgress under core folder.

Hey #zf I've refactored a little of your codesandbox and i found mainly two issues:
The first one is as we said before that you are importing LinearProgress the wrong way.
The other issue that ive found is that you have unmatching versions of react and reactDOM.
Then i've just added the calls to get the clases and the styles and there you got it, check the codesandbox and feel free to ask questions:
https://codesandbox.io/s/redux-async-actions-i4vqf
Remem,ber to read the docs when you are stuck, this is the main flow to solve your issues. LinearProgressDocs

react-localize-redux cannot read property 'map' of undefined

I'm trying to load translations from a JSON file with react-localize-redux and I keep getting this error. This is all fairly new to me so I apologise if it is something obvious. As fair as I can tell from reading documentation this "should" work?
The error message I am receiving:
translate.js
import { combineReducers, createStore } from 'redux'
import { localizeReducer, initialize, addTranslationForLanguage, getTranslate } from 'react-localize-redux'
import translationsEn from '../../../nls/en.json'
const localeStore = createStore(combineReducers({
locale: localizeReducer
}))
const languages = ['en']
localeStore.dispatch(initialize(languages))
localeStore.dispatch(addTranslationForLanguage(translationsEn, 'en'))
export default getTranslate(localeStore.getState().locale)
and in my component:
import translate from '../state/translate/translate'
...
<span className='node-output-schema__title'>{translate('outputSchema.title')}</span>
Any ideas to what might be going wrong?

it seems like you mixed some different frameworks inside here.
The localisation package is called - react-localize-redux.
But inside your error logs I can see that you are using some angular.
Also I just checked the documentation from the react-localize-redux package and it seems like you are working with an outdated version.
For me it should be enough to just provide a Provider to your app and afterwards use the higher order component (import { withLocalize } from "react-localize-redux";
)
Also I would recommend to use this package, which is a lot easier to handle (and indeed I used it for a project myselft)
react-18next (https://github.com/i18next/react-i18next)

this error rases because your property is undefined, so check your error and get the exact line(you can find the error on the console tab of your browser) and check which property used there and check where you filled that property if you didn't fill your property then set it