Я разрабатываю расширение Azure DevOps и новичок в этом виде разработки. Я использую официальные образцы с Microsoft Github.
https://github.com/microsoft/azure-devops-extension-sample/tree/master
В частности, я изменяю образец WorkItemFormGroup, который находится в src/Samples/WorkItemFormGroup.
Проблема в том, что когда я пытаюсь импортировать клиент supabase:
import { createClient, SupabaseClient } from '@supabase/supabase-js';
export const supabaseClient: SupabaseClient = createClient(
"URL",
"AUTHTOKEN"
);
и запускаю команду «npm run build», я начинаю получать некоторые ошибки, похожие на синтаксические ошибки из веб-пакета:
Я не знаю, нужно ли мне вносить какие-то изменения в webpack.config.js или в tsconfig.json или запускать какую-то команду, чтобы что-то настроить. Как я уже сказал, я использую репозиторий от Microsoft и файл веб-пакета тот же, но я помещу его прямо здесь.
вебпак.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" }
]
})
]
};
Я могу воспроизвести ту же проблему при использовании аналогичного образца.
Причина проблемы в том, что новая версия пакета @supabase/supabase-js несовместима с текущим кодом.
Чтобы решить эту проблему, вам необходимо понизить версию пакета @supabase/supabase-js (например: 1.21.2) в файле package.json. Вот все доступные версии: @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.
Результат:
Спасибо! это решило проблему, но у меня еще вопрос, можно ли узнать какая часть кода несовместима? Я хочу знать, есть ли способ использовать последнюю версию супабазы.