text:
Svg fill and stroke since 2.1.4

Is this a bug report?
Yes

Did you try recovering your dependencies?

yes
Environment

System:
OS: Linux 4.18 Ubuntu 18.10 (Cosmic Cuttlefish)
CPU: x64 AMD Ryzen 7 2700X Eight-Core Processor
Binaries:
Node: 10.15.1 - /usr/bin/node
Yarn: 1.13.0 - /usr/bin/yarn
npm: 6.4.1 - /usr/bin/npm
Browsers:
Chrome: 72.0.3626.119
Firefox: 65.0
npmPackages:
react: ^16.8.3 => 16.8.3
react-dom: ^16.8.3 => 16.8.3
react-scripts: 2.1.5 => 2.1.5
npmGlobalPackages:
create-react-app: Not Found
Steps to Reproduce

Migrate to 2.1.3 to 2.1.4 or 2.1.5

Expected Behavior

Svg can take fill color and stroke color
Actual Behavior

Since v2.1.4, any svg loaded as component or img , in our app have strange behavior . Fill and Stroke color doen't work like before and our logo imported as img is loaded full size and be resizing after page loading .

We upgraded SVGR in 2.1.4 which is likely the cause of this. Can you please provide a minimal reproduction or see if you're able to reproduce the issue in the SVGR Playground: https://www.smooth-code.com/open-source/svgr/playground/

With this code i'am able to reproduce the problem , i can't change the fill or stroke props when i use the SvgComponent. I'am using TypeScript, SASS, and ReactStrap for the UI.

import React from 'react';

const SvgComponent = (props: any) => (
  <svg viewBox="0 0 11.92 12.8" {...props}>
    <title>{'gestion_utilisateur_blanc'}</title>
    <path
      d="M11.46 12.8a.46.46 0 0 0 .46-.46v-1.55a1.55 1.55 0 0 0-.57-1.2 18.44 18.44 0 0 0-3.11-2V5.83a1.48 1.48 0 0 0 .46-1.07V2.5A2.51 2.51 0 0 0 6.2 0h-.49a2.5 2.5 0 0 0-2.49 2.5v2.26a1.51 1.51 0 0 0 .45 1.07v1.74a18.06 18.06 0 0 0-3.1 2A1.52 1.52 0 0 0 0 10.79v1.55a.45.45 0 0 0 .46.46"
      fill="#fff"
      data-name="Calque 2"
    />
  </svg>
);

export default SvgComponent;

If that's the way you're using SVGs then they're not going through SVGR at all. In that case I'm not sure what would have changed to cause this issue. I took a quick look at the changelog but nothing stands out.

The issue you describe with the logo loading full size and then resizing after the page has loaded is related to this: https://github.com/facebook/create-react-app/pull/5713. We've already reverted that change and that will be released in 2.1.6. I'm not sure if that will fix the fill and stroke issue though.

Thanks for your reply.
The code I placed above was an example of the playground that I copied into our application to reproduce the issue. To be perfectly exact I use the svg like this:
import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { ReactComponent as TableauBordBlanc } from '../_svgs/tableau_bord_blanc.svg';
import { ReactComponent as DetailsSiteBlanc } from '../_svgs/details_point_collecte_blanc.svg';
import { ReactComponent as HistoriqueAlarmeRadioBlanc } from '../_svgs/historique_alarme_radio_vert.svg';
import { ReactComponent as CompteurBlanc } from '../_svgs/compteur_vert.svg';
import { ReactComponent as PdiBlanc } from '../_svgs/pdi_blanc.svg';
import { ReactComponent as Recherche } from '../_svgs/loupe_bleu.svg';
import { ReactComponent as AlarmeVert } from '../_svgs/alarme_vert.svg';
import { getActiveClassByPath } from '../_helpers';
import { User } from '../_entities/user';

interface Props {
  user: User;
  locations: any;
  location: any;
}
interface State {
  isOpen: boolean;
}

class SidebarLocationComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

  toggle = () => {
    const { isOpen } = this.state;
    this.setState({
      isOpen: !isOpen,
    });
  };

  couldEditLocation = () => {
    const { user } = this.props;

    if (user.role.name === 'ADMIN') {
      return true;
    }

    if (user.role.name === 'CLIENT') {
      return true;
    }

    // vérifier les permissionwithRouter
    return false;
  };

  couldEditDashboard = () => {
    const { user } = this.props;

    if (user.role.name === 'ADMIN') {
      return true;
    }

    if (user.role.name === 'CLIENT') {
      return true;
    }

    // vérifier les permissions
    return false;
  };

  render() {
    const { isOpen } = this.state;
    const { locations, location } = this.props;
    return (

        <Navbar className="sidebar-location-wrapper" color="dark" dark expand="md">
          {locations.fetchedLocation && (

              <NavbarToggler onClick={this.toggle} />
              <Collapse isOpen={isOpen} navbar>

                  <NavbarBrand href={`/locations/${locations.fetchedLocation.id}`} className="center">
                    {locations.fetchedLocation.name}
                  </NavbarBrand>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'details')}
                      href={`/locations/${locations.fetchedLocation.id}/details`}
                    >
                      <DetailsSiteBlanc fill="currentcolor" stroke="currentcolor" height="1em" width="1em" /> Détails du
                      site
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'dashboards')}
                      href={`/locations/${locations.fetchedLocation.id}`}
                    >
                      <TableauBordBlanc fill="currentcolor" stroke="currentcolor" height="1em" width="1em" /> Tableaux
                      de bords
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'alarms')}
                      href={`/locations/${locations.fetchedLocation.id}/alarms`}
                    >
                      <AlarmeVert fill="currentcolor" stroke="currentcolor" height="1em" width="1em" /> Alarmes
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'meters')}
                      href={`/locations/${locations.fetchedLocation.id}/meters`}
                    >
                      <CompteurBlanc fill="currentcolor" stroke="currentcolor" height="1em" width="1em" /> Compteurs
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'virtuals')}
                      href={`/locations/${locations.fetchedLocation.id}/virtuals`}
                    >
                      <CompteurBlanc fill="#2c303b" stroke="currentcolor" height="1em" width="1em" /> Compteurs virtuels
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'radios')}
                      href={`/locations/${locations.fetchedLocation.id}/radios`}
                    >
                      <HistoriqueAlarmeRadioBlanc fill="currentcolor" stroke="currentcolor" height="1em" width="1em" />{' '}
                      Radios
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      fill="currentcolor"
                      stroke="currentcolor"
                      height="1em"
                      width="1em"
                      className={getActiveClassByPath(location.pathname, 'pdi')}
                      href={`/locations/${locations.fetchedLocation.id}/pdi`}
                    >
                      <PdiBlanc fill="currentcolor" stroke="currentcolor" height="1em" width="1em" /> PDI
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={getActiveClassByPath(location.pathname, 'search')}
                      href={`/locations/${locations.fetchedLocation.id}/search`}
                    >
                      <Recherche fill="currentcolor" stroke="currentcolor" height="1em" width="1em" /> Recherche
                    </NavLink>
                  </NavItem>

              </Collapse>

          )}
        </Navbar>

    );
  }
}

function mapStateToProps(state: any) {
  const { authentication, dashboards, locations } = state;
  const { user } = authentication;
  return {
    user,
    dashboards,
    locations,
  };
}

