Module not found: Error: Package path ./lib/interaction/utils is not exported

[loveshiun]

• G2 Version: 5.0.22
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

Error when upgrading from 5.0.20 to 5.0.22

my code contains

import {useState} from '@antv/g2/lib/interaction/utils';

and after upgrading to 5.0.22, it shows

Error: Module not found: Error: Package path ./lib/interaction/utils is not exported from package /node_modules/@antv/g2 (see exports field in /node_modules/@antv/g2/package.json)

[xcy960815]

Downgrade to @5.0.20 first, this problem will be fixed later

[lvisei]

This exports needs to be repaired https://github.com/antvis/G2/pull/5450/files

[xcy960815]

This exports needs to be repaired https://github.com/antvis/G2/pull/5450/files

It is already being fixed, and it is expected that the next version will be better

[lvisei]

问题背景来源：Nuxt 中不支持 G2

其问题出在: Nuxt SSR 模式打包的时候使用的 G2 CommonJS 模式，但 G2 依赖了 D3 的包，D3 的产物包只支持 ESM，故出现语法混用的情况 dynamic import() which is available in all CommonJS modules

Nuxt 为什么会走 CommonJS ？

Nuxt2 的策略，CJS file ('main') for the server build and use the ESM file ('module') for the client build，Nuxt3 server build 也开启支持 ESM，需要库设置 type: 'module' 或 文件为 .mjs，故使用 G2 还是走的 CommonJS 模式。

解决这个问题有两个思考：

• 从 Nuxt 使用侧面解决，使用 Transpiling Libraries 或者 Aliasing Libraries

• G2 层面解决，有两个方案：

  • 方案一：像 D3 一样 入口文件改成 ESM 模式
  • 方案二：使用实验性的包文件入口 exports 语法 ，打包工具都支持了，webpack exports syntax，问题也不大，只不过添加之后是 breaking change！exports 权重高于 main、module

目前 PR 这样改需要确认的是，类型文件独立引入的时候，需不需要考虑进去。

cc @hustcc @pearmini

[xcy960815]

问题背景来源：Nuxt 中不支持 G2

其问题出在: Nuxt SSR 模式打包的时候使用的 G2 CommonJS 模式，但 G2 依赖了 D3 的包，D3 的产物包只支持 ESM，故出现语法混用的情况 dynamic import() which is available in all CommonJS modules

Nuxt 为什么会走 CommonJS ？

Nuxt2 的策略，CJS file ('main') for the server build and use the ESM file ('module') for the client build，Nuxt3 server build 也开启支持 ESM，需要库设置 type: 'module' 或 文件为 .mjs，故使用 G2 还是走的 CommonJS 模式。

解决这个问题有两个思考：

* 从 Nuxt 使用侧面解决，使用 [Transpiling Libraries](https://nuxt.com/docs/guide/concepts/esm#transpiling-libraries) 或者 [Aliasing Libraries](https://nuxt.com/docs/guide/concepts/esm#aliasing-libraries)

* G2 层面解决，有两个方案：
  
  * 方案一：像 D3 一样 入口文件改成 [ESM 模式](https://nuxt.com/docs/guide/concepts/esm#library-author-guide)
  * 方案二：使用实验性的包文件入口 [exports](https://nodejs.org/api/packages.html#determining-package-manager) 语法 ，打包工具都支持了，webpack [exports syntax](https://webpack.js.org/guides/package-exports/)，问题也不大，只不过添加之后是 breaking change！exports 权重高于 main、module

目前 PR 这样改需要确认的是，类型文件独立引入的时候，需不需要考虑进去。

cc @hustcc @pearmini

应该是支持 exports 的node版本 exports 权重高于 main、module，不支持的node版本依旧还是走 main 和 module

[lvisei]

是的，Node 12，对于打包工具而言，也做了一层保障

[pearmini]

@loveshiun I’m wondering why you use useState? It is not encouraged to use it, because it's am unstable non-public API.

[loveshiun]

I want to use setState() to make some elements to be 'selected' or to any other previously interacted status.

For example in this page: g2 interaction doc, after selecting letter A, B and C, I want it to keep the 'selected' status after refreshing the page.

A common scenario derived from the above example may be: when a user searching for names started with letter A, B and C, after selecting these letters, another div below this chart will display filtered user names.

No matter it's importing user interacted data or load from a new url, like: https://www.google.com/search?q=test the string 'test' will be in the input box.

So I tried something like:

import {useState} from '@antv/g2/lib/interaction/utils';

const { setState, removeState, hasState } = useState({...});
setState(element, 'selected');

to have the previously interacted statuses (in this example, names and ages).

[pearmini]

You can usechart.emit('elementHilight, {} ) to init state.

[loveshiun]

@pearmini Thank you! 🤗