Safe Framework (React 15 / Material-UI 0.x era)

Common errors

• Uncaught Invariant Violation: injectTapEventPlugin(): Can only be called once.

  cause `react-tap-event-plugin` is being called multiple times in a React 15 context, or a new React version is being used.
  fix Ensure `injectTapEventPlugin()` is called exactly once at the entry point of your application. If using React 16+, remove `react-tap-event-plugin` entirely.

• Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

  cause Attempting to render a `safe-framework` or Material-UI v0.x component that is either not correctly imported, or its API has drastically changed in a newer React context.
  fix Verify all imports are correct and that you are using a React 15 compatible environment. If encountering this in a modern React setup, the components are fundamentally incompatible and require re-implementation.

• Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause Often seen when mixing CommonJS `require()` with ES module `import` for modules that provide a default export, or trying to use components designed for React 15 in a different React version's context.
  fix Ensure consistent module import styles (`import` vs `require`). Verify that the component's export type matches the import statement. More broadly, this indicates fundamental incompatibility with current React if trying to use this framework.

Warnings

• breaking This package is incompatible with modern React (v16+) and its ecosystem. React has undergone significant architectural changes, including Context API, Hooks, Concurrent Mode, and changes to event systems, making direct upgrades impossible.
  Fix: Migrate to a modern React framework (e.g., React 18+) and component library (e.g., MUI v5+ or Ant Design).
• deprecated All core peer dependencies (React 15.x, Material-UI 0.x, react-tap-event-plugin, Radium) are long deprecated and unmaintained. 'react-tap-event-plugin' is specifically noted as incompatible with React 16.4 and higher.
  Fix: There is no direct fix to update these dependencies while maintaining `safe-framework` functionality. A complete re-implementation with modern libraries is required.
• breaking The `injectTapEventPlugin()` call, crucial for Material-UI v0.x's touch event handling, causes errors in React 16+ due to changes in React's internal event system.
  Fix: Remove `react-tap-event-plugin` and update to a modern Material-UI (now MUI) version that does not require it. This effectively means abandoning `safe-framework`.
• gotcha Using unmaintained software with very old dependencies can introduce significant security vulnerabilities, as known exploits in these versions will not be patched. This poses a supply chain risk.
  Fix: Avoid using this package in production environments. If legacy applications must run, isolate them in secure, sandboxed environments and ensure no sensitive data is processed.
• gotcha The low version number (0.0.45) coupled with the outdated dependencies indicates that this project was likely an internal or experimental framework that never reached maturity or stable release.
  Fix: Do not consider `safe-framework` for new projects. For existing projects using it, plan for a complete migration to a current, actively maintained technology stack.

Install

• npm install safe-framework npm
• yarn add safe-framework yarn
• pnpm add safe-framework pnpm

Imports

• App
  wrong:

  import { App } from 'safe-framework';

  correct:

  import App from 'safe-framework/lib/App';

  Given the era, default exports from specific paths or CommonJS were common. This is a best guess for a primary application component.
• SomeMaterialComponent
  wrong:

  import { SomeMaterialComponent } from 'material-ui';

  correct:

  import { SomeMaterialComponent } from 'safe-framework/lib/material-components';

  It's likely that safe-framework re-exported or wrapped Material-UI v0.x components. Direct import from `material-ui` would bypass safe-framework's wrappers.
• MapComponent
  wrong:

  import { MapComponent } from 'react-leaflet';

  correct:

  import { MapComponent } from 'safe-framework/lib/map';

  Similar to Material-UI, it's probable that `safe-framework` provided its own styled or integrated map components based on `react-leaflet`.

Quickstart

This quickstart demonstrates a minimal React 15 application using Material-UI v0.x components, illustrating the environment `safe-framework` operated within. It includes the mandatory `injectTapEventPlugin` for older Material-UI versions.

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { Card, CardText } from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';

// Required for Material-UI v0.x touch events
injectTapEventPlugin();

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <div style={{ padding: 20 }}>
      <h1>Welcome to Safe Framework (Legacy Demo)</h1>
      <Card>
        <CardText>
          This is a demonstration of a basic component setup using
          the `safe-framework`'s underlying Material-UI v0.x dependencies.
          This example uses React {React.version} and Material-UI {process.env.MATERIAL_UI_VERSION ?? '0.x'}.
        </CardText>
      </Card>
      <RaisedButton label="Click Me" primary={true} style={{ marginTop: 20 }} />
      <p style={{ marginTop: 20, fontSize: '0.8em', color: '#666' }}>
        Note: This framework is built on very old dependencies and is not maintained.
        Modern React and Material-UI versions are incompatible with this setup.
      </p>
    </div>
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);