[BUG] Only the most recent version of refine-core does not break app authentication

[joanaavelar]

Describe the bug

On my package.json, I am freezing all my dependencies versions to avoid breaking my app.
All my refine dependencies are not in the most recent versions, except refine-core that needs to be, otherwise it breaks my app.

To Reproduce

Expected behavior

Screenshots

"engines": {
"node": ">=16.3.0"
},
"dependencies": {
"@pankod/refine-antd": "3.25.6",
"@pankod/refine-core": "3.44.0",
"@pankod/refine-react-router-v6": "3.25.2",
"@pankod/refine-simple-rest": "3.8.3",
"@testing-library/jest-dom": "5.12.0",
"@testing-library/react": "11.2.6",
"@testing-library/user-event": "12.8.3",
"@types/jest": "26.0.23",
"@types/js-cookie": "3.0.2",
"@types/node": "12.20.10",
"@types/react": "17.0.44",
"@types/react-dom": "17.0.3",
"i18next": "21.8.13",
"i18next-http-backend": "1.4.1",
"js-cookie": "3.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-i18next": "11.18.0",
"react-markdown": "6.0.1",
"react-mde": "11.5.0",
"react-scripts": "5.0.1",
"typescript": "4.2.4",
"web-vitals": "1.1.1",
"export-to-csv-fix-source-map": "0.2.1",
"humanize-string": "2.1.0",
"lodash": "4.17.21",
"lodash-es": "4.17.21",
"papaparse": "5.3.0",
"pluralize": "8.0.0",
"qs": "6.11.0",
"side-channel":"1.0.4",
"react-query": "3.19.2",
"tslib": "2.3.1",
"jose": "4.8.3"
},
"resolutions": {
"@types/react": "17.0.44"
},

Desktop (please complete the following information):

• OS: [Microsoft Windows 10 Enterprise]
• Browser [chrome]
• Version [10.0.19042 Build 19042]
  Additional context

[omeraplak]

Hey @joanaavelar ,
Thank you for contacting us! If you upgrade a dependency other than core you must also upgrade the core dependency because all dependencies depend on core. I'm not sure if we missed something here. If so could you please let us know?

[joanaavelar]

Hi @omeraplak,

I did not upgrade any dependency.
Just to give more context. On Wednesday, I set my refine-core dependency to 3.42.0, that it was the latest version. My app was working ok.
Then on Thursday, new refine-core versions were released and my app crashed. I had to upgrade refine-core version to 3.44.0, which was the latest version, to overcome this problem.
I need to be able to freeze dependencies, as this app is running in production.
I don't know what it is causing this problem.

[omeraplak]

Hey @joanaavelar ,
I have now created a StackBlitz to be able to reproduce the situation. https://stackblitz.com/edit/pankod-refine-s1fjfw?file=package.json

but I cannot reproduce the error here. How can we reproduce this issue?

[joanaavelar]

Hi @omeraplak,

Our login page does not call the default refine login page, it simply does an update on the url, bypassing a login page.

const Login  : React.FC = () => {
    const urlParams = getQueryString();
    const to = urlParams.get('to')
    let from = to || "/destination"; 
    window.location.href =  "something" + "?returnurl=/api/auth/redirect?to=" + from;

    return <></>
}

Our authProvider is very simple as well

import { AuthProvider } from "@pankod/refine-core";
import Cookies from "js-cookie";
import axios from "axios";
import { promises } from "dns";
const axiosInstance = axios.create();

export const TOKEN_KEY = "refine-auth";

export const authProvider: AuthProvider = {
  login: async () => {
    return Promise.resolve();
  },
  logout: () => {
    localStorage.removeItem(TOKEN_KEY);
    return Promise.resolve();
  },
  checkError: () => Promise.resolve(),
  checkAuth: async () => {
    let response = await axiosInstance.get("/api/auth")
    if (!(response.status === 200)) {
      const error =  response.statusText;
      return Promise.reject(error);
    }
    return Promise.resolve();
  },
  getPermissions: () => Promise.resolve(),
};

When not using the most recent version of the refine-core, the refine login appears.

[omeraplak]

Hey @joanaavelar ,
All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

Remember, Upgrade all your refine dependencies to the latest version now to avoid this problem in the future 💥

[joanaavelar]

Hi @omeraplak,

