Webpack error when trying to import supabase client

Question

i'm developing an Azure DevOps Extension and i'm very new at this kind of development. I'm using the official samples from Microsoft Github

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

Specifically, i'm modifying the WorkItemFormGroup sample that is located in src/Samples/WorkItemFormGroup.

The problem is that when I try to import the supabase client:

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


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

and run the 'npm run build' command, I start getting some errors that looks like syntax errors from webpack:

WEBPACK ERRORS:

I don't know if I have to make some changes in the webpack.config.js or in the tsconfig.json, or run some kind of command to set something up. As I say, i'm using the repository from microsoft and the webpack file is the same, but I'll put it right here

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

I can reproduce the same issue when using the similar sample.

The cause of the issue is that the new version of the package @supabase/supabase-js is incompatible with the current code.

To solve this issue, you need to downgrade the version of the @supabase/supabase-js package(for example: 1.21.2) in package.json file. Here is all available version: @supabase/supabase-js

Here is the example:

  ....
  "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"
  },
.....

Then you can re-install all packages and run NPM build again.

Result: