Building my project fails since I upgraded `ra-core` module to latest version 3.12.0

[bladx]

What you were expecting: I expect my project to build.

What happened instead: I got an error while my yarn build command fails.

Steps to reproduce: Update the version of ra-core module to 3.12.0. (In my case I upgrade to latest version for modules: ra-data-json-server, ra-i18n-polyglot, ra-input-rich-text, ra-language-english, ra-language-french and react-admin Then run the yarn build command.

Related code:

$ yarn build
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Failed to compile.

/Users/xgarnier/Projects/mom-blog/back-office/node_modules/ra-core/src/actions/dataActions/crudGetAll.ts
TypeScript error in /Users/xgarnier/Projects/mom-blog/back-office/node_modules/ra-core/src/actions/dataActions/crudGetAll.ts(19,13):
Type 'CallbackSideEffect | undefined' is not assignable to type 'CallbackSideEffect'.
  Type 'undefined' is not assignable to type 'CallbackSideEffect'.  TS2322

    17 |         fetch: GET_LIST,
    18 |         onSuccess: {
  > 19 |             callback,
       |             ^
    20 |         },
    21 |         onFailure: {
    22 |             notification: {

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Other information: Here is my package.json file:

{
  "name": "back-office",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "gravatar": "^1.8.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.20",
    "prop-types": "^15.7.2",
    "query-string": "^6.13.8",
    "ra-data-json-server": "^3.12.0",
    "ra-i18n-polyglot": "^3.12.0",
    "ra-input-rich-text": "^3.12.0",
    "ra-language-english": "^3.12.0",
    "ra-language-french": "^3.12.0",
    "react": "^17.0.1",
    "react-admin": "^3.12.0",
    "react-dom": "^17.0.1",
    "react-gravatar": "^2.6.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^1.1.0"
  },
  "devDependencies": {
    "@types/gravatar": "^1.8.1",
    "@types/jest": "^26.0.20",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.22",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-gravatar": "^2.6.8",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "prettier-eslint": "^12.0.0",
    "typescript": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
    "ciformat": "prettier --list-different 'src/**/*.ts' 'src/**/*.tsx'",
    "typings": "tsc --noEmit",
    "lints": "yarn eslint \"src/**/*.{ts,tsx}\"",
    "validate": "yarn format && yarn typings && yarn lints"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Environment

• React-admin version: 3.12.0
• Last version that did not exhibit the issue (if applicable): 3.11.2
• React version: 17.0.1

[djhi]

Can you please double check your yarn.lock file to ensure there are no duplicates of the react-admin related packages?

[bladx]

Sorry I should have been more precise in my previous message. The very first steps of Steps to reproduce are:

• delete both node_modules folder and yarn.lock file
• run yarn install command
• (and only after) run yarn build command

[fzaninotto]

The error you pasted appears in a file and at a line that wasn't changed over the past 2 years. I believe the problems appears now not because 3.12 changed the source, but because your TypeScript version (and options) have changed.

Which version of TypeScript are you using?

[bladx]

Oh ok, that's weird as I didn't updated my TypeScript version and it did work before. I did not changed my tsconfig.json file neither. So the TypeScript version I'm using is, as I shared in my package.jon file: 4.1.3

I don't know if this may help you but here is the list of upgrade I did: ("package-name" : "v1" => "v2" where v1 is before the issue and V2 after) "@testing-library/jest-dom": "^5.11.8" => "^5.11.9" "@testing-library/user-event": "^12.6.0" => "^12.6.2" "ra-data-json-server": "^3.11.2" => "^3.12.0" "ra-i18n-polyglot": "^3.12.0""^3.11.2" => "^3.12.0" "ra-input-rich-text": "^3.10.1" => "^3.12.0" "ra-language-english": "^3.11.2" => "^3.12.0" "ra-language-french": "^3.11.2" => "^3.12.0" "react-admin": "^3.11.2" => "^3.12.0" "web-vitals": "^1.0.1" => "^1.1.0" "@types/lodash": "^4.14.167" => "^4.14.168" "@types/node": "^14.14.20" => "^14.14.22" "@types/react-redux": "^7.1.15" => "^7.1.16"

[fzaninotto]

I've upgraded to TypeScript 4.1.3, and I can compile the project without problem.

One think I don't understand is why your react-script command parses the typescript files of the ra-core module. The published modules are in JS.

[bladx]

Sorry but I don't know how to answer that actually. My react-scripts dependancy version did not changed. So I agree that's weird but I do not get why we both have a different behaviour.

I attached the ra-core folder module I got from yarn install command if that might help you. ra-core.zip

Thank you very much for the help by the way, I really appreciate.

[fzaninotto]

I'm sorry but we don't do troubleshooting via GitHub issues, so we won't look at your archive.

I need a minimal way to reproduce your issue. If you can show us a simple CRA project with react-admin 3.12 that doesn't compile, we'll investigate further.

[fzaninotto]

Also, I believe you have a stricter TypeScript configuration than we have. This should explain the errors. Turning off strickNullChecks in your tsconfig.json may fix the problem.

[bladx]

Thank you, I tried adding this option but then I got another TS error, still for ra-core module. I repeated by deactivating another option, but again a third error so I guess this is not the solution.

Anyway, as you suggested I recreated a project from scratch and added only the minimal code to reproduce. It appears that this issue seems to come from a custom data provider based on ra-data-json-server.

So all I did is: yarn create react-app test-admin --template typescript cd test-admin/ yarn add react-admin ra-data-json-server prop-types query-string

Then create my data-provider.ts:

import { stringify } from "query-string";
import jsonServerProvider from "ra-data-json-server";
import {
  GetListParams,
  GetListResult,
  Record,
} from "ra-core/src/types";

const apiUrl = process.env.REACT_APP_SERVER_HOST || "";

const httpClient = (
  url: string,
  options: any = {}
): Promise<{
  status: number;
  headers: Headers;
  body: string;
  json: any;
}> => {
  if (!options.headers) {
    options.headers = new Headers({ Accept: "application/json" });
  }

  const authToken = `Bearer ${localStorage.getItem("accessToken")}`;
  options.headers.set("Authorization", authToken);

  return fetchUtils.fetchJson(url, options);
};

const dataProvider = jsonServerProvider(apiUrl, httpClient);

const customDataProvider = {
  ...dataProvider,

  // Customizes the list options and filters query params sent to the server
  getList: <RecordType extends Record = Record>(
    resource: string,
    params: GetListParams
  ): Promise<GetListResult<RecordType>> => {
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query: any = {
      page,
      perPage,
      sortField: field,
      sortOrder: order,
    };
    if (params.filter) {
      for (const [key, value] of Object.entries(params.filter)) {
        query[`filters[${key}]`] = value;
      }
    }
    const url = `${apiUrl}/${resource}?${stringify(query)}`;

    return httpClient(url).then(({ json }) => json);
  },
};

export default customDataProvider;

Then edit App.tsx:

import './App.css';
import { Admin } from "react-admin";
import customDataProvider from "./data-provider";

function App() {
  return (
    <Admin
      dataProvider={customDataProvider} />
  );
}

export default App;

Then run yarn build command

[bladx]

Would you like me to edit the issue name or even to close this one and re-create another issue with a better name and only the last message as description?

[fzaninotto]

No, we just need to take the time to try and reproduce the bug as you described.

[bladx]

I do not know if this can help you but I just figured out that running yarn tsc -noEmit command from the same very simple repo throw 344 errors, all from ra-core module. I did not change anything between my last message describing all the steps I did and this command. And I did not have this issue with ra-core version: 3.11.2 (but did with 3.12.0 version).

[bladx]

I managed to find the issue myself. For some reasons I was trying to import types from ra-core/src/types instead of react-admin. Replacing this import source solved my case so I close this ticket. Sorry for the inconvenience.

[comur]

Also, I believe you have a stricter TypeScript configuration than we have. This should explain the errors. Turning off strickNullChecks in your tsconfig.json may fix the problem.

Maybe this should appear in docs as we were having lots of warnings, I was able to remove them (and see real errors) by turning of strickNullChecks. Thanks btw