fix: use esm import as the default import way for fix use in Remix (#520

)

* fix: use esm import as the default import way for fix use in Remix and NextJS

* chore: add changelog

* chore: use lodash.merge for replace lodash

* chore: use lodash-es

* fix: add @types/lodash-es

.changeset/rare-items-roll.md

@@ -0,0 +1,9 @@
+---
+'@ant-design/web3-assets': patch
+'@ant-design/web3-common': patch
+'@ant-design/web3-icons': patch
+'@ant-design/web3-wagmi': patch
+'@ant-design/web3': patch
+---
+
+fix: use esm import as the default import way for fix use in Remix and NextJS

.fatherrc.base.ts

@@ -31,5 +31,7 @@ export default defineConfig({
         },
       },
     ],
+    // Auto add .js extension for import in node environment when use with NextJS and Remix.
+    'babel-plugin-add-import-extension',
   ],
 });

package.json

@@ -65,6 +65,8 @@
     "@vitest/coverage-v8": "^1.1.0",
     "antd": "^5.13.2",
     "antd-style": "^3.6.1",
+    "babel-plugin-add-import-extension": "^1.6.0",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "classnames": "^2.3.2",
     "dumi": "^2.2.16",
     "eslint": "^8.56.0",

packages/assets/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ant-design/web3-assets",
   "version": "1.2.1",
-  "main": "dist/lib/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
   "exports": {

packages/common/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ant-design/web3-common",
   "version": "1.3.2",
-  "main": "dist/lib/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
   "exports": {
@@ -39,11 +40,12 @@
     "build": "father build"
   },
   "dependencies": {
-    "lodash": "^4.17.21"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
+    "@types/lodash-es": "^4.17.12",
     "antd": "^5.12.4",
     "father": "^4.3.8",
     "react": "^18.2.0",

packages/common/src/web3-config-provider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { merge } from 'lodash';
+import { merge } from 'lodash-es';
 
 import defaultLocale from '../locale/default';
 import { ConfigContext, type ConfigConsumerProps, type Web3ConfigProviderProps } from './context';

packages/icons/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ant-design/web3-icons",
   "version": "1.3.1",
-  "main": "dist/lib/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
   "exports": {
@@ -42,7 +43,6 @@
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "antd": "^5.12.4",
-    "babel-plugin-inline-react-svg": "^2.0.2",
     "father": "^4.3.8",
     "glob": "^10.3.10",
     "react": "^18.2.0",

packages/wagmi/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ant-design/web3-wagmi",
   "version": "2.2.1",
-  "main": "dist/lib/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
   "exports": {

packages/web3/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ant-design/web3",
   "version": "1.4.0",
-  "main": "dist/lib/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
   "exports": {