Site cannot build project because it cannot find “@netlify/edge-functions” module. I have a netlify/edge-functions folder in my typescript + react project. Not sure what could be wrong. Any guidance would be appreciated. Thanks!
netlify/edge-funcyions/geolocation.ts
import type { Context } from "@netlify/edge-functions";
export default async (req: Request, context: Context) => {
const { geo } = context;
const isBlocked = geo.country?.code === "US";
const country = geo.country?.code || "Unknown";
return new Response(JSON.stringify({ isBlocked, country }), {
headers: {
"Content-Type": "application/json",
"Cache-Control": "public, max-age=3600",
},
});
};
export const config = {
path: "/api/geolocation",
};
netlify.toml
[build]
command = "CI= npm run build"
[[redirects]]
from = "/*"
to = "/"
status = 200
[dev]
port = 3000
targetPort = 8080
publish = "dist"
command = "npm run build"
tsconfig:
{
"compilerOptions": {
"outDir": "dist",
"esModuleInterop": true,
"jsx": "react",
"resolveJsonModule": true,
"allowJs": false,
"skipLibCheck": true,
"downlevelIteration": true,
"strict": true,
"sourceMap": true,
"module": "ES2020",
"target": "ES2020",
"lib": ["dom", "dom.iterable", "esnext"],
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"moduleResolution": "node",
"isolatedModules": false,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
"exclude": ["node_modules", "**/dist"]
}
webpack:
// webpack.config.mjs
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import CopyWebpackPlugin from "copy-webpack-plugin";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
entry: "./src/index.tsx",
output: {
filename: "index.[contenthash].js",
path: path.join(__dirname, "dist"),
publicPath: "/",
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
alias: {
"swiper/css": "swiper/swiper-bundle.min.css",
"@": path.resolve(__dirname, "src"),
},
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
exclude: (modulePath) => {
return (
/node_modules/.test(modulePath) &&
!/node_modules\/@walletconnect/.test(modulePath) &&
!/node_modules\/react-redux/.test(modulePath)
);
},
},
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
babelrc: false,
presets: [
"@babel/preset-typescript",
["@babel/preset-env", { targets: { browsers: "> 5%, not IE <= 11" } }],
"@babel/preset-react",
],
plugins: [
"babel-plugin-styled-components",
],
},
},
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { esModule: false },
},
"css-loader",
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader",
options: {
name: "[name].[contenthash].[ext]",
publicPath: "/",
esModule: true,
},
},
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto",
},
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "src/assets",
to: "assets",
globOptions: {
ignore: ["**/favicon.ico"],
},
},
{
from: "src/assets/favicon.ico",
to: "assets/favicon.ico",
},
],
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
}),
new ForkTsCheckerWebpackPlugin(),
new HtmlWebpackPlugin({
template: "src/index.html",
}),
],
devServer: {
historyApiFallback: true,
host: "0.0.0.0",
proxy: {
"/api": "http://localhost:3000",
},
},
ignoreWarnings: [
(warning) => {
return /Failed to parse source map/.test(warning.message);
},
],
};