TypeError: this[MODULE_TYPE] is not a function

[asveloper]

I am getting this error on build when using with ant design 4.1.4 and react-scripts 3.4.1

[dawnmist]

You have not provided enough information for anyone to be able to help you.

The best I can do is to refer you to one other issue where the use of the mini-css-extract-plugin in react-scripts combined with an out-of-date rewire caused the same (relatively generic) error message to occur: https://github.com/timarney/react-app-rewired/issues/320

If you would like further help, we need to know:

• what your config-overrides.js looks like
• when does the error occur?
• what the full error message is (i.e. lines in the build log prior to the error, etc).

If possible, the best way to get help would be to provide an example repository that triggers the same error that can be used to try to debug the process.

[asveloper]

Hello @danylomarkov thank you for responding config-overrides.js looks like this

const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackModuleRule
} = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true
  }),
  addWebpackModuleRule(
    // This rule will only be used for converting our sass-variables to less-variables
    {
      test: /\.scss$/,
      issuer: /\.less$/,
      use: {
        loader: "./sassVarsToLess.js"
      }
    }
  )
)

it is happening when i try to build the app.

Full Error Message:

./node_modules/antd/es/grid/style/index.less
TypeError: this[MODULE_TYPE] is not a function

[dawnmist]

Can I ask what the sassVarsToLess.js script is doing?

The other two are known customize-cra overrides, and have been tested with the mini-css-extract-plugin for webpack previously. I'm wondering if something in the sassVarsToLess.js script is possibly triggering the existing known issue in mini-css-extract-plugin, or if this is indeed an issue we haven't seen before.

[asveloper]

sassVarsToLess.js -> it's just changing variables from @x to $x

module.exports = function (source) { return source.replace(/\$/ig, '@'); };

[asveloper]

i have tried your solution in #320. doesn't seems to be working with latest version.

[asveloper]

it's was working perfectly before the latest upgrade

[dawnmist]

That script looks perfectly fine - I wouldn't have expected it to cause issues.

Latest upgrade? Version 2.1.5 of react-app-rewired tagged Nov last year? Or of another project (maybe antd v4 apparently released 1.5-2 months ago)?

When searching for the possibility of any other related issues, I have seen one issue being raised regarding issues moving to the new version v4 of antd on stackoverflow. The error message appears to be the same one you're getting exactly.

There's two possible solutions on that stack overflow issue - one is to check that you are not using antd components from prior to antd v4 (upgrading any that were old to the new v4 version), the second was to remove react-app-rewired (I think - they got the project name wrong).

I'd recommend trying the first solution to begin with. If that does not resolve the issue, then I'd really like to get a minimal reproduction repository that I can work with to investigate further. I don't believe that having to remove react-app-rewired is a "desirable" outcome. I'd like to be able to trace through what is causing the issue in the first place, because if it really is our bug I'd like to fix it!

[dawnmist]

(Oh, and if it does turn out to be an antd component version issue, please let us know so that we can point the next person to run into issues in the correct direction).

[dawnmist]

Another possibility: check that you're using at least version 3.0.1 of less as documented in this antd issue.

[asveloper]

@dawnmist I have verified, none of the component from ant version 3 has been used and followed the guide provided by ant design here. Here is my package.json

"dependencies": { "@ant-design/icons": "^4.0.6", "@babel/runtime": "^7.9.2", "antd": "^4.1.4", "babel-plugin-import": "^1.13.0", "customize-cra": "^0.9.1", "less": "^3.11.1", "less-loader": "^5.0.0", "lodash": "^4.17.15", "node-sass": "^4.13.1", "node-sass-chokidar": "^1.4.0", "npm-run-all": "^4.1.5", "prop-types": "^15.7.2", "react": "^16.13.1", "react-app-rewired": "^2.1.5", "react-scripts": "^3.4.1", }

I will share repo with you shortly.

[asveloper]

also i have verified, build do work without react-app-rewired but i need to use react-app-rewired to override styles.

[asveloper]

@dawnmist got it working by updating CRA. Thank you for the help. Cheers!

[Monichre]

@dawnmist got it working by updating CRA. Thank you for the help. Cheers!

@asveloper I am experiencing the same problem. Can you be more specific in describing how updating CRA solved the issue? Would you mind sharing your repo with me?

[dawnmist]

@Monichre - I think you should have tagged @asveloper as they were the person who got things working by updating CRA. I do not have any more detail than what has been posted to this issue.

[Monichre]

@dawnmist whoops! thank you

[JuraJuki]

@asveloper Please describe in more detail how did you make thinks work with the update? How did you even update, and from what version to what version?

[DallasCarraher]

I'm also interested in a solution for this @asveloper . Would rather use react-app-rewired before trying craco to help us stay up while getting rid of our less...