Open Roles in React is not defined

[xAgustin93]

Describe the bug
When you try to configure some role it fails that React is not defined

Steps to reproduce the behavior

1. Go to roles
2. Open one role
3. See error

Screenshots

System

• Node.js version: v12.18.0
• NPM version: 6.14.4
• Strapi version: 3.0.3
• Database: MongoDB
• Operating system: MacOS

[aramane]

Hello,
I have exactly the same problem.

System

• Node.js version: v13.9.0
• NPM version: 6.9.0
• Strapi version: 3.0.3
• Database: Mysql
• Operating system: Windows 10

[kzkr]

Same here on Strapi version: 3.0.3
Thank you!

[1005hoon]

Same problem here on strapi version 3.0.3

[barbudour]

Some problem, version: 3.0.3

[jodacame]

Same problem, version: 3.0.3

[christopher4lis]

Also receiving this issue on v 3.0.3

[tahaygun]

Same problem, version 3.0.3

[brandonrbridges]

Same problem, version 3.0.3

[dngrhm]

Same problem
Version 3.0.3
OS Ubuntu 18.04
Database: Postgres

[xiaoyuch]

Same problem
Version 3.0.3
OS macos 10.15.5
Database: Mongodb

[impochun]

same problem.

Strapi version: 3.0.3 (node v12.18.1)
OS: Ubuntu 20.04 LTS

I followed the docs - Quick Start Guild to install & get familiar with Strapi, when I try to do "7. Set Roles and Permissions", this error shows.
At the same time, all others functions are normal.

[imaksp]

@alexandrebodin may be related to this pull #6663, I think you should make new release, as strapi is now stable & this is breaking

[Lurtt]

same problem!

[soupette]

Hello @everyone there is an open PR that fixes the issue. We are really sorry about this issue and it should not have happened. In the meantime, until the release is made here's a workaround to make your administration works:

1. Create a the extensions/users-permissions/admin/src/components/Controller/index.js file:

mkdir -p extensions/users-permissions/admin/src/components/Controller
touch extensions/users-permissions/admin/src/components/Controller/index.js

2. Copy the following content:

/**
 *
 * Controller
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { get, map } from 'lodash';
import { FormattedMessage } from 'react-intl';
import pluginId from '../../pluginId';
import { useEditPageContext } from '../../contexts/EditPage';
import InputCheckbox from '../InputCheckboxPlugin';

import { Header, Label, Separator, Wrapper } from './Components';

function Controller({ actions, inputNamePath, isOpen, name, inputSelected, setInputSelected }) {
  const { selectAllActions } = useEditPageContext();

  const areAllActionsSelected = () => {
    return Object.keys(actions).every(action => actions[action].enabled === true);
  };

  const handleChange = () => {
    selectAllActions(`${inputNamePath}.controllers.${name}`, !areAllActionsSelected());
  };

  const hasSomeActionsSelected = () => {
    return Object.keys(actions).some(action => actions[action].enabled === true);
  };

  const setNewInputSelected = name => {
    setInputSelected(name);
  };

  const labelId = areAllActionsSelected() ? 'unselectAll' : 'selectAll';

  return (
    <Wrapper>
      <Header>
        <div>{name}</div>
        <Separator />
        <div className="checkbox-wrapper">
          <div className="form-check">
            <Label
              className={`form-check-label ${areAllActionsSelected() &&
                'checked'} ${!areAllActionsSelected() &&
                hasSomeActionsSelected() &&
                'some-checked'}`}
              htmlFor={name}
            >
              <input
                className="form-check-input"
                checked={areAllActionsSelected()}
                id={name}
                name={name}
                onChange={handleChange}
                type="checkbox"
              />
              <FormattedMessage id={`${pluginId}.Controller.${labelId}`} />
            </Label>
          </div>
        </div>
      </Header>
      <div className="row">
        {map(Object.keys(actions).sort(), actionKey => (
          <InputCheckbox
            inputSelected={inputSelected}
            isOpen={isOpen}
            key={actionKey}
            label={actionKey}
            name={`${inputNamePath}.controllers.${name}.${actionKey}.enabled`}
            setNewInputSelected={setNewInputSelected}
            value={get(actions[actionKey], 'enabled')}
          />
        ))}
      </div>
    </Wrapper>
  );
}

Controller.defaultProps = {
  actions: {},
  inputNamePath: 'permissions.application',
  name: '',
};

Controller.propTypes = {
  actions: PropTypes.object,
  inputNamePath: PropTypes.string,
  isOpen: PropTypes.bool.isRequired,
  name: PropTypes.string,
};

export default Controller;

3. Rebuild your app

# Using yarn
yarn strapi build --clean
# Using npm
npm run strapi build --clean