Wordpress installing supabase and imports - javascript

I am trying to connect with my Supabase API and following the docs
Supabase DOCS
But everytime I write down:
import { createClient } from '#supabase/supabase-js'
I get an error "import declarations may only appear at top level of a module"
So is it even possible to use the npm install #supabase/supabase-js in my child theme and then uploading it?
Or what else is going wrong here?
I tried typing type="module" when trying it with the CDN link but still the same error.

Related

Cannot import a node module inside a module web worker on the browser

1- I am trying to import a node module into my worker. I could not find a way to get it done in a straightforward manner. Many people were suggesting using things like webpack or external libraries. Why can't I simply import the node module like a regular js module import like so?
import blazeface from '#tensorflow-models/blazeface';
meanwhile, I can import other modules I created like
import getDetectedFace from "./detectFace.js";
When this error occurs I do not see any output to the console that an error has occurred. I can only tell because my worker does nothing when I try this type of import. Is this normal?

A lot of different errors while trying to use Axios in my project

So I want to use axios, and so within my project I first npm init, then npm i axios --save
I then used const axios = require("axios"); but an error popped up saying "require is not defined". I am already running the app in a node environment
I read online saying I should use import. No worries. So I did import axios from "axios"; out came an error saying "import declarations may only appear at the top of the module"
Apparently that's because the script isn't a module. From the HTML file I added type="module" to the index.js script. It said module specifiers must start with ./, ../ or /
so I added import axios from "/axios", but it said "loading module from http://localhost/axios was blocked because of a disallowed mime type"
and at this point I have no clue what I can do, and the only way I can use axios is through the unpkg link which I put into my html file. But I want to use axios through import.
Do anyone of you have more solutions to this?

Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

I have a website hosted on Firebase hosting. I would like to add material theming to it(Buttons, Textfields, etc...). So, I ran the command npm install --save #material/textfield. I then extracted the folder called #material to my styles directory so that the structure looked like this:
Root
|
+---index.html
+---scripts/
+---app.js
+---styles/
+---main.css
+---#material/
+---……
I can reference css files from my main.css by adding #import "#material/textfield/dist/mdc.textfield.css"; to the start of my stylesheet. This correctly changes the styling of the button. However, when I go to do the same thing for js, it doesn't work.
According to Material Design's Github Repo, I should just be able to add
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
to the top of my script. However, when I deploy the code, and look at the console, the following error is returned: Uncaught SyntaxError: Unexpected token {. I have tried to require() the files, and change the path to import {MDCRipple} from '../styles/#material/ripple/dist/mdc.ripple.js';. This throws the same error. If I do: import * as MDCRipple from '../styles/#material/ripple/dist/mdc.ripple.js';, the same error is also thrown(except instead of the "{" character, it does not expect the "*" character).
This was supposed to be an easy conversion for my site, but it has given my tons of headaches. What am I doing wrong?
BTW: I know that the files the import statement is using exist. Also, isn't Node.js server-side?
Download latest version of node: https://nodejs.org/en/
Version 8.11.2 LTS will work.
The --experimental-modules flag can be used to enable features for ES2015 import. More information:
https://github.com/nodejs/node/blob/master/doc/api/esm.md

Error trying to load Google APIs

I'm using JSPM, ES6, Angular 1.5, TypeScript and googleapis#2.1.7.
When I try to import it:
import * as gapi from 'googleapis';
I get this error:
Error: The NodeJS "child_process" module is not available in the
browser.
Which I know is for protection, so what am I doing wrong here? I'm importing googleapis the same way I import everything else and the error I get comes from the Google Library itself:
Any ideas on what's wrong?
Thanks!

Error on import statement in JavaScript/React Native code

I'm trying to incorporate a React component for radio buttons in my iOS app that's written in React Native, however I get an error when trying to import the component using the method that the author specified.
I first installed the component in the root directory of the app's XCode project/source code using the following statement:
npm i -S react-native-radio-buttons
Everything looked like it went through fine, so I incorporated the code for the component into the JS file for the screen that would use it, but I get an error on the very first line (which contains the import statement).
The import statement goes like this:
import { RadioButtons } from 'react-native-radio-buttons'
And the error is:
Uncaught SyntaxError: Unexpected reserved word
As far as I can tell, that should be an acceptable way of doing things in ES6. If anyone could tell me why this would happen, I'd be grateful. Thanks in advance.
react-native-radio-buttons author here,
I assumed everybody was using Babel with ES6 features enabled. I should add that to the README.
Edit: instruction and example .babelrc added to 0.4.2
Please try add this .babelrc file to your project root, as the provided example does:
{
"whitelist": [
"es6.modules"
]
}
Are you using a tool to translate from ES6? "import" is not going to work. Have you tried:
var RadioButtons = require('react-native-radio-buttons');
instead?

Categories

Resources