CODEWITHSUNDEEP
reactjstypescriptwebpackantd
fold4wrap5
fold4wrap5

Reputation: 205

Webpack cannot resolve ant design modules

I'm trying to setup react with typescript and Antdesign without the react-create-app overhead. When I import an Antdesign component in a react component, I get errors.

I was wondering my import was incorrect but importing the module like import Button from 'antd/es/button'; only throws Error: Can't resolve 'antd/es/button'...

package.json:

  "name": "myName",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@types/react": "^16.9.9",
    "@types/react-dom": "^16.9.2",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.1",
    "tslint": "^5.20.0",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {
    "antd": "^3.24.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

webpack.config.js:

    mode: "production",
    devtool: "source-map",
    resolve: {
        extensions: ["js", ".ts", ".tsx"]
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {   
                        loader: "ts-loader"
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

index.tsx:

import * as ReactDOM from "react-dom";
import { Button } from "antd";

ReactDOM.render(
    <div>
        <Button>Click Me!</Button>
    </div>,
    document.getElementById("app")
);

index.html:

<html>
    <body>
        <div id="app"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>

When I run npx webpack it runs through all the different ant design components and for each it will give me the following error:

Module not found: Error: Can't resolve './upload' in '/Userpath/node_modules/antd/es'
 @ ./node_modules/antd/es/index.js 66:0-45 66:0-45
 @ ./src/index.tsx```

Upvotes: 5

Views: 10050

Answers (1)

Jeff Tian
Jeff Tian

Reputation: 5893

I met the same exact issue, and finally fixed it by upgrade antd from 3.26.2 to 3.26.11.

You may check your package.json too.

Upvotes: 1

Related Questions