Just run npm i -g create-react-app@4.0.1

Here, my error was quite same except for version which was 4.0.3

I think this work on MacBook M1 too

<!-- Step 1 [READ THIS] --> <!--

Are you in the right place?

• For issues or feature requests related to the code in this repository file a Github issue.
  • If this is a feature request make sure the issue title starts with "FR:".
• For general technical questions, post a question on StackOverflow with the firebase tag.
• For general Firebase discussion, use the firebase-talk google group.
• For help troubleshooting your application that does not fall under one of the above categories, reach out to the personalized Firebase support channel.

-->

<!-- Step 2 -->

[REQUIRED] Describe your environment

• Operating System version: MacOS Big Sur 11.2
• Browser version: Firefox 86
• Firebase SDK version: 8.2.10
• Firebase Product: auth
• React: 17.0.1

<!-- Step 3 -->

[REQUIRED] Describe the problem

Steps to reproduce:

<!-- What happened? How can we make the problem occur? This could be a description, log/console output, etc. -->

Fails in Firefox

https://user-images.githubusercontent.com/7975158/110214232-f596c580-7ea3-11eb-8a30-183728d8e2c9.mov

Works in Safari !!!

https://user-images.githubusercontent.com/7975158/110214449-d0568700-7ea4-11eb-8a3e-3e59ae1dec82.mov

Relevant Code:

signInFirebasePopup is called with onClick, not asynchronously

const getAuthProvider = (
  providerId: "facebook" | "google" | "apple",
): Firebase.auth.AuthProvider => {
  switch (providerId) {
    case "facebook": {
      const provider = new Firebase.auth.FacebookAuthProvider();
      provider.addScope("public_profile");
      provider.addScope("email");
      return provider;
    }
    case "google": {
      const provider = new Firebase.auth.GoogleAuthProvider();
      provider.addScope("profile");
      provider.addScope("email");
      return provider;
    }
    default: {
      throw new Error("Invalid provider");
    }
  }
};

export const signInFirebasePopup = async (
  providerId: "facebook" | "google" | "apple",
): Promise<ExtractedFirebaseProfileData> => {
  try {
    const provider = getAuthProvider(providerId);
    // await reloadFirebaseUser(); // This causes errors, flow may fail because its asynchronous
    const userCredential = await Firebase.auth().signInWithPopup(provider);
    const profileData = extractProfileData(userCredential);

    return profileData;
  } catch (e) {
    await logoutFirebase(); // dump state
    throw e;
  }
};

I think you should write the complete command that is "npx create-react-app my-app"

🐞 Bug Report

Describe the bug

For this signature:

function pick<T extends Record<string, any>, K extends string> (obj: T, keys: F.AutoPath<T, K>[]): O.P.Pick<T, S.Split<K, '.'>>

this works:

however, adding a second key breaks the nested pick:

Reproduce the bug

// REPL or a link to your repository if applicable.
// A *self-contained* demonstration of the problem.

Is it possible to use TS Toolbelt in the typescript TS Playground? If so it's easy for me to replicate this. Otherwise I can set up a branch on my package if you like.

Possible Solution

I'm not sure!

Originally posted by @mesqueeb in https://github.com/millsp/ts-toolbelt/discussions/216

It happens that I forgot to distribute O.P utilities. I took the day to rewrite all of them. Nous you can do:

import {F, O, S} from 'ts-toolbelt'

declare function pick<T extends Record<string, any>, K extends string>(
    obj: T,
    keys: F.AutoPath<T, K>[]
): O.P.Pick<T, S.Split<K, '.'>>

type O = {
    a: {
        b: O
        c: 1
    }
}
const a = pick({} as O, ['a', 'a.b', 'a.b.a.c'])

🐞 Bug Report

Describe the bug

For this signature:

function pick<T extends Record<string, any>, K extends string> (obj: T, keys: F.AutoPath<T, K>[]): O.P.Pick<T, S.Split<K, '.'>>

this works:

however, adding a second key breaks the nested pick:

Reproduce the bug

// REPL or a link to your repository if applicable.
// A *self-contained* demonstration of the problem.

Is it possible to use TS Toolbelt in the typescript TS Playground? If so it's easy for me to replicate this. Otherwise I can set up a branch on my package if you like.

Possible Solution

I'm not sure!

Originally posted by @mesqueeb in https://github.com/millsp/ts-toolbelt/discussions/216

Is this the best place to receive updates on this issue? Would be awesome to get notified once the SDK is ready.

Hi @gaearon : Thank you for the comment, I want to test the dependency related security issues, that is why I used that Snyk tool, Is there any other approach you are following to detect the dependency related security issues.

Thank you,

Codecov Report

Merging #38 (6bc8452) into master (6d17e38) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master      #38   +/-   ##
=======================================
  Coverage   96.20%   96.20%           