After the new release of refine-core, the internationalization stopped working.
I updated the package.json this way:
{
"name": "backoffice-product-catalog",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=16.3.0"
},
"dependencies": {
"@pankod/refine-antd": "3.33.0",
"@pankod/refine-core": "3.48.0",
"@pankod/refine-react-router-v6": "3.27.0",
"@pankod/refine-simple-rest": "3.27.0",
"@testing-library/jest-dom": "5.12.0",
"@testing-library/react": "11.2.6",
"@testing-library/user-event": "12.8.3",
"@types/jest": "26.0.23",
"@types/js-cookie": "3.0.2",
"@types/node": "12.20.10",
"@types/react": "17.0.44",
"@types/react-dom": "17.0.3",
"babel-loader": "^8.2.5",
"clean": "^4.0.2",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"export-to-csv-fix-source-map": "0.2.1",
"file-loader": "^6.2.0",
"humanize-string": "2.1.0",
"i18next": "21.8.13",
"i18next-http-backend": "1.4.1",
"js-cookie": "3.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-i18next": "11.18.0",
"react-markdown": "6.0.1",
"react-mde": "11.5.0",
"react-scripts": "5.0.1",
"side-channel": "1.0.4",
"source-map-loader": "^4.0.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.3.1",
"tslib": "2.3.1",
"typescript": "4.2.4",
"web-vitals": "1.1.1",
"webpack-cli": "^4.10.0",
"webpack-merge": "^5.8.0"
},
"resolutions": {
"@types/react": "17.0.44"
},
"scripts": {
"dev": "react-scripts start",
"build": "webpack --config webpack.prod.js",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "npm run dev"
},
"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"
]
},
"devDependencies": {
"webpack-cli": "^4.10.0",
"webpack-merge": "^5.8.0"
}
}
The app does not load. What am I doing wrong?

[omeraplak]

Hey @joanaavelar ,
Could you try to remove node_modules and package-lock.json?

[joanaavelar]

@omeraplak ,

I've done that and it still did not work.

[omeraplak]

I don't think there is any change that will cause this :/

FineFoods example running with latest refine version
https://example.admin.refine.dev/

[joanaavelar]

Can you share with me the package.json that you're using, so I can try on my end?
Maybe I am missing something there.

[omeraplak]

Yes, it's here
https://github.com/pankod/refine/blob/next/examples/fineFoods/admin/antd/package.json

[joanaavelar]

I copied your package.json to mine, keeping some libraries that my projected needed and an error was thrown:

Then I tried to install locally the project that you've just shared, and I got the same error.

What am I missing?

[omeraplak]

Could you add .npmrc file to your project root?

https://github.com/pankod/refine/blob/next/.npmrc

[joanaavelar]

I tried to install, on my end, the example provided and I got several warnings (below are some examples)

**Failed to parse source map from 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\index.ts'

Failed to parse source map from 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\layout\base.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\layout\base.ts'

Failed to parse source map from 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\layout\circular.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\layout\circular.ts'

Failed to parse source map from 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\layout\comboForce.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Downloads\refine-next\examples\fineFoods\admin\antd\node_modules@antv\layout\src\layout\comboForce.ts'**

The example does run.
Also the npm run was not running and I had to remove the following from start script - FAST_REFRESH=false DISABLE_ESLINT_PLUGIN=true

[omeraplak]

This is all about react-scripts@5, you can ignore warnings

[joanaavelar]

Hi @omeraplak ,

Just to let you know that the problem that I was having on internationalization was a bug on my end.
Now it's working properly, thanks for all your help.

[omeraplak]

Hey @joanaavelar ,
Thank you so much for letting me know 💥

[tqyellow]

Just to let you know that the problem that I was having on internationalization was a bug on my end. Now it's working properly, thanks for all your help.

hi @joanaavelar, any workaround to solve that internationalization bug you're encountered? I still have same redirection issues

[joanaavelar]

hi @tqyellow,
The internationalization problem was due to a comma that it was misplaced on json translation file.
The redirection problem was solved when a new refine-core version came out and I set it on my package.json like this:

"@craco/craco": "6.4.5",
"@pankod/refine-antd": "3.33.2",
"@pankod/refine-core": "3.50.0",
"@pankod/refine-kbar": "0.4.0",
"@pankod/refine-react-router-v6": "3.27.0",
"@pankod/refine-simple-rest": "3.27.0",