Difficulty encountered when combining create-react-app with typescript and immutable.js

Question

Difficulty encountered when combining create-react-app with typescript and immutable.js

After realizing that create-react-app now supports typescript, I encountered some issues while trying to transfer my current codebase from react-scripts-ts. Most of my classes are based on Record and cannot be constructed anymore due to errors like:

Cannot set on an immutable record.

I stumbled upon an old Babel issue with a similar problem but couldn't find any guidance on how to configure Babel to fix it. How can I resolve this?

I implement Immutable.js as explained here, for example:

import { Record } from 'immutable'

interface PersonProps {
  firstName: string
  lastName: string
}

const defaultPersonProps: PersonProps = {
  firstName: '',
  lastName: '',
}

class Person extends Record(defaultPersonProps) implements PersonProps {
  public readonly firstName!: string
  public readonly lastName!: string

  public constructor(values: PersonProps) {
    super(values)
  }
}

Check out the related issue on GitHub

typescript create-react-app immutable.js

Answer 1

Answer №1

In my opinion, the best approach to resolving this issue would be by incorporating "@babel/plugin-proposal-class-properties" with the "loose: false" parameter to prevent assignment (refer to the babel documentation on assignment versus definition: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties#via-babelrc-recommended-). This will utilize Object.defineProperty instead. Immutable.Record does not support assignment.

Here is a simple example I created using create-react-app --typescript. By ejecting create-react-app, I was able to quickly test the "loose: false" option and confirm its functionality (check the babel section of package.json): https://github.com/kimulus/typescriptimmutablerecord

Answer 2

In my opinion, the best approach to resolving this issue would be by incorporating "@babel/plugin-proposal-class-properties" with the "loose: false" parameter to prevent assignment (refer to the babel documentation on assignment versus definition: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties#via-babelrc-recommended-). This will utilize Object.defineProperty instead. Immutable.Record does not support assignment.

Here is a simple example I created using create-react-app --typescript. By ejecting create-react-app, I was able to quickly test the "loose: false" option and confirm its functionality (check the babel section of package.json): https://github.com/kimulus/typescriptimmutablerecord

Answer 3

Answer №2

If you haven't tested this code yet, would refactoring it in the following way make a difference?

import { Record } from 'immutable'

interface PeopleProps {
  firstName: string
  lastName: string
}

const personRecord = Record({
  firstName: '',
  lastName: '',
});

class Person extends personRecord implements PeopleProps {
  public readonly firstName!: string
  public readonly lastName!: string

  public constructor(info: PeopleProps) {
    super(info)
  }
}

Answer 4

If you haven't tested this code yet, would refactoring it in the following way make a difference?

import { Record } from 'immutable'

interface PeopleProps {
  firstName: string
  lastName: string
}

const personRecord = Record({
  firstName: '',
  lastName: '',
});

class Person extends personRecord implements PeopleProps {
  public readonly firstName!: string
  public readonly lastName!: string

  public constructor(info: PeopleProps) {
    super(info)
  }
}

Answer 5

Answer №3

To achieve immutability, I made the decision to rewrite my code by substituting the usage of "!" with Readonly<PersonProps> instead of using just PersonProps, allowing me to receive type hints for preserving object state.

Answer 6

To achieve immutability, I made the decision to rewrite my code by substituting the usage of "!" with Readonly<PersonProps> instead of using just PersonProps, allowing me to receive type hints for preserving object state.

Difficulty encountered when combining create-react-app with typescript and immutable.js

Answer №1

Answer №2

Answer №3

Similar questions

Leverage Webpack to bundle ES Modules with TypeScript module aliases

Angular - Execute function every 30 seconds while considering the duration of the function execution

Angular - The filter method cannot be used on Observables

Finding the file path to a module in a NextJS application has proven to be a challenge when utilizing the module

How can I create a join for my initial column in TypeORM?

detect the dismissal event in the modal controller from the main component

Steps to receive the "Welcome to React" web page upon executing the `create-react-app` demonstration?

Tips for sorting through aggregated information in Foundry Functions

The reactivity of arrays in Vue components' props is limited

Undefined value is returned for Vue 3 object property

Improving JavaScript Functions: Minimize duplication of helper methods

Is there a way to prevent Angular component lifecycle hooks like ngOnInit/ngOnDestroy from being triggered when nested within one another?

Tips for defining a function across a Angular project

IE11 is throwing a fit because of a pesky long-running script error caused by the powerful combination of Webpack, React,

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

Only pass props to `Image` if they have a defined value

Stopping the infinite refresh issue in your React webpack application

The inline style in Angular 2 is not functioning as expected when set dynamically

Typescript defines types for parameters used in callbacks for an event bus

"Implementing an abstract method in a class by overloading it with a generic type that