在Next.js中使用Storefront UI时遇'useClickAway'导出错误

方案1：调整模块解析配置（Vite/Webpack） #

针对Vite项目，修改vite.config.js，强制使用react-use的ES模块版本：

export default defineConfig({
  resolve: {
    alias: {
      'react-use': 'react-use/dist/react-use.esm.js'
    }
  }
})

Webpack项目则修改webpack.config.js，优先解析ES模块：

module.exports = {
  resolve: {
    mainFields: ['module', 'main']
  }
}

方案2：降级react-use版本 #

新版本react-use的模块导出可能存在兼容问题，降级到稳定版本：

npm install react-use@17.4.0
# yarn用户执行：yarn add react-use@17.4.0

方案3：用Babel插件转换导入方式 #

安装babel-plugin-transform-default-import，并在.babelrc中配置：

{
  "plugins": [
    ["transform-default-import", { "modules": ["react-use"] }]
  ]
}

额外检查 #

确认Storefront UI版本与react-use版本兼容，可查看Storefront UI的package.json依赖声明，安装对应版本的react-use。

内容的提问来源于stack exchange，提问作者arimtiaz