I'm using Supabase CDN's for a project. When I call the createClient() function this error comes up:
createClient is not defined
I tried it with an older version of the CDN, with another browser and using the old method of SupabaseClient.createClient, but I got:
SupabaseClient is not defined
Is the CDN not working correctly or something else?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Nothing to see here...</p>
<!-- Project -->
<script src="https://cdn.jsdelivr.net/npm/#supabase/supabase-js#2"></script>
<script src="main.js"></script>
</body>
</html>
const SupabaseKey = // api here
const SupabaseUrl =// URL here
const options = {
db: {
schema: 'public',
},
auth: {
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true
}
}
const supabase = createClient(SupabaseUrl, SupabaseKey, options)
I fixed it by adding an import statement in the JS file like this:
import createClient from 'https://cdn.jsdelivr.net/npm/#supabase/supabase-js/+esm'
The +esm at the end of the URL is from universal module and it now works.
Related
Following the getting started with FAST element guide here, I don't understand why the value of the attribute is not changing whenever I use the element in.
Even when following the guide completely by basically copying and pasting the sample code, I can't make it work.
Based on the code and markup below, I would expect that the h3 element has the value of test and not default.
Anybody who has same issue, or know what I might be doing wrong?
Btw, I'm using esbuild to bundle, transpile and serve the files.
import { FASTElement, customElement, attr, html } from "#microsoft/fast-element";
const template = html`
<div class="header">
<h3>My name is: ${x => x.greeting}</h3>
</div>
<div class="name-tag-body">
<slot>Default slot</slot>
</div>
`;
#customElement({
name: 'name-tag',
template: template
})
export class NameTag extends FASTElement {
#attr greeting: string = "default";
greetingChanged() {
console.log("greeting changed:", this.greeting);
}
connectedCallback() {
super.connectedCallback();
console.log("connectedCallback");
}
} }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<name-tag greeting="something"></name-tag>
</body>
</html>
The solution is to have the target property of the tsconfig.json file set to something other than ESNext. ES2016 works fine.
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE 3 (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like not all styles were loaded,
Please try enter to login into adminarea by url :
https://bi-currencies.my-demo-apps.tk/admin/currencies
credentials are in Login form
and pages looks like : https://prnt.sc/TCjBh0SefUMO 4
But if to refresh page with “CTRL+R” pages looks ok, in dark mode.
Any ideas why so and how that can be fixed?
More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with "bootstrap": "^4.6.0").
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )
I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home
I see this problem of other browsers of my Kubuntu 20 too.
Maybe problem is that that I use too different templates, but actually I use different layouts, so in
app/Http/Middleware/HandleInertiaRequests.php :
public function rootView(Request $request)
{
if ($request->segment(1) == 'user') {
return 'layouts/user';
}
if ($request->segment(1) == 'admin') {
return 'layouts/adminlte'; // TODO
}
return 'layouts/frontend'; // Current request is front-end
}
This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght#300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- Styles -->
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link rel="stylesheet" href="/css/theme.css">
<script src="/vendors/#popperjs/popper.min.js"></script>
<script src="/vendors/bootstrap/bootstrap.min.js"></script>
<script src="/vendors/is/is.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="/vendors/fontawesome/all.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
and admin template resources/views/layouts/adminlte.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Styles -->
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/css/fontawesome_all.min.css">
<link rel="stylesheet" href="/css/adminlte.min.css">
<link rel="stylesheet" href="/css/admin_custom.css">
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="/js/Chart.bundle.js"></script>
<script src="/js/OverlayScrollbars.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
1 common resources/js/app.js :
require('./bootstrap');
window.Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: false,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
require('#fortawesome/fontawesome-free/js/all.min.js');
// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import mitt from 'mitt';
window.emitter = mitt();
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
import Multiselect from '#vueform/multiselect'
import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";
const app = createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('inertia-link', Link)
.component('Paginate', Paginate)
.component('file-upload', VueUploadComponent)
.mixin({ methods: { route } })
.component('multiselect', Multiselect)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :
\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');
but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?
Thanks!
Once I was faced same problem with inertia and that works for me. Usually that happened when you used multiple-layouts, as well as those layout have different style-scripts.
Reason (problem):
As you have used one layout for frontend-pages (public pages) and other one for admin-pages.
So when user visited front-pages, all style scripts of frontend-layout loaded and it's work fine and looks good.
But, when user switched to admin-layout that's layout style-scripts not loaded. So, On hard-refresh (Crtl+R) that URL the appropriate layout style-scripts got loaded.
I read many article to switch layouts on run-time every article gives same solutions as you did in HandleInertiaRequests.php.
Solution:
Then I come to a point where I need to switch layout on clicking some link I did hard-loading as shown in below snippet instead of redirection by inertia-link:
<a :href="route('home')">
Home
</a>
By this way appropriate layout style-script got loaded.
My Assumption:
Moreover, I've seen your site-source-code (Ctrl+U) as shown in screenshot. You haven't loaded style-scripts by Laravel asset() helper method.
I suggest to try once by loading scripts & style link in blade file by Laravel standard approach (using asset() method) that might be a problem.
Attach CSS sheet
<link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
Attach JavaScript/jQuery scripts
<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>
After using asset() method, your links in site-source-code (Ctrl+U)
looks something like that:
Note:
make sure you must set appropriate APP_URL in .env file.
This is the error I am getting.
Refused to apply style from 'http://localhost:3000/public/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my index.js file
//Requiring Dependencies
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const path = require('path');
//To run and parse EJS
const engine = require('ejs-mate');
//Using EJS-Mate
app.engine('ejs' , engine);
app.set('view engine' , 'ejs');
app.set('views' , path.join(__dirname, 'views'));
app.use(express.urlencoded({extended: true}));
//For use of files like js and css in public directory
app.use(express.static(path.join(__dirname, './public')))
app.get('/' , (req , res) => {
})
app.get('/home' , (req , res) => {
res.render('layouts/boilerplate')
})
This is the boilerplate.ejs where i want to add the stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
<!-- BOOTSTRAP CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- NAVBAR -->
<%- include('../partials/navbar.ejs') %>
<!--BOOTSTRAP Javascript-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
The bootstrap CSS however is working. So I tried removing the "rel" error goes but the stylesheet is not applied. I also tried to use the base method and still did not work, also added type=text/css, and still didn't work. Any idea why it is not working?
I am working on a Firestore, Vue project and having an issue with building my project. Running the non-built files on a local server works just fine and after running the build command, the files all appear to be correct. However, after uploading the files to Firebase (or creating a local server using the built files using the firebase serve command), it just shows a blank page. So I inspected the files and the css and js files are the exact same as the HTML file.
I know that this guy had the same issue, Upload to Firebase Hosting not working correctly, but I have gone through every file I feel like may be the culprit and still cannot find where the issue is — although that may just be due to my lack of knowledge in how webpack works. I think it may be some misconfiguration in the vue.config.js file but not sure. I would appreciate any help in getting my project hosted! Thanks!
Here is my file structure:
- dist
- src
- assets
- css
- img
- js
- favicon.ico
- index.html
- public
- index.html
- src
- App.vue
- main.ts
- .firebaserc
- firebase.json
- package.json
- vue.config.js
Compiled index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=msapplication-tap-highlight content=no>
<meta name=description content="Steel Tech of the Ozarks designs & manufactures pre-engineered metal buildings, driven by an intentional, no-compromise passion for excellence.">
<meta name=keywords content=steel,building,metal,structural,design,manufacture>
<title>Company Name</title>
<link rel="shortcut icon" href=../src/assets/favicon/favicon.ico>
<meta name=theme-color content=#6e8995>
<link as=style href=/dist/src/assets/css/app.64e0dd85.css rel=preload>
<link as=style href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=preload>
<link as=script href=/dist/src/assets/js/app.00d6273a.js rel=preload>
<link as=script href=/dist/src/assets/js/chunk-vendors.90527da6.js rel=preload>
<link href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=stylesheet>
<link href=/dist/src/assets/css/app.64e0dd85.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app>
<script src=/dist/src/assets/js/chunk-vendors.90527da6.js></script>
<script src=/dist/src/assets/js/app.00d6273a.js></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<title>Company Name</title>
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="../src/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="../src/assets/favicon/safari-pinned-tab.svg" color="#ff6600">
<link rel="shortcut icon" href="../src/assets/favicon/favicon.ico">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Built files will be auto injected -->
<div id="app"/>
</body>
</html>
App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import '#/plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
.firebaserc
{
"projects": {
"default": "schedule-maxx"
}
}
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
vue.config.js
module.exports = {
runtimeCompiler: true,
lintOnSave: true,
productionSourceMap: false,
outputDir: 'dist',
assetsDir: 'src/assets',
baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/v1'
}
}
}
}
}
With regards to your file structure, in particular:
dist
public
index.html
and to the fact that you rewrite to /index.html (cf. firebase.json file)
I think that your firebase.json file should start as follows. (However, since you don't show what's in the dist directory I am not 100% sure!):
{
"hosting": {
"public": "public",
....
}
}
and the static directory generated by webpack should also be deployed under the public directory. It is most probably under the dist directory for the moment.
It looks like I just had my vue.config.js file configured incorrectly. I changed the baseUrl field from '/dist/' to '.' and the file paths in the compiled files were correct.
I am making a CRUD app in Nodejs/Expressjs, templating engine is EJS.
The idea for the update is display user_id from a database and when admin clicks on user_id it should redirect to edit_team.ejs page.
It is working fine but when it is redirecting to edit_team.ejs page, the css files are not getting load. I am getting below error
For every other .ejs files, all css files are loaded.
I have included 'public' folder in app.js file.
Code:
Folder Directory:
app.js:
app.use(express.static('app/public'));
view_team.ejs
<a class="button" href='/edit_team/<%= team[i].team_id %>'>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
edit_team.js:
var express = require('express');
var path = require('path');
const { Client } = require('pg')
const connectionString = 'postgresql://localhost:5432/idid';
//router object
var router = express.Router();
router.get('/edit_team/:id', function(req, res){
res.render('login/edit_team');
});
module.exports = router;
edit_team.ejs (pasting only head section):
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
can someone please help me trying to figure out what is wrong here?
A URL such as /edit_team/23 serves up edit_team.ejs, which contains the relative path css/bootstrap.min.css. This is relative to the /edit_team path, so it'll be edit_team/css/bootstrap.min.css, which probably isn't what you want.
You should be able to confirm this using your browser's dev tools. Look in the Network tab and check the paths for the files that aren't loading.
Try using paths that aren't relative to the current path, such as:
<link href="/css/bootstrap.min.css" rel="stylesheet">
Note the extra /.