fix: nextjs lodash esm (#2666)

ant-design · Aug 26, 2024 · 713d127 · 713d127
1 parent 83aee0d
commit 713d127
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 25 deletions.
diff --git a/config/jest.js b/config/jest.js
@@ -8,7 +8,6 @@ const BaseJestConfig = {
     '\\.(less|css)$': 'jest-less-loader',
   },
   moduleNameMapper: {
-    '^lodash-es$': 'lodash',
     '^.+\\.(css|less)$': 'identity-obj-proxy',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

diff --git a/config/webpack.js b/config/webpack.js
@@ -40,7 +40,7 @@ const getWebpackConfig = (name, library) => {
         commonjs: 'react-dom',
         amd: 'react-dom',
       },
-      'lodash-es': {
+      lodash: {
         root: '_',
         commonjs2: 'lodash',
         commonjs: 'lodash',

diff --git a/packages/charts/CHANGELOG.md b/packages/charts/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.2.1
+
+`2024-08-26`
+
+- 🐞 [🧐[问题]ESM packages (lodash-es) need to be imported. ](https://github.com/ant-design/ant-design-charts/issues/2489)
+
 ## 2.1.2
 
 `2024-07-24`

diff --git a/packages/charts/package.json b/packages/charts/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@ant-design/charts",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "description": "AntV upper level visual component library",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"
@@ -30,10 +30,10 @@
     "lib:es": "tsc -p tsconfig.json --target ES5 --module ESNext --outDir es"
   },
   "dependencies": {
-    "@ant-design/plots": "^2.1.3"
+    "@ant-design/plots": "^2.1.3",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "lodash-es": "^4.17.21",
     "react": ">=16.8.4",
     "react-dom": ">=16.8.4"
   },

diff --git a/packages/plots/CHANGELOG.md b/packages/plots/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.3.1
+
+`2024-08-26`
+
+- 🐞 [🧐[问题]ESM packages (lodash-es) need to be imported. ](https://github.com/ant-design/ant-design-charts/issues/2489)
+
 ## 2.2.8
 ## 2.2.7
 `2024-08-05`

diff --git a/packages/plots/jest.config.js b/packages/plots/jest.config.js
@@ -4,7 +4,7 @@ module.exports = {
   ...(process.env.DEBUG_MODE === '1' ? OnlineConfig : {}),
   moduleNameMapper: {
     '^d3-((?!linear)\\S*)': `<rootDir>/../../node_modules/d3-$1/dist/d3-$1.min.js`,
-    '^lodash-es$': 'lodash',
+    '^lodash$': 'lodash',
     '^@ant-design/charts-util': `<rootDir>/../../packages/util/src`,
   },
 };
diff --git a/packages/plots/package.json b/packages/plots/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/plots",
-  "version": "2.2.8",
+  "version": "2.3.1",
   "description": "G2Plot Statistical chart",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"
@@ -40,10 +40,10 @@
     "@antv/event-emitter": "^0.1.3",
     "@antv/g": "^6.0.0",
     "@antv/g2": "^5.1.18",
-    "@antv/g2-extension-plot": "^0.2.0"
+    "@antv/g2-extension-plot": "^0.2.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "lodash-es": "^4.17.21",
     "react": ">=16.8.4",
     "react-dom": ">=16.8.4"
   },

diff --git a/packages/plots/src/core/utils/index.ts b/packages/plots/src/core/utils/index.ts
@@ -28,7 +28,7 @@ export {
   memoize,
   values,
   isUndefined,
-} from 'lodash-es';
+} from 'lodash';
 export { isCompositePlot } from './is-composite-plot';
 export { transformOptions } from './transform';
 export { deleteExcessKeys } from './delete-excess-keys';

diff --git a/packages/plots/src/util/index.ts b/packages/plots/src/util/index.ts
@@ -1,3 +1,3 @@
-export { isEqual, get, isString, isNumber, isFunction, isElement, cloneDeep, isArray, isObject } from 'lodash-es';
+export { isEqual, get, isString, isNumber, isFunction, isElement, cloneDeep, isArray, isObject } from 'lodash';
 export { createNode, uuid } from '@ant-design/charts-util';
 export { isValidElement } from './is-valid-element';
diff --git a/scripts/ast3.0/core/constants.js b/scripts/ast3.0/core/constants.js
@@ -1,4 +1,4 @@
-const { uniqBy, concat, filter, get } = require('lodash-es');
+const { uniqBy, concat, filter, get } = require('lodash');
 
 /**
  * 函数标识

diff --git a/scripts/ast3.0/core/parser.js b/scripts/ast3.0/core/parser.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const babel = require('@babel/core');
 const chalk = require('chalk');
-const { get, pick } = require('lodash-es');
+const { get, pick } = require('lodash');
 const { PIPELINE } = require('./constants');
 const { SETGLOBAL, RESETGLOBAL, INGLOBALRANGE } = require('./global');
 const {

diff --git a/scripts/ast3.0/core/utils.js b/scripts/ast3.0/core/utils.js
@@ -1,4 +1,4 @@
-const { get } = require('lodash-es');
+const { get } = require('lodash');
 const { SHAPES, SIGN } = require('./constants');
 const { SETGLOBAL } = require('./global');
 

diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts
@@ -4,7 +4,7 @@ if (window) {
   (window as any).react = require('react');
   (window as any).reactDom = require('react-dom');
   (window as any).fecha = require('fecha');
-  (window as any).lodashEs = require('lodash-es');
+  (window as any).lodashEs = require('lodash');
   /** 不要使用 link, react-dom 冲突 */
   (window as any).plots = require('@ant-design/plots');
   (window as any).d3Interpolate = require('d3-interpolate');

diff --git a/site/docs/manual/getting-started.zh.md b/site/docs/manual/getting-started.zh.md
@@ -20,7 +20,6 @@ import { Line } from '@ant-design/charts';
 
 ```ts
 "peerDependencies": {
-    "lodash-es": "^4.17.20",
     "react": ">=16.8.4",
     "react-dom": ">=16.8.4"
   }
@@ -42,19 +41,17 @@ npm install @ant-design/plots --save
 <script type="text/javascript" src="https://unpkg.com/@ant-design/plots@latest/dist/plots.min.js"></script>
 ```
 
-由于 @ant-design/charts 里面 externals 了 `react` 、`react-dom` 和 `lodash-es`，使用时需要通过 CDN 的方式在 `charts.min.js` 之前引入对应包的 CDN 地址。
+由于 @ant-design/charts 里面 externals 了 `react` 、`react-dom`，使用时需要通过 CDN 的方式在 `charts.min.js` 之前引入对应包的 CDN 地址。
 
 ```ts
 // webpack.config.js
 externals: {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'lodash-es': 'lodash'
 }
 // public/index.html
 <script crossorigin src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
 
 // 按需引入
 <script type="text/javascript" src="https://unpkg.com/@ant-design/plots@latest/dist/plots.min.js"></script>

diff --git a/site/examples/statistics/column/demo/annotation-label.js b/site/examples/statistics/column/demo/annotation-label.js
@@ -1,7 +1,7 @@
 import { Column } from '@ant-design/plots';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { forEach, groupBy } from 'lodash-es';
+import { forEach, groupBy } from 'lodash';
 
 const DemoColumn = () => {
   const [data, setData] = useState([]);

diff --git a/site/examples/statistics/sankey/demo/basic.js b/site/examples/statistics/sankey/demo/basic.js
@@ -5,8 +5,78 @@ import ReactDOM from 'react-dom';
 const DemoSankey = () => {
   const config = {
     data: {
-      type: 'fetch',
-      value: 'https://assets.antv.antgroup.com/g2/energy.json',
+      value: {
+        links: [
+          { source: "Agricultural 'waste'", target: 'Bio-conversion', value: 124.729 },
+          { source: 'Bio-conversion', target: 'Liquid', value: 0.597 },
+          { source: 'Bio-conversion', target: 'Losses', value: 26.862 },
+          { source: 'Bio-conversion', target: 'Solid', value: 280.322 },
+          { source: 'Bio-conversion', target: 'Gas', value: 81.144 },
+          { source: 'Biofuel imports', target: 'Liquid', value: 35 },
+          { source: 'Biomass imports', target: 'Solid', value: 35 },
+          { source: 'Coal imports', target: 'Coal', value: 11.606 },
+          { source: 'Coal reserves', target: 'Coal', value: 63.965 },
+          { source: 'Coal', target: 'Solid', value: 75.571 },
+          { source: 'District heating', target: 'Industry', value: 10.639 },
+          { source: 'District heating', target: 'Heating and cooling - commercial', value: 22.505 },
+          { source: 'District heating', target: 'Heating and cooling - homes', value: 46.184 },
+          { source: 'Electricity grid', target: 'Over generation / exports', value: 104.453 },
+          { source: 'Electricity grid', target: 'Heating and cooling - homes', value: 113.726 },
+          { source: 'Electricity grid', target: 'H2 conversion', value: 27.14 },
+          { source: 'Electricity grid', target: 'Industry', value: 342.165 },
+          { source: 'Electricity grid', target: 'Road transport', value: 37.797 },
+          { source: 'Electricity grid', target: 'Agriculture', value: 4.412 },
+          { source: 'Electricity grid', target: 'Heating and cooling - commercial', value: 40.858 },
+          { source: 'Electricity grid', target: 'Losses', value: 56.691 },
+          { source: 'Electricity grid', target: 'Rail transport', value: 7.863 },
+          { source: 'Electricity grid', target: 'Lighting & appliances - commercial', value: 90.008 },
+          { source: 'Electricity grid', target: 'Lighting & appliances - homes', value: 93.494 },
+          { source: 'Gas imports', target: 'Ngas', value: 40.719 },
+          { source: 'Gas reserves', target: 'Ngas', value: 82.233 },
+          { source: 'Gas', target: 'Heating and cooling - commercial', value: 0.129 },
+          { source: 'Gas', target: 'Losses', value: 1.401 },
+          { source: 'Gas', target: 'Thermal generation', value: 151.891 },
+          { source: 'Gas', target: 'Agriculture', value: 2.096 },
+          { source: 'Gas', target: 'Industry', value: 48.58 },
+          { source: 'Geothermal', target: 'Electricity grid', value: 7.013 },
+          { source: 'H2 conversion', target: 'H2', value: 20.897 },
+          { source: 'H2 conversion', target: 'Losses', value: 6.242 },
+          { source: 'H2', target: 'Road transport', value: 20.897 },
+          { source: 'Hydro', target: 'Electricity grid', value: 6.995 },
+          { source: 'Liquid', target: 'Industry', value: 121.066 },
+          { source: 'Liquid', target: 'International shipping', value: 128.69 },
+          { source: 'Liquid', target: 'Road transport', value: 135.835 },
+          { source: 'Liquid', target: 'Domestic aviation', value: 14.458 },
+          { source: 'Liquid', target: 'International aviation', value: 206.267 },
+          { source: 'Liquid', target: 'Agriculture', value: 3.64 },
+          { source: 'Liquid', target: 'National navigation', value: 33.218 },
+          { source: 'Liquid', target: 'Rail transport', value: 4.413 },
+          { source: 'Marine algae', target: 'Bio-conversion', value: 4.375 },
+          { source: 'Ngas', target: 'Gas', value: 122.952 },
+          { source: 'Nuclear', target: 'Thermal generation', value: 839.978 },
+          { source: 'Oil imports', target: 'Oil', value: 504.287 },
+          { source: 'Oil reserves', target: 'Oil', value: 107.703 },
+          { source: 'Oil', target: 'Liquid', value: 611.99 },
+          { source: 'Other waste', target: 'Solid', value: 56.587 },
+          { source: 'Other waste', target: 'Bio-conversion', value: 77.81 },
+          { source: 'Pumped heat', target: 'Heating and cooling - homes', value: 193.026 },
+          { source: 'Pumped heat', target: 'Heating and cooling - commercial', value: 70.672 },
+          { source: 'Solar PV', target: 'Electricity grid', value: 59.901 },
+          { source: 'Solar Thermal', target: 'Heating and cooling - homes', value: 19.263 },
+          { source: 'Solar', target: 'Solar Thermal', value: 19.263 },
+          { source: 'Solar', target: 'Solar PV', value: 59.901 },
+          { source: 'Solid', target: 'Agriculture', value: 0.882 },
+          { source: 'Solid', target: 'Thermal generation', value: 400.12 },
+          { source: 'Solid', target: 'Industry', value: 46.477 },
+          { source: 'Thermal generation', target: 'Electricity grid', value: 525.531 },
+          { source: 'Thermal generation', target: 'Losses', value: 787.129 },
+          { source: 'Thermal generation', target: 'District heating', value: 79.329 },
+          { source: 'Tidal', target: 'Electricity grid', value: 9.452 },
+          { source: 'UK land based bioenergy', target: 'Bio-conversion', value: 182.01 },
+          { source: 'Wave', target: 'Electricity grid', value: 19.013 },
+          { source: 'Wind', target: 'Electricity grid', value: 289.366 },
+        ],
+      },
     },
     scale: {
       color: {
@@ -31,6 +101,19 @@ const DemoSankey = () => {
       nodeStrokeWidth: 1.2,
       linkFillOpacity: 0.4,
     },
+    interaction: {
+      tooltip: {
+        render: (e, { title, items }) => {
+          console.log(title, items);
+          // const div = document.createElement('div');
+          // const h3 = document.createElement('h3');
+          // h3.innerHTML = title;
+          // div.appendChild(h3);
+          // div.innerHTML = `${source} → ${target}: ${value}`;
+          return <div>123</div>;
+        },
+      },
+    },
   };
   return <Sankey {...config} />;
 };

diff --git a/site/package.json b/site/package.json
@@ -45,7 +45,7 @@
     "@ant-design/plots": "workspace:*",
     "antd": "^4.16.13",
     "insert-css": "^2.0.0",
-    "lodash-es": "^4.17.21",
+    "lodash": "^4.17.21",
     "rc-util": "^5.39.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"

diff --git a/template/doc/demo.ejs b/template/doc/demo.ejs
@@ -2,12 +2,12 @@ import React, { useState, useEffect }from 'react';
 import ReactDOM from 'react-dom';
 import { <%= plotName %>  } from '@ant-design/<%= lib %>';
 <% if (utilName) { %>
-import { <%= utilName %> } from 'lodash-es';
+import { <%= utilName %> } from 'lodash';
 <% } %>
 
 const Demo<%= chartName %> = () => {
   <%- chartContent.toString() %>
   return <<%= chartName %> {...config} />;
 };
 
-ReactDOM.render(<Demo<%= chartName %> />, document.getElementById('container'));
+ReactDOM.render(<Demo<%= chartName %> />, document.getElementById('container'));