=======================================
  Files           5        5           
  Lines        1581     1581           
  Branches       61       61           
=======================================
  Hits         1521     1521           
  Misses         59       59           
  Partials        1        1           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 6d17e38...b9915a9. Read the comment docs.

This PR was generated using Autosynth. :rainbow:

Synth log will be available here: https://source.cloud.google.com/results/invocations/2812cef8-9404-4275-bb51-8c6dafc1bc6f/targets

• [ ] To automatically regenerate this PR, check this box.

PiperOrigin-RevId: 361273630 Source-Link: https://github.com/googleapis/googleapis/commit/5477122b3e8037a1dc5bc920536158edbd151dc4

<!--

Thank you for contributing to the Firebase community!

Have a usage question?

We get lots of those and we love helping you, but GitHub is not the best place for them and they will be closed. Here are some resources to get help:

• Start with the quickstart: https://github.com/firebase/reactfire/blob/master/docs/quickstart.md
• Go through the guide: https://github.com/firebase/reactfire/blob/master/docs/guide.md
• Read the full API reference: https://github.com/firebase/reactfire/blob/master/docs/reference.md
• Try out some examples: https://github.com/firebase/reactfire/blob/master/examples/README.md

If the official documentation doesn't help, try asking through our official support channels:

https://firebase.google.com/support/

Please avoid double posting across multiple channels!

Think you found a bug?

Yeah, we're definitely not perfect! Please use the bug report template below and include a minimal repro when opening the issue.

Have a feature request?

Great, we love hearing how we can improve our products! Just remove the template below and provide an explanation of your feature request. Provide code samples if applicable. Try to think about what it will allow you to do that you can't do today? How will it make current workarounds straightforward? What potential bugs and edge cases does it help to avoid?

-->

Version info

<!-- What versions of the following libraries are you using? Note that your issue may already be fixed in the latest versions. -->

React: 17

Firebase: 8.2.10

ReactFire: 3.0.0-rc.0

Test case

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import "firebase/auth";
import "firebase/firestore";
import {
  FirebaseAppProvider,
  useFirestore,
  useFirestoreDocData,
} from "reactfire";

function TestComponent() {
  const userRef = useFirestore().collection("users").doc("test");

  const { data: user, status } = useFirestoreDocData<any>(userRef);

  if (status !== "success") return <></>;

  return <>testing</>;
}

test("renders user", async () => {
  render(
    <FirebaseAppProvider
      firebaseConfig={config}
    >
      <TestComponent />
    </FirebaseAppProvider>
  );

  await waitFor(() => expect(screen.getByText("testing")).toBeInTheDocument());

  screen.debug();
});

Steps to reproduce

1. Use a standard create-react-app template
2. Setup a test similar to the one above
3. Run it

Expected behavior

Test should pass

Actual behavior

Error: Uncaught [TypeError: this.timerId.unref is not a function]
        at reportException (C:\Users\Matt\Dev\reactfire-test\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:62:24)
        at Timeout.task [as _onTimeout] (C:\Users\Matt\Dev\reactfire-test\node_modules\jsdom\lib\jsdom\browser\Window.js:396:9)
        at listOnTimeout (internal/timers.js:554:17)
        at processTimers (internal/timers.js:497:7) TypeError: this.timerId.unref is not a function
        at BackoffTimeout.unref (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\backoff-timeout.ts:117:18)
        at new ResolvingLoadBalancer (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\resolving-load-balancer.ts:199:25)
        at new ChannelImplementation (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\channel.ts:242:34)
        at new Client (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\client.ts:146:30)
        at new ServiceClientImpl (C:\Users\Matt\Dev\reactfire-test\node_modules\@grpc\grpc-js\src\make-client.ts:128:3)
        at GrpcConnection.Object.<anonymous>.GrpcConnection.ensureActiveStub (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\platform\node\grpc_connection.ts:90:25)
        at GrpcConnection.Object.<anonymous>.GrpcConnection.openStream (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\platform\node\grpc_connection.ts:175:23) 
        at PersistentListenStream.Object.<anonymous>.PersistentListenStream.startRpc (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\remote\persistent_stream.ts:571:28)
        at PersistentListenStream.Object.<anonymous>.PersistentStream.startStream (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\remote\persistent_stream.ts:443:24)
        at call (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\firestore\src\remote\persistent_stream.ts:420:16)
        at call (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:826:22)
        at goog.Promise.invokeCallback_ (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:1166:5)
        at executeCallback_ (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:1140:5)
        at D.call [as gc] (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\promise\promise.js:1111:5)
        at xc (C:\Users\Matt\Dev\reactfire-test\node_modules\@firebase\node_modules\google-closure-library\closure\goog\async\run.js:124:7)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:53:34)
      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:28)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:396:9)

