Encountering the "encoding" Module Error when Implementing Nextjs-13 with Supabase

I encountered an issue while trying to utilize Supabase for handling data insertion/retrieval from my form. Upon compilation, I received an error stating that the encoding module was not found. Despite attempting cache cleaning and re-installation of npm modules, the error persisted.

Project Structure:

https://i.sstatic.net/8FZ0P.png

apply/page.tsx Code:

"use client"
import { supabase } from "lib/supabaseClient"

export default function Apply() {

    // This function called by button so we use "use client" at top.
    async function createApplyRecord() {
        const { error } = await supabase
            .from('applications')
            .insert({id: 1, fullname: "test", email: "aa", phone: "bb", githuburl: "cc", linkedinurl: "dd", about: "ee"})
            console.log("inserted")
            if(error) {
                console.log(error);
            }
    }

  return (SOME HTML CODE HERE)
}

Error Encountered: https://i.sstatic.net/4iVNK.png

Answer №2

To resolve the issue, I executed npm install encoding and successfully eliminated the error!

Answer №3

My approach to resolving the issue was rather straightforward - I simply utilized the following solution:

npm i -D encoding

On another note, it seems like the supabase community may have already addressed this particular problem. Unfortunately, they made changes to the authentication mode with the newest versions of next 13. This alteration presented a significant challenge for me as I wasn't keen on having to reconfigure the authentication settings for my project.

Answer №4

Make sure to update to the most recent version of supabase.

The problem has been resolved

Source https://github.com/supabase/supabase-js/issues/612#issuecomment-1713493284

Hello everyone, could you please verify if the issues persist even after upgrading supabase-js to v2.33.2? p.s. If you previously installed encoding as a workaround, try uninstalling it as well. Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the appropriate typescript type for an array payload when using the fetch API?

My current method involves using fetch to send URL encoded form data: private purchase = async () => { const { token } = await this.state.instance.requestPaymentMethod(); const formData = []; formData.push(`${encodeURIComponent("paymentTok ...

What might be causing my observable to fail to return a value?

I'm currently utilizing an API known as ngx-pwa localstorage, which serves as a wrapper for an indexeddb database. Within my Angular project, I have a service that interacts with this database through a method called getItem: getItem(key: string) { ...

Having trouble with npm - receiving an error message "read ECONNRESET" while trying to install hdwallet-provider

When I run: npm install @truffle/hdwallet-provider I encounter the ECONNRESET error while it is stuck on rollbackFailedOptional. I have already attempted the initial two solutions found here. Additionally, re-running npm install did not produce any issu ...

Troubleshooting problem with aligning grid items at the center in React using

I've been facing a challenge in centering my elements group using the material ui grid system. Problem: There seems to be excess margin space on the extreme right. Code snippet: const renderProjects = projects.map(project => ( <Grid item ...

Webpack build fails in NextJs due to Monaco editor integration issue

Issue with Monaco Editor and Webpack in Next.js SSR 1. I am facing an issue where the Monaco editor works fine in the development server, but when I try to import it dynamically to disable SSR (Server-Side Rendering), it emits a warning about using import ...

Is there a way to ensure that the version numbers in package.json are always updated to the latest compatible versions when running `npm update`?

In my package.json, I currently have "@material-ui/core": "^4.11.0" and I am looking to update it to the latest compatible minor version, which is currently "@material-ui/core": "^4.12.2". This update should apply to ...

The domain name or IP address does not correspond to the alternate names listed on the certificate

I am currently facing an issue with installing npm packages in my react native project. Every attempt to install a package from npm results in the error message shown below: fitz:tesseractOcrSample fitzmode$ npm i npm ERR! request to https://registry.npmj ...

Next.js presents a challenge with double-language applications

I am currently in the process of developing a web application using Next.js that will cater to users who speak my native language and English. I have a specific approach in mind: First, I plan to create a folder: /pages/en-us pages/ |--(all app pages) |- ...

Encountering a TypeError while working with Next.js 14 and MongoDB: The error "res.status is not a function"

Currently working on a Next.js project that involves MongoDB integration. I am using the app router to test API calls with the code below, and surprisingly, I am receiving a response from the database. import { NextApiRequest, NextApiResponse, NextApiHandl ...

Incorporating a d3 chart into an Angular 4 project

Currently, I am in the process of developing an Angular application using TypeScript. My aim is to incorporate a force directed network graph from Mike Boston built with d3, which can be viewed here. After successfully translating most of the code to Type ...

Is it possible for a website to instruct a user's browser to save the entire page locally?

Is it possible for a (single-page) website to instruct a user's browser to save the entire page locally? To provide some background: I am running a website on a server that bills based on bandwidth usage. Since the content of the site remains mostly ...

How to display currency input in Angular 2

Is there a way to dynamically format input as USD currency while typing? The input should have 2 decimal places and populate from right to left. For example, if I type 54.60 it should display as $0.05 -> $0.54 -> $5.46 -> $54.60. I found this PLUN ...

API Request 82007 failed due to an unsupported runtime: node16 is not compatible

After following the steps outlined at , I encountered an error when running npm run deploy. The error message displayed was: ERROR Failed API Request 82007 with the details mentioning an unsupported runtime: node16. More information on this error can be fo ...

exit out of React Dialog using a button

I have a scenario where I want to automatically open a dialog when the screen is visited, so I set the default state to true. To close the dialog, I created a custom button that, when clicked, should change the state to false. However, the dialog does no ...

Nextjs API call ended without a response being sent

I am currently facing a challenge in my NextJS project as my endpoint API does not support multiple calls, and I am looking to implement a data refresh every 3 minutes from the original source. To achieve this, I have integrated an API in NextJS by creati ...

Trying to access a private or protected member 'something' on a type parameter in Typescript is not permitted

class AnotherClass<U extends number> { protected anotherMethod(): void { } protected anotherOtherMethod(): ReturnType<this["anotherMethod"]> { // Private or protected member 'anotherMethod' cannot be accessed on a type para ...

Seeking a quick conversion method for transforming x or x[] into x[] in a single line of code

Is there a concise TypeScript one-liner that can replace the arrayOrMemberToArray function below? function arrayOrMemberToArray<T>(input: T | T[]): T[] { if(Arrary.isArray(input)) return input return [input] } Trying to cram this logic into a te ...

typescript - transforming text into numerical values

newbalance = (Number(this.balance)) + (Number(this.pastAmount)); The result for my newbalance calculation is coming back as undefined, even though this.balance is 34 and this.pastAmount is 23. I've set this up in the controller and I'm trying t ...

Issue with npm's Guetzli functionality not functioning as expected

Hi there, I'm attempting to install guetzli using npm, but I keep encountering an error message that says: /Users/annah/Downloads/helloworldGoogle/node_modules/guetzli/vendor/guetzli` binary doesn't seem to work correctly   ⚠ guetzli pre-b ...

Angular 5 Service Unit Testing for UPDATE Function

Currently, I am implementing a stepper feature with back, step, next steps. On the last step, when the user clicks 'done,' I need to call a service to update user data. While I have successfully tested the backStep() and nextStep() methods, I now ...