Redux Saga wierd behavior on Join effect - redux

const tasks = yield [fork(method1), fork(method2)]
Working
yield tasks.map(task => join(task))
Not working and showing error argument 0 is not a valid Task object
yield tasks.map(join)
Any body has idea why it is not working. I am using Babel ES6 transpiler so this issue might be related to transpiler thing.

Related

Using next/dynamic to Avoid Window Error But Still Getting Window Error

Would really appreciate some help with this, have been trying to figure it out for a while.
I'm getting the below error. After some research, I figured out that you need to use "next/dynamic" with { ssr: false } to load modules dependent on window (since it's only avail in browser and not on server).
I added the below import to my app, but still getting the same error. Is there something wrong with the below and/or is there other configuration needed to make the dynamic loads function properly?
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
...
UPDATE
So, it looks like I had to dynamic import the component where I was trying to use the component made with this import ... which seems redundant / i feel like I'm still doing something wrong.
So, now it's working, but I'm -
using const Chart = dynamic(() => import("react-apexcharts"), { ssr: false }); to build a component in ../barChart2.js
i'm again dynamic importing the component in barChart2.js when trying to use it (e.g., with const BarChart2 = dynamic(() => import('page-sections/charts/barChart2'), { ssr: false });
Is this actually how you are supposed to do it? Or is there a better way?
Didn't want to submit this as an answer, as I don't believe this is really the "correct" way even though it technically works.

Does Next.js 11.0.0 support barrel(index) files?

Barrel/index files seem to create issues when used with next.js. It doesn't seem established if it's purely a webpack issue or both webpack and next.js
According to this issue tree shaking stops working if we use barrel files. I also created a small repo where I have an issue with an index file. Not sure if it's a tree shaking issue.
Steps to reproduce the issue:
npm install
npm run dev
in browser, visit http://localhost:3000/about-pro, expect to see blank page with errors or warnings in browser's console
go to server's console(where you run npm run dev)
see an error of sort "Module not found: Can't resolve 'fs'" (1) (2) (3)
1- this comes from the await serialize in getAboutPageData file. Which itself is only called within getStaticProps
2 - googling for this issue, you'll find solutions such as modifying next.config.js file. It still doesn't work. Feel free to uncomment the next.config.js file and see for yourself
3 - to "solve" the issue, go to about-pro.tsx, in the imports, import AboutPage from its own file instead of from the barrel/index file
If I only import getAboutPageData from the barrel/index file, then it works fine. But as soon as I import e.g. AboutPage from it, it starts throwing unrelated issues.
Can I continue using barrel/index files with next.js and if yes, is there a simple and intuitive way to do that?
The issue is not in the barrel files themselves but in the library that you're using combined with barrel files.
If you take a look at the readme file https://github.com/hashicorp/next-mdx-remote#examples you can find a warning:
IMPORTANT: Be very careful about putting any mdx-remote code into a separate "utilities" file. Doing so will likely cause issues with nextjs' code splitting abilities - it must be able to cleanly determine what is used only on the server side and what should be left in the client bundle. If you put mdx-remote code into an external utilities file and something is broken, remove it and start from the simple example above before filing an issue.
So in order to make your code work you need to remove the export of getAboutPageData from your barrel file, like this:
export { default as AboutPage } from './AboutPage';
// export { default as getAboutPageData } from './getAboutPageData';
and move the code that uses the library inside the about-pro.tsx file.
import { AboutPage } from '../modules/about';
import { serialize } from 'next-mdx-remote/serialize';
const AboutPro = (props) => {
return <AboutPage {...props} />;
};
export const getStaticProps = async () => {
const serializedContent = await serialize(`# Header1`);
const data = serializedContent;
return { props: {} };
};
export default AboutPro;
I think the issue is that the modules imported in barrel files are executed both client and server side. Probably removing side effects from the barrel file could solve the issue, but I don't know enough about Next.js to be able to do it correctly.

Module loading problems in Storybook in React (Cannot access 'some_variable' before initialization)

I am having big problems with Storybook at the moment with respect to modules loading correctly.
I can't really provide a self contained example, because the problems seem so erractic and hard to predict.
Basically storybook is being run and it is trying to import files, however something is going wrong in this step. I am guessing there is some error in one of the dependencies down the line, or that there is a circular dependency somewhere.
I am getting this error in all kinds of places :
ReferenceError: Cannot access 'SOMETHING' before initialization
Basically my storybook file looks something like this :
storiesOf('storybook test', module)
.addDecorator(withKnobs)
.add('a story ', () => {
return (
<div>
<Provider store={store}>
<HashRouter pathname={"asdf"}>
<CSVImportFlow
step={"edit"}
entitySchemas={{}}
/>
</HashRouter>
</Provider>
</div>
)
})
And these Reference Errors appear based on something being imported.
In my case, I was using propTypes instead of PropTypes, small p was an issue.

How to fix error "Ambiguous use of 'increment'" on iOS Firestore increment()

I receive a compiler error when trying to use firebase FieldValue.increment(1) in iOS using swift. The error only says "Ambiguous use of 'increment'"
I have updated all my pods to the current versions of all firebase pods used. More specifically I am on Firebase(5.20.2) and FirebaseFirestore (1.2.1).
My code (below) is almost exactly the same as the example in the docs Seen at the bottom of this page
How can I fix this error and get the app to compile?
let docRef = db.collection("metadata").document("permanentConversions")
docRef.updateData([
"total": FieldValue.increment(1)
])
As noted in the comments, the "Ambiguous use of 'increment'" error is solved for me by changing the code in the example to
FieldValue.increment(Int64(1)).
The compiler provides an option of double or int64 for the increment operator and I guess it does not know which one to choose.

Legacy solution with Aurelia

I have an old ASP.NET solution that I have introduced Aurelia to. In some aspx pages I am starting Aurelia, and my main.ts looks like this:
export function configure(aurelia) {
aurelia.use
.basicConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot('/Controls/Warehouse/ProductPurchaseSuggestion/AureliaSource/app.js'));
}
In this manner, everytime we use Aurelia, we have to start it up like this.
I was just composing in my first template and had to write this:
<compose view-model="/Controls/Warehouse/ProductPurchaseSuggestion/AureliaSource/mergePopup" model.bind="{ demo: 'test' }"></compose>
To compose it in. I would have thought that setRoot would make it possible for me to write:
<compose view-model="mergePopup" model.bind="{ demo: 'test' }"></compose>
If I do it like in the last example here (how I want it to work), then I get the following error message in the console: Uncaught (in promise) Error: No view model found in module "mergePopup".
Is there any way of being able to do it in this manner?

Resources