8.5.1 React hooks useContext and createContext don´t work properly

[marazz1]

Prerequisites:

This example uses MobX for state management.

create some store AuthStore.ts (the decorators are not mandatory, you can try it without them, the result is same)

import { action, observable, decorate } from 'mobx';
import { createContext } from 'react';

export class AuthStore {
    @observable apiVersion: string = 'ho';

    @action fetchApiVersion() {
        this.apiVersion = 'ha';
    }
}

export const authStore = new AuthStore();
export const authStoreContext = createContext<AuthStore>(authStore);   

create App.tsx

import React, { useContext, useEffect } from 'react';
import { observable } from "mobx";
import { observer } from 'mobx-react';

import './app.scss';
import { authStoreContext } from './AuthStore';

export const App = observer(() => {
  const authStore = useContext(authStoreContext);

  useEffect(() => {
    authStore.fetchApiVersion();
  }, []);

  const setApiVersion = () => {
    authStore.fetchApiVersion();
  };

  /*
   * Replace the elements below with your own.
   *
   * Note: The corresponding styles are in the ./${fileName}.${style} file.
   */
  return (
    <div className="app">
      <button onClick={() => setApiVersion()}>{authStore.apiVersion}</button>
    </div>
  );
});

export default App;

The rendered property is not udpating.

Solution? This is working properly. And the store property is updating properly.

import React, { useContext, useEffect } from 'react';
import { observable } from "mobx";
import { observer } from 'mobx-react';

import './app.scss';

const state = observable({
  apiVersion: 'ho',
  fetchApiVersion: () => {
    state.apiVersion = 'ha';
  }
});

export const App = observer(() => {

  useEffect(() => {
    state.fetchApiVersion();
  }, []);

  const setApiVersion = () => {
    state.fetchApiVersion();
  };

  /*
   * Replace the elements below with your own.
   *
   * Note: The corresponding styles are in the ./${fileName}.${style} file.
   */
  return (
    <div className="app">
      <button onClick={() => setApiVersion()}>{state.apiVersion}</button>
    </div>
  );
});

export default App;

Expected Behavior

React hooks useContext and createContext should work properly.

Current Behavior

React hooks useContext and createContext do not work.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. download the zip and extract it
2. yarn install
3. npm run-script start
4. replace useContext and createContext hooks with only exported const (mentioned above)
5. it works

Additionally you can try the same with 8.2.0 and everything works.

Context

Please provide any relevant information about your setup:

"dependencies": { "babel-plugin-transform-decorators": "^6.24.1", "document-register-element": "1.13.1", "mobx": "^5.13.1", "mobx-react": "^6.1.3", "react": "16.9.0", "react-dom": "16.9.0", "tslib": "^1.10.0" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-decorators": "^7.6.0", "@babel/preset-react": "7.0.0", "@nrwl/cypress": "8.5.1", "@nrwl/eslint-plugin-nx": "8.5.1", "@nrwl/jest": "8.5.1", "@nrwl/react": "8.5.1", "@nrwl/web": "8.5.1", "@nrwl/workspace": "8.5.1", "@testing-library/react": "8.0.5", "@types/jest": "24.0.9", "@types/node": "~8.9.4", "@types/react": "16.9.1", "@types/react-dom": "16.8.5", "@typescript-eslint/eslint-plugin": "2.0.0-alpha.4", "@typescript-eslint/parser": "2.0.0-alpha.4", "babel-plugin-transform-decorators-legacy": "^1.3.5", "cypress": "3.4.1", "dotenv": "6.2.0", "eslint": "6.1.0", "eslint-config-prettier": "6.0.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.14.3", "eslint-plugin-react-hooks": "1.6.1", "jest": "24.1.0", "prettier": "1.18.2", "ts-jest": "24.0.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.4.5" }

Example project:
testapp.zip

[montella1507]

Same issue here. Didn't work regardless decorator settings in tsconfig (allow/disallow)

[marazz1]

Update: Decorators and decorate() function do not work. But the useContext, createContext works.

There should be support for decorators without a need for custom web.config.js.

[jaysoo]

It looks like decorator support through babel needs to use legacy: true. It'll be fix in the upcoming release. Sorry for any inconvenience!

[atifsyedali]

Did this happen because of the change from ts-loader to babel-loader (#1836)?

[jaysoo]

@atifsyedali Yes, that was the case

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.