search

timarney / react-app-rewired

Override create-react-app webpack configs without ejecting
MIT License
9.77k stars 425 forks source link

yarn start error: has an unknown property 'sideEffects'. #583

Closed kamil-nawrotkiewicz closed 2 years ago

kamil-nawrotkiewicz commented 2 years ago

Reproduction link

https://3x.ant.design/docs/react/use-with-create-react-app

Steps to reproduce

my: override-config.js

const rewired = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const rewireEslint = require('react-app-rewire-eslint')
const path = require('path')
const {override, fixBabelImports, addLessLoader} = require('customize-cra');

function rewire(config, env) {
    const cssLoader = rewired.getLoader(
        config.module.rules,
        rule => rule.test && String(rule.test) === String(/\.css$/)
    )
    const sassLoader = {
        test: /\.scss$/,
        use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
    }
    const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf
    oneOf.unshift(sassLoader)

    config = rewired.injectBabelPlugin('transform-decorators-legacy', config)
    config.resolve.modules.push(path.resolve('./src'))

    return config
}

// module.exports = rewire
module.exports = override(
    rewire,
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#a51d78'},
    }),
);

What is expected?

start of project by command: yarn start

What is actually happening?

yarn run v1.22.17 $ react-app-rewired start Failed to compile.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[4] has an unknown property 'sideEffects'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Environment Info
antd 3.26.20
React 5.0.7
System osx
Browser chrome
kamil-nawrotkiewicz commented 2 years ago

package.json

  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "homepage": "/",
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "1.3.5",
    "husky": "^2.1.0",
    "lint-staged": "^4.0.2",
    "node-sass": "^4.9.0",
    "prettier": "^1.5.3",
    "querystring": "^0.2.0",
    "react-app-rewire-eslint": "^0.2.3",
    "react-app-rewire-less": "2.1.1",
    "react-app-rewired": "1.6.2",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-scripts": "1.1.5",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^3.0.1",
    "sass-loader": "^7.0.1"
  },
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@react-native-community/netinfo": "^5.9.6",
    "@rowno/sparkline": "^3.0.1",
    "@sentry/browser": "^5.1.0",
    "@types/bazinga-translator": "0.0.4",
    "ajv": "^6.5.0",
    "antd": "^3.5.3",
    "array-move": "1.0.0",
    "axios": "^0.20.0",
    "babel-plugin-import": "1.11.2",
    "bazinga-translator": "^2.6.6",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "chartist": "^0.10.1",
    "chartist-plugin-tooltip": "^0.0.11",
    "classnames": "^2.2.5",
    "customize-cra": "0.9.0",
    "d3-dsv": "^1.0.8",
    "d3-format": "^1.2.1",
    "d3-scale": "^1.0.7",
    "d3-time-format": "^2.1.1",
    "draft-js": "^0.10.5",
    "enquire-js": "^0.2.1",
    "fetch-jsonp": "^1.1.3",
    "immutability-helper": "^2.7.0",
    "immutable": "^3.8.2",
    "jquery": "^3.3.1",
    "js-base64": "2.6.4",
    "lodash": "^4.17.10",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.25",
    "peity-react": "^0.0.7",
    "popper.js": "^1.14.3",
    "prop-types": "^15.5.10",
    "pusher-js": "^7.0.0",
    "qs": "^6.6.0",
    "rc-drawer": "^1.4.4",
    "react": "^16.4.0",
    "react-avatar-editor": "^10.2.1",
    "react-c3js": "^0.1.20",
    "react-chartist": "^0.13.1",
    "react-chartjs-2": "^2.7.0",
    "react-color": "^2.19.3",
    "react-container-query": "^0.11.0",
    "react-copy-to-clipboard": "^5.0.2",
    "react-custom-scrollbars": "^4.2.1",
    "react-delayed": "^0.2.3",
    "react-device-detect": "^1.15.0",
    "react-dom": "^16.4.0",
    "react-draft-wysiwyg": "^1.12.13",
    "react-helmet": "^5.2.0",
    "react-infinite-scroller": "^1.1.4",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-redux-spinner": "^1.1.3",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-scrollable-feed": "^1.2.0",
    "react-sortable-hoc": "^2.0.0",
    "react-stockcharts": "^0.7.0-beta.22",
    "react-syntax-highlighter": "^7.0.4",
    "react-transition-group": "^2.3.1",
    "react-virtualized": "^9.18.5",
    "redux": "^3.7.2",
    "redux-act": "^1.3.0",
    "redux-thunk": "^2.2.0",
    "reqwest": "^2.0.5",
    "swagger-ui-react": "3.26.0",
    "webpack": "4.46.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "eject": "react-scripts eject",
    "precommit": "lint-staged"
  },
  "proxy": "",
  "lint-staged": {
    "src/**/*.js": [
      "prettier --tab-width 2 --print-width 100 --single-quote --trailing-comma all --no-semi --parser babylon --write"
    ]
  }
}
dawnmist commented 2 years ago

Both react-app-rewire-less and react-app-rewire-eslint are very old and out of date - they were written for webpack 2/3 and are no longer maintained. Since you don't actually appear to be using them in the config-overrides.js functions, I'd recommend removing them entirely.

Can I please ask you to log out the contents of the modified config.modules.rules[1].oneOf[4] item to the console so that we can see what is being configured there? You can add the following two functions temporarily to get the log created and then cancel compiling any further:

// Reusable JSON.stringify replacer function that turns RegExp values into strings for debugging
// (Otherwise a RegExp is output as "{}" - this outputs it as "/*.tsx?/")
const stringifyConfig = (key, value) => {
  if (value instanceof RegExp) {
    return value.toString();
  }
  return value;
};

function logAndExit(config, env) {
  console.log("**** config.module.rules[1].oneOf[4]: ****");
  console.log(JSON.stringify(config.module.rules[1].oneOf[4], stringifyConfig, 2));
  throw Error('Exiting compilation');
}

And modify your final export so that it calls this last:

// module.exports = rewire
module.exports = override(
    rewire,
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#a51d78'},
    }),
    logAndExit
);

That should give you the content of the particular rule that Webpack is complaining about, so you have a start point for finding what part of the configuration is being a problem. The exit at that point is to stop CRA from clearing the screen and losing the log information that we're after.

Please provide the console log output from the above to help identify what rule is triggering the webpack error message.

dawnmist commented 2 years ago

Hang on a second. Why are you using the version of react-app-rewired that was for webpack 2 or 3 with webpack 4? You need version 2+ of react-app-rewired for webpack 4.

Customize-cra has the replacement scripts for adding babel plugins/using babelrc files/etc.

And CRA has out-of-the box support for SASS now, you don't need to add it manually anymore...

kamil-nawrotkiewicz commented 2 years ago

@dawnmist with webpack 2+ or 3+ i have the same problem :/

Unfortunately, this is an old project and i need dynamically change less variables, which is why i need add this

Problem is with this: sideEffects: false in config.modules.rules[1].oneOf[4]