const mapping: any = connect(mapStateToProps)(SidebarLocationComponent);

const connectedSidebarLocation = withRouter(mapping);
export default connectedSidebarLocation;

The same svg file is used multiple times in the application and I change these properties.
svg.zip

In that case this does appear to be related to SVGR. Have you tried reproducing the issue in the SVGR playground that I linked to above? It would help to know for sure if that's where the issue is.

I don't understand how the playground work's (I must be a little silly) ...

We tried to re-export our svgs and the problem occurs again, I noticed that the same svg have a different behavior with the background and stroke props (with same props) in our app between two page. If i export the playground svg component , as i say before, the problem still here. Work perfectly with 2.1.3 but not with 2.1.4 - 2.1.5

The issue of fill and stroke  is still here with new version .

I don't have # in url so i don't understand your comment , sorry.

in your code (SVG) it replaces fill="#fff" by fill="%23fff".

Unfortunatly it doesn't seems to work, we have different rendering in firefox and chrome with the same problem type

Here is our package.json, maybe it can help.
{   "name": "frontend",   "version": "0.1.0",   "private": true,   "dependencies": {     "@types/chart.js": "^2.7.42",     "@types/classnames": "^2.2.7",     "@types/crypto-js": "^3.1.43",     "@types/detect-browser": "^3.0.0",     "@types/enzyme": "^3.1.16",     "@types/enzyme-adapter-react-16": "^1.0.3",     "@types/google-map-react": "^0.23.10",     "@types/jest": "^24.0.0",     "@types/jwt-decode": "^2.2.1",     "@types/lodash": "^4.14.120",     "@types/lodash.debounce": "^4.0.4",     "@types/node": "^10.12.21",     "@types/react": "^16.8.2",     "@types/react-dom": "^16.8.0",     "@types/react-grid-layout": "^0.16.7",     "@types/react-redux": "^7.0.1",     "@types/react-router-dom": "^4.3.1",     "@types/react-scroll": "^1.5.4",     "@types/react-select": "^2.0.11",     "@types/reactstrap": "^7.1.3",     "@types/redux-logger": "^3.0.6",     "acorn": "^6.0.7",     "availity-reactstrap-validation": "^2.5.0",     "babel-polyfill": "^6.26.0",     "bootstrap": "^4.2.1",     "chart.js": "^2.7.3",     "chartjs-plugin-empty-overlay": "^1.0.2",     "classnames": "^2.2.6",     "convert-array-to-csv": "^1.0.4",     "core-js": "^2.6.3",     "crypto-js": "^3.1.9-1",     "date-fns": "^2.0.0-alpha.26",     "detect-browser": "^4.1.0",     "documentation": "^9.1.1",     "enzyme": "^3.8.0",     "enzyme-adapter-react-16": "^1.9.1",     "eslint-plugin-flowtype": "^3.2.1",     "google-maps-react": "^2.0.2",     "history": "^4.7.2",     "jquery": "^3.3.1",     "js-file-download": "^0.4.4",     "jsdoc": "^3.5.5",     "json-loader": "^0.5.7",     "jwt-decode": "^2.2.0",     "lodash": "^4.17.11",     "lodash.debounce": "^4.0.8",     "moment": "^2.24.0",     "node-js-marker-clusterer": "^1.0.0",     "node-sass": "^4.11.0",     "randexp": "^0.5.3",     "react": "^16.8.0",     "react-app-polyfill": "^0.2.0",     "react-bootstrap-table-next": "^2.1.0",     "react-bootstrap-table2-editor": "^1.2.2",     "react-bootstrap-table2-filter": "^1.1.2",     "react-bootstrap-table2-overlay": "^1.0.0",     "react-bootstrap-table2-paginator": "^2.0.1",     "react-bootstrap-table2-toolkit": "^1.2.0",     "react-chartjs-2": "^2.7.4",     "react-csv": "^1.0.19",     "react-datepicker": "^2.1.0",     "react-dom": "^16.8.0",     "react-grid-layout": "^0.16.6",     "react-icons": "^3.3.0",     "react-places-autocomplete": "^7.2.0",     "react-redux": "^6.0.0",     "react-resizable": "^1.7.5",     "react-router": "^4.3.1",     "react-router-dom": "^4.3.1",     "react-scripts": "2.1.3",     "react-scroll": "^1.7.10",     "react-select": "^2.3.0",     "react-step-wizard": "^5.0.0",     "react-sticky-fill": "^0.8.4",     "reactstrap": "^7.1.0",     "redux": "^4.0.1",     "redux-logger": "^3.0.6",     "redux-thunk": "^2.3.0",     "tslint": "^5.12.1",     "typeface-roboto": "0.0.54",     "typescript": "^3.3.1",     "whatwg-fetch": "^3.0.0"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test --env=jsdom",     "lint": "eslint src",     "eject": "react-scripts eject",     "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",     "doc": "documentation build src/** -f html -o docs"   },   "proxy": "http://localhost:8080",   "devDependencies": {     "babel-eslint": "^9.0.0",     "eslint-config-airbnb": "^17.1.0",     "eslint-config-airbnb-base": "^13.1.0",     "eslint-config-prettier": "^4.0.0",     "eslint-config-react-app": "^3.0.6",     "eslint-plugin-import": "^2.16.0",     "eslint-plugin-jsx-a11y": "^6.2.1",     "eslint-plugin-prettier": "^3.0.1",     "eslint-plugin-react": "^7.12.4",     "husky": "^1.3.1",     "lint-staged": "^8.1.3",     "prettier": "1.16.4",     "pretty-quick": "^1.10.0"   },   "browserslist": [     ">0.2%",     "not dead",     "not ie <= 9",     "not op_mini all"   ],   "protocol": "http",   "webpackProtocol": "",   "husky": {     "hooks": {       "pre-commit": "pretty-quick --staged"     }   } }

Can you try the latest release and see if this has improved? If not please open a new issue.

authors: CarlDemusDioptase ghost iansu oxxfreddyxxo


text:
unable to create the react app

If you have a general question about Create React App or about building an app with Create React App we encourage you to post on our Spectrum community instead of this issue tracker. The maintainers and other community members can provide help and answer your questions there: https://spectrum.chat/create-react-app
If you're looking for general information on using React, the React docs have a list of resources: https://reactjs.org/community/support.html

i'm unable to create the app the whole process is getting stopped after "run npm audit fix "like shown in the image above.Please kindly provide me a solution for this and let me know how to fix this issue......
If you've discovered a bug or would like to propose a change please use one of the other issue templates.
Thanks!

Where are you running this at? How are you running it? Does the user running command actually have permissions in the folder?

source: gharchive/issue

authors: eddiemonge vaishnavichintapalli

repo: facebook/create-react-app

license: MIT

license_type: permissive

license_source: github-api


text:
Update dotenv to 5.0.0

Update dotenv to address the bug in #4002
This should probably also be backported to 1.x.

Rebase please?

Should be ready to go now.

Did 5.x have breaking changes that impact our users?

I believe this bug fix is the primary change. Everything else appears to be documentation improvements, error message improvements and things like that.

source: gharchive/pull-request

authors: gaearon iansu


text:
chore(algolia): upgrade to the new major

Pre-flight checklist

[x] I have read the Contributing Guidelines on pull requests.
[ ] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
[ ] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Algolia has released a new major version of the javascript search client.
Since DocSearch is now using the new version, we can also upgrade the docusaurus-theme-search-algolia package to use the latest version of the js client and of DocSearch.
There are a few changes to do in the code to accommodate the new version but nothing breaking, it's mostly around types and imports.
Test Plan

The existing tests are enough to test that every works, I also tried the local website and the search is working, with the user agent containing the latest version.
Test links

Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/
Related issues/PRs

Thanks @millotp
Since this is a new version, where can I check the breaking changes that potentially affect us?
This seems a bit risky to release this as a minor/patch release.

There are a few changes to do in the code to accommodate the new version but nothing breaking, it's mostly around types and imports.

That's how it affects our internal code. But we also expose some things as part of a public API through themeConfig options:
https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-search-algolia/src/validateThemeConfig.ts
https://docusaurus.io/docs/search#connecting-algolia
I'm particularly worried of possible breaking changes to this type:
import type { SearchOptions } from '@algolia/client-search';

Are there any to be aware of?

@millotp I've seen your Algolia compatibility PR.
We could merge this for the next minor, but we could also delay it to the next major. I plan to do a major with a few technical breaking changes (deps/runtime upgrades like Node and TS) so maybe it's a better time to upgrade Algolia as well.
Is there a good reason for this to land in v3 and not v4? Does anything regarding the UI or behavior change? If that's the case we may prefer keeping it for v4 and strict compatibility is not a problem. Also, from my perspective I don't really have a reasonable way to verify that the upgrade is retro-compatible 😅

Since this is a new version, where can I check the breaking changes that potentially affect us?

Hey @slorber, thanks for the review, here is a brief page about all the breaking changes in v5: https://www.algolia.com/doc/libraries/javascript/v5/upgrade/
Most breaking changes have been handled in DocSearch directly, which exposes a common interface, and autocomplete was already compatible with the client v5.

Are there any to be aware of?

Indeed this type is not fully compatible with the previous one, it's partly fixed by https://github.com/algolia/api-clients-automation/pull/4108 but it's not 100$ compatible.

Is there a good reason for this to land in v3 and not v4?

No it's perfectly fine to stay on the client on this version and wait for a next major, my first goal was to upgrade algoliasearch in the yarn cli as a test to make sure that v5 works well in the real world, but it depends on this theme.
Trying to upgrade in this PR already resolved some issues so it was still worth it !

Does anything regarding the UI or behavior change

The only change is a bug fix in docsearch to close the modal with Cmd+K
I can try to make the constraint algoliasearch >= 4.18.0 < 6 to be compatible with all versions also

Hello @slorber, sorry for the delay.
While there are many breaking changes in algoliasearch v5, most of them are abstracted in docsearch and the migration should be without any changes for most users.
There are some changes to the type like transformSearchClient to make it compatible with both the lite client and the full algoliasearch client, and a change to the searchParameters to be more correct and aligned with what the API expect.
Thank you for the reviews, the changes are pretty minimal now :)

authors: millotp slorber

repo: facebook/docusaurus


text:
feat(v2): add Facebook Docusaurus 2 template

Motivation

Remove Facebook-specific stuff from the classic template
Create a Facebook-specific starter website template

Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Run sites locally
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

Btw I just realized the only difference is just the copyright. I wonder if we should just strip out the copyright header (babel can do this really well) and only maintain one template. If they choose classic, we just strip out comment

Btw I just realized the only difference is just the copyright.

No, there's also the FB OSS image logo which I took out from the classic footer. Anyway, I intend to add more FB-specific tooling stuff later (e.g. default Prettier config, the copyright header lint rules). It will continue to diverge even further after this PR.

ok

authors: endiliey yangshun


text:
fix: apply proper class for active doc item on mobiles + avoid duplicated classes

Breaking Changes

Remove activeSidebarClassName config, as it was probably never used by anyone and is confusing to use with Infima. Please let us know if you have a use-case for it, and we'll figure out a better api.

Motivation
First of all, currently CSS class for active navbar item is duplicated, for example:

Result
Current HTML
Expected HTML

Docs
Docs

In addition to that, in mobile sidebar uses wrong navbar__link--active class instead of menu__link--active for active doc item.

Result
Current HTML
Expected HTML

Docs
Docs

The duplication of CSS class occurs because option for adding custom class activeSidebarClassName is set by default in navbar__link--active . Although it's quite strange, because this option, as I understand it, is intended to add custom class to active doc item. So adding custom class via activeSidebarClassName option should not remove built-in Infima's active CSS classes.
BTW I'm not sure this option activeSidebarClassName  is needed at all at this moment. If you browse public repositories, you'll find that no one uses it -- default Infima class is set in all available repos.  Well, maybe we should remove it?
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Preview.
On /docs page:

Before
After

Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

Agree, like the current navigation, and apparently so do our users. So let's remove activeSidebarClassName as well.

👍


text:
Record inheritance in Typescript?

I were struggling with converting a model of ours to a Immutable.Map and found Record, which is perfect because we need to implement some functions.
But It doesn't seem to be possible to use the example syntax i Typescript?
import Immutable = require("immutable");

class ABRecord extends Immutable.Record({ a: 1, b: 2 }) {
    getAB() {
        return this.a + this.b;
    }
}

var myRecord = new ABRecord(b:3);
myRecord.getAB();// 4

Doesn't compile at all, "The property 'Record' does not exist on value of type 'Immutable'."
Any tips?

Hey @leebyron I see you have added a 4.0 label on that issue.
Any indication on how the records are going to be changed in regards to typescript (also regarding https://github.com/facebook/immutable-js/issues/341)

Hey! I'm not sure yet actually and am open to suggestions.

I'll play with it hopefully around next week and will report

After looking around a bit, I think adding generics to some of the types like Record would solve at least the typing issues in #341 and #564 .
As for inheriting, I'm not entirely sure how that'd work since https://github.com/Microsoft/TypeScript/issues/2225 doesn't seem to be worked on. So maybe inheritance for a future version and just make it generic for now?
Let me know if you need to add generics tests for the next version

Is this related to the present inability to type alias, e.g. type MyRecord = Record({foo: ""})? And, consequently, the inability to use a Record as a type in other ways: List<MyRecord>. Assigning to a var and attempting the latter scenario results in a similar error message: Cannot find name 'MyRecord'.

I wonder if it is possible to do this with https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#extending-expressions,  https://github.com/Microsoft/TypeScript/pull/4910 and intersection types (see https://github.com/facebook/immutable-js/issues/341#issuecomment-147523795). All of the above is available in nightly ts build.
Any ideas?

Works fine like below, with Typescript 1.6.
import Immutable = require("immutable");

const defaultValue = { a: 1, b: 2 }

class ABRecord extends Immutable.Record(defaultValue) {
    getAB() {
        return this.a + this.b;
    }
}

var myRecord = new ABRecord(b:3);
myRecord.getAB();// 4

The subclassing works now (1.6) but the compiler will put off errors about properties not existing if you don't explicitly declare them:
const defaultValue = { a: 1, b: 2 }

class ABRecord extends Immutable.Record(defaultValue) {
    a: number;
    b: number;

    getAB() {
        return this.a + this.b;
    }
}

Back to not working with 1.7. Argh.

I spent a long time to try solving the same issue, but at the end of the day, I can't answer the most simple question (maybe someone here can help): Why using Immutable.Record in Typescript?

does a class with no setter method can be considered as immutable?
should we only use ImmutableJS for collections?

@zhenwenc Such a class would be immutable, but would not have the set functionality, nor default values support. That said, I'm personally inclined towards custom native-TS classes, considering how much hassle it is trying to use Immutable.Record—especially if a solution is liable to break with future versions of TS.

This "workaround" works for me (functionality and code completion wise without errors):
import { Record, Map } from 'immutable';

export interface IModel {
    a?: number;
    b?: number;
}

interface IModelBase extends IModel, Map<string, any> {}

interface ModelBase extends IModel {
    new (values: {[key: string]: any}): IModelBase;
    getAB?: () => number;
}

export type Model = Record.IRecord<ModelBase>;

const ModelBaseRecord: ModelBase = Record({
    a: 1,
    b: 2,
});

class ModelRecord extends ModelBaseRecord {
    public getAB = () => this.a + this.b;
}

export default ModelRecord;

I've created this library that has an interface called TypedRecord that extends from Immutable.Map and changes all return types to the generic provided type.
It has a function called makeTypedFactory that will create Immutable.Record of the type you specify, it's a just a utility but allows you to have typed Record all over the place and is a very very small library.
https://github.com/rangle/typed-immutable-record

I found a class to get prop name as string array, then implemented a SetValue Method this has some rough edges.
export class NavigableObject{
constructor(private obj: T, private path: string[] = []) { }
To<R>(p: (x: T) => R): NavigableObject<R> {

    let propName = this.getPropName(p)

    if (propName) {
        return new NavigableObject<R>(
            p(this.obj),
            this.path.concat(propName)
        );
    } else {
        return new NavigableObject<R>(
            p(this.obj),
            this.path
        );
    }
}

getPath() {
    return this.path;
}

private static propertyRegEx = /\.([^\.;]+);?\s*\}$/;

private getPropName(propertyFunction: Function) {
    let value = NavigableObject.propertyRegEx.exec(propertyFunction.toString())
    if (value)
        return value[1];
}

}
function NavigatableRecordCreator(defaultValues: { [key: string]: any; }, name?: string) {
abstract class NavigatableRecord<P extends NavigatableRecord> extends Record(defaultValues, name) {
SetValue(fn: (x: NavigableObject) => NavigableObject, value: T, state: P) {
return this.setIn(fn(new NavigableObject(state)).getPath(), value)
}
}
return NavigatableRecord;
}
export class IUSER extends NavigatableRecordCreator({
Name: "",
Age: 0
}) {
Name: string;
Age: number;
SetValue(fn: (x: NavigableObject) => NavigableObject, value: T) {
return super.SetValue(fn, value, this)
}
}
and then use it like
state.SetValue(t => t.To(q => q.Name), "test string") // typecheks
state.SetValue(t => t.To(q => q.Name), 123) // error
it also works with nested properties
somenestedImmutable.(t =>t.To(q => q.Date).To(q => q.Time), 213213123)
but cant get it work without needing to implement method in child class ,
little help would be nice if it is possible :)
Typescript v.2.1.0-dev20160805

I found a class to get prop name as string array, then implemented a SetValue Method this has some rough edges.
export class NavigableObject<T>{
    constructor(private obj: T, private path: string[] = []) { }

    To<R>(p: (x: T) => R): NavigableObject<R> {

        let propName = this.getPropName(p)

        if (propName) {
            return new NavigableObject<R>(
                p(this.obj),
                this.path.concat(propName)
            );
        } else {
            return new NavigableObject<R>(
                p(this.obj),
                this.path
            );
        }
    }

    getPath() {
        return this.path;
    }

    private static propertyRegEx = /\.([^\.;]+);?\s*\}$/;

    private getPropName(propertyFunction: Function) {
        let value = NavigableObject.propertyRegEx.exec(propertyFunction.toString())
        if (value)
            return value[1];
    }
}

function NavigatableRecordCreator(defaultValues: { [key: string]: any; }, name?: string) {
    abstract class NavigatableRecord<P extends NavigatableRecord<P>> extends Record(defaultValues, name) {
        SetValue<T>(fn: (x: NavigableObject<P>) => NavigableObject<T>, value: T, state: P) {
            return this.setIn(fn(new NavigableObject<P>(state)).getPath(), value)
        }
    }
    return NavigatableRecord;
}

export class IUSER extends NavigatableRecordCreator({
    Name: "",
    Age: 0
})<IUSER> {
    Name: string;
    Age: number;
    SetValue<T>(fn: (x: NavigableObject<IUSER>) => NavigableObject<T>, value: T) {
        return super.SetValue(fn, value, this)
    }
}

and then use it like
state.SetValue(t => t.To(q => q.Name), "test string") // typecheks
state.SetValue(t => t.To(q => q.Name), 123) // error

it also works with nested properties
somenestedImmutable.(t =>t.To(q => q.Date).To(q => q.Time), 213213123)

but cant get it work without needing to implement method in child class ,
little help would be nice if it is possible :)
Typescript v.2.1.0-dev20160805

Latest type definitions are helping out quite a bit more, will be released soon

I created simple typescript lib to create immutable.js record classes with full inheritance support - https://github.com/MrDegriz/immutable-record-class. Maybe it helps to someone.

fyi I tried with latest release immutable beta rc and no luck

interface ITimelineState {
    zoom: number;
    duration: number;
    channels: Array<IChannels>;
    outputs: Array<IOutputs>;
    items: Array<IItem>;
}

let state: Map<any, ITimelineState> = Map({ // <<<< ERROR
        zoom: 1,
        duration: 500,
        channels: [],
        outputs: [],
        items: []
    });

Why is this closed. The problem persists.

authors: Keats MrDegriz aalpgiray abergs aindlq born2net danielfigueiredo endash leebyron leonuh paramsingh88 yss44 zhenwenc

repo: facebook/immutable-js

license: mit

license_source: bigquery


text:
Infer ignores TypeQualifierNickname annotations

We have an NotNull annotation that is a TypeQualifierNickname for javax.annotation.Nonnull, however infer does not take this into account and thinks a NotNull method instance can be null as it was defined Nullable in class scope.
@Nullable
String mStr;

public void parse(@NotNull String str) {
    //str nonnull here
   mStr = str;
    print mStr.length();
}

This was fixed by 7821266c8feec03b7edf157d474e6a5ec364499f. Note that this will work even without the @NotNull annotation (which Infer actually doesn't understand); Infer will figure out that str must be non-null in order for the parse procedure to be safe, and it will complain if a caller of parse passes a possibly-null value.

authors: denizt sblackshear

repo: facebook/infer


text:
A false negative from Infer's official document

Infer version: v1.1.0

OS version: Ubuntu 20.04, No Docker

Command: infer run --inefficient-keyset-iterator -- javac target_file.java

Full output

Capturing in javac mode...
Found 1 source file to analyze in /home/user_name/infer-out
1/1 [################################################################################] 100% 101ms

  No issues found

A minimal example to reproduce

void foo(String k, Integer v) {
    System.out.println(k + v);
}
void checkEfficientIterator(HashMap<String, Integer> map) {
    for(String key : map.keySet()) {
        Integer value = map.get(key); // Should report a issue here
        foo(key, value);
    }
}

Actually, this case is the same as official case here.

@jvillard, Hi Dr.Villard, could you please help me check this issue? I think this problem is importatant because it is related to document. Thanks!

@rgrig, Hi, Radu, could you please help me check this issue caused by inconsistency between doc and tool?

Hi @Belle-PL, I am unable to reproduce your problem, Infer correctly reports the issue for me. Please re-open if there is still an issue.
PS: The "inefficient keyset iterator" checker is enabled by default, no need to pass the option on the command line.

authors: Belle-PL jvillard


text:
TypeError: Cannot redefine property: MAX_VALUE

Do you want to request a feature or report a bug?
bug
What is the current behavior?
Tests fail to run
If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.

Install better-sqlite3 package - npm install --save better-sqlite3
create a new file my.test.js with following content

const Database = require('better-sqlite3');

// Everything below isn't necessary, it'll fail anyways.
const sum = (a, b) => a + b;

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Tests fail with following output -

 FAIL  tests/random.test.js
  ● Test suite failed to run

    TypeError: Cannot redefine property: MAX_VALUE
        at Function.defineProperty (<anonymous>)

      at defineStatic (node_modules/integer/index.js:14:9)
      at Object.<anonymous> (node_modules/integer/index.js:7:1)
      at Object.<anonymous> (node_modules/better-sqlite3/index.js:3:26)
      at Object.<anonymous> (tests/random.test.js:1:107)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.139s
Ran all test suites matching "tests/random.test.js".

What is the expected behavior?
Tests should atleast run
Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.
Linux, jest - ^20.0.4, node v8.1.2, npm - 5.0.3 and no config. Importing that package(and not even using it) is sufficient alone to fail jest to even run tests. Even if you don't define a single test, it still fails with same error, but node is able to execute the file successfully.

Ping.

Ping.

@aaronabramov could someone take a look at this? ( 😅 sorry for tagging like this, its been a while and I haven't got any response so is there something I need to do? )

Jest calls integer twice in single VM context, which causes the TypeError you get.
Once in index.js file (exporting Integer).
Once in native V8 call to the module, which Jest doesn't support with its module resolution.
Removing Integer from better-sqlite3 exports fixes the issue. Since integer is standalone package, you should be good removing it (e.g. send them a PR and include it in next major release, because it's an API change).
Wonder how we can make Jest understand V8 calls. @cpojer thoughts?

I just ran into this, and it's unfortunate. I don't really understand the problem. Can you shed some more light on what possible changes need to be done? I'm happy to help contribute.

@thymikee Hey, Mind if I give it a try as my first issue, but can you be more detailed with your explanation

authors: agauniyal anje123 jlongster thymikee

repo: facebook/jest


text:
Jest cannot find custom environment in @jest-environment docblock

🐛 Bug Report
When I added a @jest-environment docblock to a test suite (name1.test.js) I got below error when running test:
Validation Error:

      Test environment MongoEnvironment cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

But if I comment out line 2 in name1.test.js (to remove @jest-environment), my custom test environment named MongoEnvironment is working well, line 11 in mongo-environment.js works correctly. It means Jest is configured well, isn't it?
To Reproduce

Clone https://github.com/tiendq/haypley-services
Checkout branch test/reproduce-jest-docblock-error
yarn install
yarn test name1.test.js

Expected behavior
Test runs well. No error.
Link to repl or repo (highly encouraged)
https://github.com/tiendq/haypley-services
envinfo

System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
  Binaries:
    Node: 10.16.3 - /usr/local/opt/node@10/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  npmPackages:
    jest: ^24.8.0 => 24.8.0

Jest has no way to find the environment just based on the string MongoEnvironment. If you specify * @jest-environment ./test/jest/mongo-environment.js it works.

Oh, you closed it so fast, at least document says only about environment name, not a JS file path. Who don't think Jest will use its configuration?

Jest does use the configured environment - the docblock is just for overriding it for individual test files.
And the name MongoEnvironment does not appear in the configuration, so I'm not sure what you'd expect.

I do see Jest knows well about my custom MongoEnvironment in other cases, so I expect it works with docblock too. Or at least document should say docblock is just for overriding and it might not know your configuration :)

Happy to accept a PR improving the docs if you see an opportunity!
As for the docblock there is no way to know which file MongoEnvironment refers to so it has to be a file path.

The docs should probably explicitly state that the value of the pragma must be a requireable module (so either something in node_modules or a relative path to some other module), not just a name. Wanna contribute that change to the docs?

authors: SimenB jeysal tiendq


text:
Feature: Support for replace with multiple nodes

There currently is a way to replace a LexicalNode with another node.
It would be great to extend this functionality to be able to replace with a list of nodes.

Would ElementNode.splice meet this use case?

@acywatson Hmmm, thanks! It does look like I would be able to achieve that  using ElementNode.splice with the help of LexicalNode.getParent() and LexicalNode.getIndexWithinParent().
I think that makes this less of an issue, however it would still be easier/nice to have to do the replace at the child LexicalNode level like LexicalNode.replace does, perhaps by changing that to replace<N extends LexicalNode>(replaceWith: Array<N>): Array<N>

Yea, I think that does make sense. I momentarily forgot that replace is a method on LexicalNode. I think it makes sense to have an interface that supports replacing a single node with multiple.
Maybe even
replace<N extends LexicalNode>(replaceWith: Array<N> | N): Array<N>
for backwards compat.

authors: acywatson yudori

repo: facebook/lexical


text:
Feature: dedicated listener for user inputs

Would be great if we could have a listener that only fires when a user performs any edit, as opposed to the current listeners which fire also when we programatically add nodes.
an example - when a user presses a button, we want to render some text from the server in a certain style.
the requirement is that after a user performs any edit, we want to disable that style.
currently the way to do this is to listen to the beforeinput event on the root DOM element.
Would be great to have a dedicated library listener for this, I can think of many other examples that this would be useful for (distinguishing between a user input and a programatic mutation to the editor).
and example of what I'm trying to achieve:

From experience, it's not a great pattern to assume changes come from only user input. It's also very difficult to determine what is user input.

Third party extensions, and spellcheckers generally don't trigger any events at all.
You can't block or change content during composition (IME), and doing so causes a bad UX. This is particularly true for Android.
Some user inputs aren't really what they seem to be. Sometimes a beforeinput event is ignored by Lexical, as we don't know what the terminated selection might be (text replacements).
Generally speaking, we try and let the native browser do it's work rather than blocking it. Meaning listening during beforeinput isn't the always the same as what happens in input.
Node transforms mean that sometimes an incoming input doesn't actually do anything, or gets transformed into something else. This is true for things like links, and nodes where input might go to an adjacent node.

A much better strategy is to use node transforms. Commands are not a good use-case for this sort of problem space. You can detect an edit on a text node, and then disable a style today with node transform.

Closing as Dominic's answer is pretty comprehensive about the limitations.

authors: ZebraCat thegreatercurve trueadm


text:
Feature: Git Checks for running test.yml workflows and size.yml workflows are getting skipped for PRs

Recently the git checks from test.yml are flaky and getting skipped on PR updates few times
Example PR: https://github.com/facebook/lexical/pull/6056/checks
Could be various reasons as per https://stackoverflow.com/questions/77996177/how-can-i-handle-a-required-check-that-isnt-always-triggered

I noticed this as well, it seemed to start around https://github.com/facebook/lexical/pull/6071 or https://github.com/facebook/lexical/pull/6056 - I don't believe that it has anything to do with the workflow configuration but also I haven't seen anything on https://www.githubstatus.com/ about this

I think that the checks that are running are not workflow based at all, but are instead triggered by webhooks to other services

I suspect that someone with a high enough access level on the repo or org has to tick some boxes or solve a billing issue to get workflows going again

Gerard took care of it

think

still need this to move more tests from e2e to unit wherever possible, so that we don't face budget restraints in future,
Nicole / Bob / Acy are also helping in optimising the git workflows for future.

authors: Sahejkm etrepum ivailop7


text:
Add Copy & Paste to Context Menu

Does not support pasting images (yet)
https://github.com/facebook/lexical/assets/13852400/090347cf-f6a4-4b91-bd08-9e2f2e873873

I think adding "Paste as plain text" would be a really cool thing to have. Can be added later as well, just sharing thoughts.

I think adding "Paste as plain text" would be a really cool thing to have. Can be added later as well, just sharing thoughts.

@ivailop7 We have something like this already with the "Clear formatting" button in the drop down which removes all of the BIUS formatting from pasted text.

Closing this for the moment due to inactivity but happy to re-open if the changes can be addressed.

True, but the request comes more from the aspect that when we paste content from outside, it would override the node, for example a blockquote rather than append text inside, which is where the 'paste as plain text' option is required.

We'll raise a new PR on this soon.


text:
presto 0.119 can not get table info from mysql database.

We face the same problem as
https://groups.google.com/forum/#!topic/presto-users/fY_p3uwhWHM

@martint I think we can close it as a duplicate of #3763

Hello
Did you solve the issue ?
I actually defined the file mysql.properties in /presto/etc/catalog and when I try to see the tables in mysql it says there is no catalog with the name.
Could you please help me with this.
Thanks

authors: kokosing rraghuram64 yuananf

repo: facebook/presto


text:
Update the "Build from source" page

This greatly simplifies the build from source page and brings it up to standard to 0.71+

This is pending this PR https://github.com/facebook/react-native/pull/36165

repo: facebook/react-native-website


text:
Added steps to install Android SDK Command-line Tools

Added steps to install Android SDK Command-line Tools

Yes, you are correct, it appears that an anomaly has occurred here.
I'm having problems running the build of my project, and running "npx
react-native doctor" it shows me that the Android SDK was not being
recognized, even though it was installed with the ANDROID_HOME environment
variable defined, so I went to the system settings Android Studio and I saw
that this package, Android SDK Command Line Tools, was not installed, I
installed and ran the "npx react-native doctor" command again and it
started to be recognized. However, after restarting my system again (Fedora
39) it no longer recognized the Android SDK, so I still cannot run the
build.
Sorry for taking your time, I'll be more careful and test more next time.
Em sex., 12 de jan. de 2024 às 10:56, Nicola Corti @.***>
escreveu:

@.**** requested changes on this pull request.
In docs/_getting-started-linux-android.md
https://github.com/facebook/react-native-website/pull/3987#discussion_r1450484555
:

@@ -48,7 +48,11 @@ Select the "SDK Platforms" tab from within the SDK Manager, then check the box n

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 33.0.0 is selected.
-Finally, click "Apply" to download and install the Android SDK and related build tools.
+Click "Apply" to download and install the Android SDK and related build tools.
+
+In the SDK Tools tab, check if Android SDK Command-line Tools is checked, if not, check it and click apply. This package is necessary for React Native commands on the command line to recognize the Android SDK on your system.
This is not correct. Can you clarify?
—
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native-website/pull/3987#pullrequestreview-1818316129,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AS7Y73YZCKZCTA5FVVDSF4DYOE6H7AVCNFSM6AAAAABBYDRFQOVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTQMJYGMYTMMJSHE
.
You are receiving this because you were mentioned.Message ID:
@.***>


text:
Upgrade breaks pbxproj file

Description
react-native upgrade breaks pbxproj file if project name has a space in it. I've just run react-native upgrade on a project, taken your changes for the project file and it has broken my pbxproj file.
Reproduction
Set the project's name to a name with a space in it. Run react-native upgrade from 0.35.0 -> 0.40.0
Solution
Do not strip parentheses around "path" property in pbxproj items if the project name has a space in it.
Additional Information

React Native version: Upgrading 0.35.0 -> 0.40.0
Platform: iOS
Operating System: MacOS

Same goes for Test file, it created it like so:
@interface Pixie MerchantTests : XCTestCase

@end

@implementation Pixie MerchantTests

Yeah, unfortunately you are responsible for merging this manually. The new tool react-native-git-upgrade may help make the upgrade changes more clear.

authors: ericvicenti simonmitchell

repo: facebook/react-native


text:
invariant violation: Native component for RCTFBLoginButton does not exist this error is located at: in RCTFBLoginButton

Is this a bug report?
Yes I think this is a real BUG...
Have you read the Contributing Guidelines?
NO
Environment
OS:  macOS Sierra 10.13.3
Node:  ya8.9.4
Yarn:  1.3.2
npm:  5.6.0
Watchman:  4.9.0
Xcode:  9.2
Packages: (wanted => installed)
react-native: 0.53.0
react:  16.2.0
Target Platform: iOS (10.3)

Steps to Reproduce
(Write your steps here:)

react-native install react-native-fbsdk  and then  react-native link react-native-fbsdk

Follow ALL STEPS from Quickstart IOS (⚠  With-out the last STEP, becous the test of integration is with the react-native-fbsdk package)

3 . Then I put this code for testing my wonderful SDKLoginFacebook for React-Native.

import React from 'react';
import { StyleSheet, Alert, View } from 'react-native';

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
  AccessToken
} = FBSDK;

export default class Login extends React.Component {
    render() {
        return (
            <View>
              <LoginButton
                publishPermissions={["publish_actions"]}
                onLoginFinished={
                  (error, result) => {
                    if (error) {
                      alert("login has error: " + result.error);
                    } else if (result.isCancelled) {
                      alert("login is cancelled.");
                    } else {
                      AccessToken.getCurrentAccessToken().then(
                        (data) => {
                          alert(data.accessToken.toString())
                        }
                      )
                    }
                  }
                }
                onLogoutFinished={() => alert("logout.")}/>
            </View>
          );
    }
}

Ejecute react-native run-ios

then, EXPLOTE with this error --> invariant violation: Native component for RCTFBLoginButton does not exist this error is located at: in RCTFBLoginButton at FBLoginButton.js:112

NEED HELP!

I've faced the same issue today.

same here

This is a madness 🤯... I have one project with RC v0.52 and works ! i'm really thing there is a problem between RN and compatibility from the package.

+1

how do i solve this error?

@CarlosOrozc  we don't know bro, for that we are here jaja

Hello there!
I don't know why, but, I was try it agains and now works!!! 🎉 The only different that I have done:

reinstalling react-native install react-native-fbsdk && react-native link react-native-fbsdk

follow the quicks steps from ios ⚠ when tutorial tell you that modify your AppDelegate.m, please copy this ⬇

AppDelegate.m
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>

@implementation AppDelegate

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"PasaLoYa"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                        openURL:url
                                              sourceApplication:sourceApplication
                                                     annotation:annotation];
}
@end

Test your LoginButton from react-native-fbsdk 😄 🎉

Apparently the problem was the sdk versions, I do not know why motive was taking several versions.
reinstall dependencies and solve the problem

@VGamezz19 I still don't know what kind of black magic what's that but I had the same issue, but following your steps, it's really working know, after a week of researching and testing.
Thanks man

I had this issue too and I followed the steps to manually link the react-native-fbsdk lib in xcode and everything worked great. Just make sure to rebuild the app in xcode after making the changes. You can find the official documentation here https://facebook.github.io/react-native/docs/linking-libraries-ios.html

quite the Metro Bundler, and react-native run-ios again

for me this fixed it
Open your application's Xcode project.
If you don't have a Frameworks group in your project, create one.
Open ~/Documents/FacebookSDK using Finder.
Drag the Bolts.framework, FBSDKCoreKit.framework, FBSDKLoginKit.framework, and FBSDKShareKit.framework files into the Frameworks group of Xcode's Project Navigator. When prompted, select "Copy items if needed" and continue.

@VGamezz19 Hi VGamezz, how about android? i get an error too. Pls help me

@dafapramudya  but with the same version of React Native?

any solution in android? I'm getting same error :/

Same crap. What a nightmare.

I have Invariant Violation: requireNativeComponent: "RCTFBLoginButton" was not found in the UIManager., I've tried a few 'solutions', not much result.

Same problem in android =/
RN: 0.55.4
RNFSDK: ^0.7.0

Any Solution for Android facing the same issue I just learning the react native and run demo code face this issue.
"react": "16.5.0",
 "react-native": "0.57.0",`
"react-native-fbsdk": "^0.8.0",

Did everything listed above, none of it actually works for me.
react-native": "0.56.0

The only way I managed to make it work is showcased here https://www.reddit.com/r/reactnative/comments/8f2txr/fb_sdk_invariant_violation_native_component_for/

I am still facing the same error until now. I did everything above. None of them work. Please help

I have Invariant Violation: requireNativeComponent: "RCTFBLoginButton" was not found in the UIManager., I've tried a few 'solutions', not much result.

Me Too

I'm it too.
Facebook code running Facebook code...
Surely someone on the RN team can get to the bottom of this!?

Having the same issue!!

I think react-native link is really unstable 😔
In my case, many problems solved by linking manually
I recommend to refer this explanation
https://github.com/lakshmantgld/react-native-fbsdk-example/blob/master/readmeFiles/fbsdkXcode.md
But, just Ignore react-native link react-native-fbsdk in the explanation above.
And add RCTFBSDK.xcodeproj to your project's Library and libRCTBSDK.a to project's Link Binary With Libraries
Everything is done perfectly

Same issue!

Same issue here.
Any solutions?
Any workarounds?

Linking manually was the solution for me. Lately automatic linking has not worked too well on most libraries for some reason.
Did exactly what heyman33 said and it worked immediately afterwards.
It's only two steps and it's worth learning since it saves you a lot of time in many cases.
BTW: Then I had a crash as soon as I pressed the login button, and thanks to some other forum, I simply had to change "publishPermissions" to "readPermissions" in the LoginButton props.

Thanks jayjac. Will try it.

I actually figured it out! I wrote a Medium article outlining the steps I needed to take - manual linking was the answer!
https://medium.com/@rachieb19/struggles-with-react-native-link-1f1738076472

The solution for me was to perform the configuration steps manually according https://developers.facebook.com/quickstarts/931417137057288/?platform=ios
Auto install with js script not works :'(

@TheSavior  Hi, this issue still exists for Android.

Illusion, I have two simulators running. one of Xcode and one of react-native run-ios. in the Xcode simulator everything running, but in react-native simulator I get this error, so I closed both and reopen the react-native simulator and everything is works fine now, no errors.

authors: CarlosOrozc EasonWang01 RodrigoRMG VGamezz19 alittletf arielalvarez88 calvintts dafapramudya diegommiranda eran-or hello-ring heyman333 hussainahmad izotx jayjac jseyfert killboard meskz mks11 nsdonev rach-m rumur susegroj terranball tquiroga trickeyd xe4me


text:
App crashes on old device (Android 4.1 / HTC 500)

Issue
I'm using react-native-firebase (based on rract-native) to build a simple app and when I tried to run it on iOS simulator and my other Android devices it worked just fine until I tried to run it on my ancient HTC 500. Basically, app crashes when starting.
LogCat:
05-12 01:00:31.543: W/dalvikvm(12579): Exception Ljava/lang/NoClassDefFoundError; thrown while initializing Lokhttp3/internal/Util;
05-12 01:00:31.543: W/dalvikvm(12579): Exception Ljava/lang/ExceptionInInitializerError; thrown while initializing Lokhttp3/OkHttpClient;
05-12 01:00:31.543: W/dalvikvm(12579): threadid=19: thread exiting with uncaught exception (group=0x418db600)
05-12 01:00:31.653: E/Fabric(12579): Failed to retrieve settings from https://settings.crashlytics.com/spi/v2/platforms/android/apps/com.lumbralessoftware.allmemes/settings
05-12 01:00:31.653: E/Answers(12579): Failed to retrieve settings
05-12 01:00:31.793: W/CrashlyticsCore(12579): Cannot send reports. Settings are unavailable.
05-12 01:00:31.803: E/AndroidRuntime(12579): FATAL EXCEPTION: Thread-799
05-12 01:00:31.803: E/AndroidRuntime(12579): java.lang.ExceptionInInitializerError
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at okhttp3.OkHttpClient$Builder.<init>(OkHttpClient.java:453)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.modules.network.OkHttpClientProvider.createClient(OkHttpClientProvider.java:61)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.modules.network.NetworkingModule.<init>(NetworkingModule.java:166)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.shell.MainReactPackage$18.get(MainReactPackage.java:247)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.shell.MainReactPackage$18.get(MainReactPackage.java:244)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.LazyReactPackage.createNativeModules(LazyReactPackage.java:81)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:106)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1171)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1141)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1083)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:113)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:920)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at java.lang.Thread.run(Thread.java:864)
05-12 01:00:31.803: E/AndroidRuntime(12579): Caused by: java.lang.ExceptionInInitializerError
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at okhttp3.OkHttpClient.<clinit>(OkHttpClient.java:122)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	... 13 more
05-12 01:00:31.803: E/AndroidRuntime(12579): Caused by: java.lang.NoClassDefFoundError: okio.Buffer
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at okhttp3.ResponseBody.create(ResponseBody.java:208)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	at okhttp3.internal.Util.<clinit>(Util.java:48)
05-12 01:00:31.803: E/AndroidRuntime(12579): 	... 14 more
05-12 01:00:31.803: E/EmbeddedLogger(385): App crashed! Process: com.lumbralessoftware.allmemes
05-12 01:00:31.803: E/EmbeddedLogger(385): App crashed! Package: com.lumbralessoftware.allmemes v6 (1.0.6)
05-12 01:00:31.803: E/EmbeddedLogger(385): Application Label: Memes Free Matcher Test
05-12 01:00:31.803: W/ActivityManager(385):   Force finishing activity com.lumbralessoftware.allmemes/.MainActivity

Seems clear that something is wrong with okhttp but not sure why, nor how to fix it, and I don't understand why it works for other android version but not this one...
Environment
Android 4.1.2
Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.11.1
  Yarn: Not Found
  npm: 5.8.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.3.2 => 16.3.2
  react-native: ^0.54.4 => 0.54.4

Build dependencies
"dependencies": {
    "fbjs": "^0.8.16",
    "react": "^16.3.2",
    "react-native": "^0.54.4",
    "react-native-firebase": "^4.0.4",
    "react-native-image-picker": "^0.26.7",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-progress": "^3.4.0",
    "react-native-swipe-cards": "^0.1.1"
  }

If you need any additional details let me know, please.
I'm not sure if issue is related to react-native or to okhttp3. I've failed to find anything about people experiencing same issue. If this is not relevant to you, then if you could point me to the right place to report it, that would be great.
Thank you very much!

Try add this line to build.gradle:
compile 'com.android.support:multidex:1.0.1'
and override attachBaseContext in MainApplication.java with this:
@Override
protected void attachBaseContext(Context base) {
super.attachBaseContext(base);
MultiDex.install(this);
}

Oops forgot to reply. Thank you very much @daqiuqu, followed your instructions and issue got fixed  😊. Cheers, J

authors: daqiuqu javilumbrales


text:
error

error: bundling failed: Error: Unable to resolve module AccessibilityInfo from /Users/Xu/Desktop/test/RNComponent/node_modules/react-native/Libraries/react-native/react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map

name: 🐛 Bug Report
about: Something is not working as expected.

[ ] I have reviewed the documentation
[ ] I have searched existing issues
[ ] I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.6.0
Yarn: 1.2.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
Steps to Reproduce

https://snack.expo.io/@tiaotiao/hcmtest
1.npm start
2.curl http://localhost:8081/index.bundle -o main.jsbundle
Expected Behavior

Build successfully.
Actual Behavior

error: bundling failed: Error: Unable to resolve module AccessibilityInfo from /Users/Xu/Desktop/test/RNComponent/node_modules/react-native/Libraries/react-native/react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map


text:
Huge memory usage & crash from flatlist iOS only

[x] Review the documentation: https://facebook.github.io/react-native
[x] Search for existing issues: https://github.com/facebook/react-native/issues
[ ] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment
Environment:
OS: macOS High Sierra 10.13.5
Node: 8.10.0
Yarn: 1.7.0
npm: 6.1.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ~0.55.2 => 0.55.4
Description
My app fetch a few hundreds of items from a server, then loads this data in the flatlist 5 item by 5 item onEndReached. However, when I try to scroll for a few dozen items, my app doesn't respond to onPress (outside the flatlist) anymore, and the memory usage start to blast off leading to a crash :

I tried everything, from using getItemLayout, PureComponent, maxToRenderPerBatch, windowSize, I removed all images from my item, all touchable but still can't get over this problem.
I'm of course running my app in release mode.
I don't know how to solve this as it only happens on iOS and I have only a little knowledge on iOS dev (i'm an android guy...).
Here is the code for my item :
import React, { PureComponent } from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet, Image, ImageBackground, FlatList
} from 'react-native';
import globalStyle from '../globalStyle';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import consts from '../utils/consts';
import { formatDistance, formatPriceRange, parseTime, formatTime } from '../utils/utils';
import ItemOffer from './ItemOffer';
import Offer, { STATE_ENUM } from '../entities/Offer';
import LinearGradient from 'react-native-linear-gradient';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { AppEventsLogger } from 'react-native-fbsdk';

export default class ItemShop extends PureComponent {

  constructor(props) {
   super(props);
   this.state = {
     shopIdx: this.props.shopIdx,
     liked: this.props.liked,
     selectedOfferIdx: 0,
     currentOffer: this.props.offers[0],
     offers: this.props.offers
   };
  }

  render() {
    return (
      <View style={{marginTop: 5, marginBottom: 10,
        alignItems:"stretch", marginLeft: 10,
        marginRight: 10, overflow: "hidden", backgroundColor: "transparent", height: 300}}>
        <TouchableOpacity
        onPress={() => {
          this.props.onPressShop(this.state.shopIdx);
        }}
        >
          <View
          style={{flexDirection: "row", justifyContent: "space-between", alignItems:"center", height: 50, backgroundColor: globalStyle.colors.bg}}>
            <View>
              <Text style={[globalStyle.style.h1, {fontFamily: globalStyle.fonts.AvertaBold}]}>{this.props.name}</Text>
              <Text style={globalStyle.style.p}>{this.props.food} - {formatPriceRange(this.props.price)} </Text>
            </View>
            <View style={{flexDirection: "row", alignItems:"center"}}>
              <Text style={[globalStyle.style.p, {marginRight: 5}]}>{formatDistance(this.props.distance)}</Text>
              <MaterialCommunityIcon name={'map-marker-radius'} size={20} color={globalStyle.colors.darkGray} />
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

The code for my flatlist :
        <FlatList
          ref={(ref)=> this.shopList = ref }
          data={this.state.shops}
          initialNumToRender={4}
          onScrollBeginDrag={() => {
            this.setState({dragging: true});
          }}
          onScrollEndDrag={() => {
            this.setState({dragging: false});
          }}
          getItemLayout={(data, index) => (
            {length: 315, offset: 315 * index, index}
          )}
          onEndReached={this.loadMore}
          renderItem={this.renderItem}
          refreshControl={
            <RefreshControl
                refreshing={Platform.OS === 'ios' ? false : this.state.loading}
                onRefresh={this.getShops}
                tintColor={Platform.OS === 'ios' ? "transparent" : globalStyle.colors.orange}
             />
          }
        />

And the code for my renderItem function if needed:
  renderItem = ({item, index}) => (
    <ItemShop
    onPressShop={this.onPressShop}
    onPressWiniit={this.toggleModal}
    onPressLike={this.onPressLike}
    distance={item.distance}
    shopIdx={index}
    name={item.NAME}
    food={item.FOOD}
    price={item.PRICE_RANGE}
    offers={item.OFFERS}
    liked={item.liked}
    />
  );

However, if change my ItemShop render function to the following, it IS working :
  render() {
    return (
      <View style={{marginTop: 5, marginBottom: 10,
        alignItems:"stretch", marginLeft: 10,
        marginRight: 10, overflow: "hidden", backgroundColor: "transparent", height: 300}}>

              <Text style={[globalStyle.style.h1, {fontFamily: globalStyle.fonts.AvertaBold}]}>{this.props.name}</Text>

      </View>
    );
  }

I could really use help or confirmed as bug here as my due date is really soon :(
Thanks !

And my StackOverflow post : https://stackoverflow.com/questions/51390389/react-native-huge-memory-usage-crash-from-flatlist-ios-only

+1

I know this is an old issue, but we were having the same problem for days. If by any chance you are using redux-persist, adding a throttle on the persist config fixed it for us. It's basically just constant writing that sends the memory crazy. Hope that helps.