🤔react+umi3项目，react版本为18.2.0，将s2升级到2.1.0版本之后运行报错

[LaraineR]

🏷 Version

Package	Version
@antv/s2	2.1.0
@antv/s2-react	2.1.0
@antv/s2-vue

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

react+umi3项目，react版本为18.2.0，将s2升级到2.1.0版本之后出现以下错误：

🔗 Reproduce Link

[HdjPoppy]

一样 的 哈哈

[oliver34]

同样的问题

[oliver34]

@LaraineR 你有解决吗

[LaraineR]

@LaraineR 你有解决吗

还没，应该是打包的问题

[lijinke666]

1. @antv/s2/extends 找不到

extends 是 @antv/s2 的 subModule, 需要检查下你的打包工具, 比如 umi3 封装的 webpack 版本是不是太低了, 不支持 exports, 或者检查下 resolve.mainFields 相关的配置, 有没有声明

  resolve: {
    extensions: ['.js', '.json'],
    mainFields: ['exports', 'module', 'main']
  }

2. @import '@antv/s2/esm/styles/variables.less' 找不到

这里需要检查下你的打包工具有没有什么别名之类的配置, 看起来是错误的转成相对路径了, 这样肯定是找不到.

2.x 是 Bundless, 这两个问题应该是类似的, 和 S2 无关, 看起来是打包工具的问题, 可以按照上诉思路排查下.

[lijinke666]

@import '@antv/s2/esm/styles/variables.less' 找不到

看了下, 有些低版本的打包工具如果不写 "~" => @import '~@antv/s2/esm/styles/variables.less' 的话

会识别成本地模块, 自动转成相对路径, 而不是从 node_modules 去找, 现代一点的打包工具是两者都会处理.

1. 升级下打包工具
2. 可以参考 https://github.com/webpack-contrib/less-loader#imports 的解决方案
3. less-loader 开启 javascriptEnabled, 配置别名, 让 @antv/s2 转成 node_modules/@antv/s2

 {
  loader: 'less-loader',
  options: {
    lessOptions: {
      paths: [path.resolve(__dirname, 'node_modules')],
      javascriptEnabled: true,
    },
  },
}


alias: {
  '@antv/s2': path.resolve(__dirname, 'node_modules/@antv/s2')
}

[hanshou101]

这个问题被我折腾了一个周末解决了。

简单来说，你的webpack.config.js 或者 umi的config.ts ，需要像这个样子：

// 定义一些别名。    
// 此处特别注意，加入了  【对小数点的处理】  ，原因可能和  webpack、umi、loader  的处理、交互有关；这是一个核心点

const _s2_alias_obj = {
  '@antv/s2/esm/shared/styles': path.resolve(process.cwd(), 'node_modules/@antv/s2/esm/shared/styles'),
  '@antv/s2/esm/styles'       : path.resolve(process.cwd(), 'node_modules/@antv/s2/esm/styles'),
  // 添加这些新的映射
  './@antv/s2/esm/shared/styles': path.resolve(process.cwd(), 'node_modules/@antv/s2/esm/shared/styles'),
  './@antv/s2/esm/styles'       : path.resolve(process.cwd(), 'node_modules/@antv/s2/esm/styles'),
};

// 在chainWebpack中，添加以下处理。
config.resolve.merge({
  alias       : {
    ..._s2_相关的问题._s2_alias_obj,
  },
});

// 在alias中，添加以下处理。
alias : {
  ..._s2_alias_obj ,
}

以上是解决问题的核心步骤。（对于我而言）

此外，补充一下我遇到该问题的具体环境，和采取的一些逐步逼近的方案

我之前的环境：

• Umi 3.4.x
• Webpack4
• 集成了 AntDesignPro 的脚手架（具体版本不记得了，反正自带的是 Umi 3.4.x ）

然后，我采取了一些前置的逐步逼近问题答案的方案：

• 1、Umi升级到3.5的最新版
• 2、从Webpack4升级到Webpack5（ 版本的差异细节与这个问题无关，自行解决）
• 3、Webpack5性能优化
• 4、Less的Imports优化（花费了大量的时间）

希望以上内容，能够帮到你 以及后来的朋友。祝你们幸福平安