upgrade to @craco/craco@alpha problems

[TimRChen]

Hey everyone, after upgrade to @craco/craco@alpha, my item just meet this problem. i try use fallback: { './HTML5Backend': 'HTML5Backend.js', }, but it not work. so i don't know how it deal. anyone could tell me how this solve?

ERROR in ./node_modules/.pnpm/react-dnd-html5-backend@9.3.2/node_modules/react-dnd-html5-backend/dist/esm/index.js 1:0-42

Module not found: Error: Can't resolve './HTML5Backend' in '/Users/tim/xxx/node_modules/.pnpm/react-dnd-html5-backend@9.3.2/node_modules/react-dnd-html5-backend/dist/esm'
Did you mean 'HTML5Backend.js'?
BREAKING CHANGE: The request './HTML5Backend' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[TimRChen]

Module not found: Error: Can't resolve 'stream' in '/Users/tim/xxx/node_modules/sax/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/@antv/layout/es/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/index.ts'

WARNING in ./node_modules/@antv/layout/es/layout/base.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/layout/base.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/layout/base.ts'

WARNING in ./node_modules/@antv/layout/es/layout/circular.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/layout/circular.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/layout/circular.ts'

[TimRChen]

Module not found: Error: Can't resolve 'stream' in '/Users/tim/xxx/node_modules/sax/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/@antv/layout/es/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/index.ts'

WARNING in ./node_modules/@antv/layout/es/layout/base.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/layout/base.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/layout/base.ts'

WARNING in ./node_modules/@antv/layout/es/layout/circular.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/layout/circular.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/layout/circular.ts'

and use npm install, the log like this.

[TimRChen]

WARNING in ./node_modules/@antv/layout/es/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/tim/xxx/node_modules/@antv/layout/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/tim/xxx/node_modules/@antv/layout/src/index.ts'

solved by:

ignoreWarnings: [
    // Ignore warnings raised by source-map-loader
    // See: https://github.com/facebook/create-react-app/pull/11752
    { message: /source-map-loader/ },
],

[dilanx]

Are you sure this is an issue with craco 7 alpha and not other packages as a result of upgrading to CRA 5? You shouldn't need to update craco to 7 alpha unless you're using react-scripts 5 and webpack 5. Can you share your package.json?

[TimRChen]

Are you sure this is an issue with craco 7 alpha and not other packages as a result of upgrading to CRA 5? You shouldn't need to update craco to 7 alpha unless you're using react-scripts 5 and webpack 5. Can you share your package.json?

thanks @dilanx . I'm indeed using react-script 5 and here is package.json file.

"dependencies": {
    "@ant-design/charts": "1.2.11",
    "@fortawesome/fontawesome-svg-core": "6.1.1",
    "@fortawesome/free-regular-svg-icons": "6.1.1",
    "@fortawesome/free-solid-svg-icons": "6.1.1",
    "@fortawesome/react-fontawesome": "0.1.18",
    "ahooks": "2.10.8",
    "antd": "3.26.20",
    "axios": "^0.21.4",
    "dragm": "0.0.5",
    "enzyme": "3.7.0",
    "enzyme-adapter-react-16": "1.6.0",
    "http-proxy-middleware": "1.1.2",
    "js-cookie": "2.2.1",
    "lodash": "4.17.21",
    "moment": "2.29.1",
    "node-sass": "6.0.1",
    "qs": "6.10.1",
    "react": "^16.8.6",
    "react-activation": "0.9.7",
    "react-copy-to-clipboard": "5.0.3",
    "react-dom": "16.14.0",
    "react-flip-move": "3.0.4",
    "react-json-view": "1.21.3",
    "react-router-dom": "5.2.0",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "15.5.0",
    "react-test-renderer": "16.5.2",
    "typescript": "^4.4.3"
  },
  "devDependencies": {
    "@craco/craco": "7.0.0-alpha.7",
    "@fortawesome/fontawesome-common-types": "0.3.0",
    "@types/enzyme": "3.1.14",
    "@types/jest": "24.0.9",
    "@types/js-cookie": "2.2.6",
    "@types/lodash": "4.14.178",
    "@types/lodash-es": "4.17.6",
    "@types/node": "12.0.2",
    "@types/qs": "6.9.6",
    "@types/react": "17.0.14",
    "@types/react-copy-to-clipboard": "5.0.0",
    "@types/react-dom": "16.8.4",
    "@types/react-router-dom": "5.1.7",
    "@types/react-syntax-highlighter": "15.5.2",
    "@typescript-eslint/eslint-plugin": "4.31.1",
    "@typescript-eslint/parser": "4.31.1",
    "axios-mock-adapter": "^1.15.0",
    "branchlint": "0.0.2",
    "commitlint": "13.1.0",
    "craco-less": "2.1.0-alpha.0",
    "env-cmd": "9.0.1",
    "eslint": "7.30.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-react": "7.23.2",
    "eslint-plugin-react-hooks": "4.2.0",
    "husky": "7.0.4",
    "lint-staged": "11.1.2",
    "path-browserify": "1.0.1",
    "prettier": "2.3.2",
    "simple-progress-webpack-plugin": "2.0.0",
    "stylelint": "13.13.1",
    "stylelint-config-prettier": "8.0.2",
    "stylelint-prettier": "1.2.0",
    "webpack-bundle-analyzer": "4.4.2",
    "webpack-merge": "5.8.0",
    "yorkie": "2.0.0"
  },

[dilanx]

@TimRChen I'm not able to install those packages together due to some dependency conflicts. What version of node are you using, by the way?

[TimRChen]

@TimRChen I'm not able to install those packages together due to some dependency conflicts. What version of node are you using, by the way?

node version is v14.17.2. How to deal with dependency conflicts ? What should i start ?

[dilanx]

@TimRChen got it so you're using a pretty old node version. When I switched to that version and tried installing your dependencies, installation completed but it looked like a few dependencies for the starter CRA code were missing. I can recommend a few options to you.

First, I assume you upgraded to CRA 5 recently? The only reason you should upgrade to craco 7 alpha is if you are on CRA 5 (which you are according to your react-scripts version). Otherwise, you'd want to use craco 6. If you were upgrading all of your dependencies when you ran into this issue but it worked before, some of your dependencies may not be compatible with each other now that some of their versions have changed. You could revert back to the older versions so that your dependencies and their peer dependencies are all compatible with one another (basically just what you had before when it was working).

Second, if you're able to create a demo repo with the issue you're having so that I can try to recreate it on my own, I can look into it more. Right now, I'm unable to recreate your issue specifically (since I instead run into issues that are not related to craco). I don't believe your issue is related to craco, but if you're able to reproduce this in a demo repo, I can check it out.

[quiqueg]

i try use fallback: { './HTML5Backend': 'HTML5Backend.js', }, but it not work. so i don't know how it deal. anyone could tell me how this solve?

ERROR in ./node_modules/.pnpm/react-dnd-html5-backend@9.3.2/node_modules/react-dnd-html5-backend/dist/esm/index.js 1:0-42

Module not found: Error: Can't resolve './HTML5Backend' in '/Users/tim/xxx/node_modules/.pnpm/react-dnd-html5-backend@9.3.2/node_modules/react-dnd-html5-backend/dist/esm'
Did you mean 'HTML5Backend.js'?
BREAKING CHANGE: The request './HTML5Backend' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

@TimRChen I had issues at a previous company with older versions of react-dnd-html5-backend. I'm not sure which of your dependencies requires this package, but perhaps try upgrading it? I believe >11.0.0 of react-dnd-html5-backend worked for me.