I've also raised issues elsewhere. I believe the problem is that Jest is loading Node dependencies and not the browser ones. I would be happy to find a workaround that lets me keep using create-react-app if the issues cant be fixed.

https://github.com/firebase/firebase-js-sdk/issues/4552 https://github.com/facebook/create-react-app/issues/10626

Describe the bug

When creating a react-typescript app using

npx create-react-app . --template typescript

The error:

yarn run v1.22.5
$ react-scripts start
/home/aditya/all/yt/twitter/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/home/aditya/all/yt/twitter/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/aditya/all/yt/twitter/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Messenger browser supports no more than 1 tab at a time. So if you use signInWithPopup it removes the main page and takes you to the auth provider page which later on can't figure how to go back to the previous page. Consider using signInWithRedirect instead. It worked for me. Thanks you.... This will work in single tab browsers.. firebase.auth().signInWithRedirect(provider); And this one won't.. firebase.auth().signInWithPopup(provider);

Thanks for your answer the other day!

Currently I have this issue:

Type instantiation is excessively deep and possibly infinite.ts(2589)

When using this signature:

function pick<T extends Record<string, any>, K extends string> (obj: T, keys: F.AutoPath<T, K>[]): O.P.Pick<T, S.Split<K, '.'>>

It works like a charm if I try it with a payload like so:

const doc = { name: 'n1', id: '1', filled: true, notpicked: false }
const res = pick(doc, ['name', 'filled', 'id'])

however, it gives me that infinite error when the keys array is empty:

const res = pick(doc, [])

At the moment AutoPath only takes a single string:

function pick<T extends Record<string, any>, K extends string> (obj: T, path: F.AutoPath<T, K>): O.P.Pick<T, S.Split<K, '.'>>

🐞 Bug Report

Describe the bug

For this signature:

function pick<T extends Record<string, any>, K extends string> (obj: T, keys: F.AutoPath<T, K>[]): O.P.Pick<T, S.Split<K, '.'>>

this works:

however, adding a second key breaks the nested pick:

Reproduce the bug

// REPL or a link to your repository if applicable.
// A *self-contained* demonstration of the problem.

Is it possible to use TS Toolbelt in the typescript TS Playground? If so it's easy for me to replicate this. Otherwise I can set up a branch on my package if you like.

Possible Solution

I'm not sure!

Yes, it works in the playground. AutoPath cannot work on arrays like this, the inference won't work. Please, set a playground up and I'll look what I can do.

What is the profit of such a solution?

I've added a CRA webpack 5 brach/draft pr for this work in case anyone want to test - https://github.com/facebook/create-react-app/pull/10656

Webpack 5 update Includes the work listed in #9994

Additional changes:

• persistent cache
• upgrade to dev server ´v4 (still beta)
• terser is now included in webpack

Known issues:

• currently the WebpackManifestPlugin is commented out due to "path undefined" error (feel free to investigate)
• It feels like webpack emits compile twice - triggers a re print out on the screen (might be due to hook behavior change)

Things I wanted to do but left out:

• extract loaders/plugins etc. into separate files to make the main webpack config clean / easier to read
• allowed domains - we should allow configuration and wildcard support imho
• print out performance stats of the build - really hard to track / compare build speeds - eg. detecting regression
• fix the test suite or comment out failing tests - eg. the pnp test is currently failing on master not sure if this pr. makes things better or worse

Credit include @andriijas, @sebinsua and @jasonwilliams (let me know if I missed out on any)

me too, same thing

<!-- Requirements: please go through this checklist before opening a new issue -->

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [ ] Provide a link to the affected event from your Sentry account

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node (raven for node)
• [ ] other:

Version:

6.0.2

Description

I'm trying to use setContext after some async code runs but it doesn't show in the performance page in my account. This doesn't work:

Sentry.init({...});

async function stall(stallTime = 3000) {
    await new Promise(resolve => setTimeout(resolve, stallTime));
}

stall().then(() => {
    Sentry.setContext("myContext", {
        "key": "value"
    });
});

However doing it synchronously does:

Sentry.init({...});

Sentry.setContext("myContext", {
    "key": "value"
});

I think this was previously discussed here #497 but it doesn't look like there was a workaround for it.

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version: 17.0.1

Steps To Reproduce

1. Throw in an effect cleanup
2. Try to catch it when wrapped in act()

Link to code example: React 16 React 17

I also tested it locally and jest and couldn't catch the error as well.

The current behavior

The error is uncatchable and does not include the component stack ("The above error occurred").

The expected behavior

The error is catchable and does include the component stack i.e. React 16 behavior.

Context

I understand that the cleanup is now async but it's still flushed in act() so I would expect that an error thrown is catchable.