在Saleor Storefront中集成LaunchDarkly时出现Webpack加载器错误

一、模块解析错误的修复 #

你碰到的Module parse failed错误，本质是webpack无法处理launchdarkly-js-client-sdk包内未转译的ES语法——Saleor Storefront默认webpack配置没有对这个第三方包做转译处理。

解决方法：

• 找到项目中的webpack配置文件（通常在packages/storefront/webpack目录下或根目录的webpack.config.js）
• 修改babel-loader规则，把launchdarkly-js-client-sdk加入需要转译的依赖列表：

  module.exports = {
    // ...其他配置项
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          // 排除node_modules中除launchdarkly包外的其他依赖，让babel处理这个包
          exclude: /node_modules\/(?!(launchdarkly-js-client-sdk)\/)/,
          use: 'babel-loader',
        },
      ],
    },
  };
  

二、组件代码的修正 #

你的代码存在两处逻辑问题：

1. 用withLDProvider包装App后，得到的高阶组件不需要再把原App作为子组件传入
2. 应该导出包装后的组件而非原App

修正后的代码：

const App = () => {
  return (
    <Layout>
      <Routes />
    </Layout>
  )
};

// 用withLDProvider包装App组件
const WrappedApp = withLDProvider({
  clientSideID: 'xxxxxxxxxxxx',
  context: {
    "kind": "user",
    "key": "user-key-123abc",
    "name": "Sandy Smith",
    "email": "sandy@example.com"
  },
  options: { /* ... */ }
})(App);

// 导出包装后的组件作为入口
export default WrappedApp;

之后在项目入口文件中直接渲染WrappedApp即可。

三、React Admin正常运行的原因 #

React Admin的webpack配置默认会对更多第三方依赖做转译处理，或者其使用的babel预设已经覆盖了launchdarkly-js-client-sdk中的语法特性，因此不会出现解析错误。

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