Failed in create-react-app v4.0.1

[eleven-net-cn]

When used in a project created by create-react-app v4, local debugging is useful, but it is invalid after run build

[diamont1001]

can u show me your package.json?

[eleven-net-cn]

can u show me your package.json?

package.json dependencies

"dependencies": {
    "antd": "^4.6.4",
    "axios": "^0.21.1",
    "react": "^17.0.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.1"
  },
"devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.10.5",
    "@babel/preset-env": "^7.11.5",
    "@commitlint/cli": "9.1.2",
    "@commitlint/config-conventional": "9.1.2",
    "@craco/craco": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-css-modules": "^4.6.2",
    "@types/react-dom": "^17.0.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-react-css-modules": "^5.2.6",
    "circular-dependency-plugin": "^5.2.0",
    "commitizen": "^4.2.1",
    "craco-less": "^1.17.0",
    "craco-plugin-scoped-css": "^1.1.0",
    "cross-env": "^7.0.2",
    "cz-conventional-changelog": "^3.3.0",
    "env-cmd": "^10.1.0",
    "generic-names": "^3.0.0",
    "http-proxy-middleware": "^1.0.5",
    "husky": "^4.3.0",
    "lint-staged": "^10.4.0",
    "node-sass": "^4.14.1",
    "postcss-less": "^3.1.4",
    "postcss-scss": "^3.0.0",
    "prettier": "^2.2.1",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.2",
    "vconsole-webpack-plugin": "^1.5.2",
    "web-vitals": "^1.0.1",
    "webpack-bundle-analyzer": "^3.9.0"
  },

webpack config

new vConsolePlugin({
  enable: !isBuildProd,
}),

The problem can be reproduced by directly using create-react-app to create a project, then import your plugin, eg:

npx create-react-app my-app --template typescript

[diamont1001]

isBuildProd 这个有在哪里传进来吗？

[eleven-net-cn]

我看了下插件和 CRA 的源码，发现问题在 entry 这里，之前你那边也标了 TODO，如下图：

create-react-app v4，entry 在 build 时恰好是 string 。

[eleven-net-cn]

isBuildProd 这个有在哪里传进来吗？

isBuildProd 是自定义的环境变量，用来区分 test、uat 等编译环境的。

[diamont1001]

嗯，我今天我看到了，是 string 的问题，因为插件的原理是通过修改入口文件变量来完成的，但因为是参数形式，在函数体里是改变不了参数原来的值的，但是如果是数组类型的话，它传进来的只是数组的地址，改数组内容是生效的。所以 string 这个确实是不支持！

[diamont1001]

给 paths.appIndexJs 加个大括号就可以解决了：

: [paths.appIndexJs]

[eleven-net-cn]

给 paths.appIndexJs 加个大括号就可以解决了：

: [paths.appIndexJs]

create-react-app 的源码不 eject 的时候改不了 entry，尴尬了

[diamont1001]

尴尬，插件的实现原理看来要重新考虑下，看有没有更好的办法