尝试导入supabase客户端时出现Webpack错误

Question

我正在开发一个 Azure DevOps 扩展，我对这种开发非常陌生。我正在使用 Microsoft Github 的官方示例

https://github.com/microsoft/azure-devops-extension-sample/tree/master

具体来说，我正在修改位于 src/Samples/WorkItemFormGroup 中的 WorkItemFormGroup 示例。

问题是当我尝试导入supabase客户端时：

import { createClient, SupabaseClient } from '@supabase/supabase-js';


export const supabaseClient: SupabaseClient = createClient(
  "URL",
  "AUTHTOKEN"
);

并运行“npm run build”命令，我开始收到一些看起来像来自 webpack 的语法错误的错误：

我不知道是否需要在 webpack.config.js 或 tsconfig.json 中进行一些更改，或者运行某种命令来进行设置。正如我所说，我正在使用来自 microsoft 的存储库，并且 webpack 文件是相同的，但我将把它放在这里

webpack.config.js：

const path = require("path");
const fs = require("fs");
const CopyWebpackPlugin = require("copy-webpack-plugin");

// Webpack entry points. Mapping from resulting bundle name to the source file entry.
const entries = {};

// Loop through subfolders in the "Samples" folder and add an entry for each one
const samplesDir = path.join(__dirname, "src/Samples");
fs.readdirSync(samplesDir).filter(dir => {
    if (fs.statSync(path.join(samplesDir, dir)).isDirectory()) {
        entries[dir] = "./" + path.relative(process.cwd(), path.join(samplesDir, dir, dir));
    }
});

module.exports = {
    entry: entries,
    output: {
        filename: "[name]/[name].js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
            "azure-devops-extension-sdk": path.resolve("node_modules/azure-devops-extension-sdk")
        },
    },
    stats: {
        warnings: false
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "azure-devops-ui/buildScripts/css-variables-loader", "sass-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.woff$/,
                use: [{
                    loader: 'base64-inline-loader'
                }]
            },
            {
                test: /\.html$/,
                loader: "file-loader"
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin({
           patterns: [ 
               { from: "**/*.html", context: "src/Samples" }
           ]
        })
    ]
};

Answer 1

使用类似示例时我可以重现相同的问题。

问题的原因是新版本的包@supabase/supabase-js与当前代码不兼容。

要解决此问题，您需要降级package.json文件中@supabase/supabase-js包的版本（例如：1.21.2）。这是所有可用版本：@supabase/supabase-js

这是例子：

  ....
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.4",
    "@types/jest": "^26.0.3",
    "@types/react": "~16.8.2",
    "@types/react-dom": "~16.8.0",
    "base64-inline-loader": "^2.0.1",
    "copy-webpack-plugin": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "jest": "^26.1.0",
    "jest-junit-reporter": "^1.1.0",
    "rimraf": "~2.6.2",
    "sass": "^1.62.1",
    "sass-loader": "^13.0.0",
    "style-loader": "~0.23.1",
    "tfx-cli": "^0.11.0",
    "ts-jest": "^26.1.1",
    "ts-loader": "~5.2.2",
    "typescript": "^3.9.6",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0",
    "@supabase/supabase-js": "^1.21.2"
  },
.....

然后您可以重新安装所有软件包并再次运行 NPM build。

结果：