I'm getting this error again and again. I've provided projectID as well via env file, still getting
I'm new to NextJS and sanity as well, please help me out, your help will be appreciated.
import sanityClient from '#sanity/client';
import imageUrlBuilder from '#sanity/image-url';
export const client = sanityClient({
projectId: process.env.NEXT_APP_PROJECT_ID,
dataset: 'production',
apiVersion: '2022-03-10',
useCdn: true,
token: process.env.NEXT_APP_SANITY_TOKEN
});
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);
I'm following a tutorial on NextJS tutorial on youtube. I was expecting it to be run smoothly, but didn't work
So I have the same issue with you. So make sure your enviroment variables starts with VITE in case you are using VITE
In my case , I did with this way
import SanityClient from "#sanity/client"
import imageUrlBuilder from "#sanity/image-url";
// take these from sanity manage
export const client = new SanityClient({
projectId:import.meta.env.VITE_REACT_APP_SANITY_PROJECT_ID,
dataset:'production',
apiVersion:'2023-01-10',
useCdn:true,
token:import.meta.env.VITE_REACT_APP_SANITY_TOKEN,
})
const builder = imageUrlBuilder(client);
export const urlFor = (source : any) => builder.image(source);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
And my .env file is like this
VITE_REACT_APP_SANITY_PROJECT_ID = aweqfrstbsrgvsrtbvr
VITE_REACT_APP_SANITY_TOKEN = skm29cF1q1VsOgKIFty8D53j2dJKly9Fa..........
Make sure give a space in env file before and after the = sign
Related
I have been trying to make custom component in Adminjs 6.6.5 dashboard but Adminjs ComponentLoader not found error occurs. then i have tried to
import AdminJS from 'adminjs'
const {ComponentLoader} = AdminJS
but i get: Trying to bundle file 'file:/Users/Josip/WebstormProjects/ferry-backend/components/dashboard.jsx' but it doesn't exist
I would really appreciate help...
admin/index.js
import {ComponentLoader} from "adminjs";
const componentLoader = new ComponentLoader()
const Components = {
MyDashboard: componentLoader.override('Dashboard','../components/dashboard.jsx')
}
export { componentLoader, Components }
index.js
import {componentLoader, Components} from "./admin/index.js";
AdminJS.registerAdapter(AdminJSSequelize)
const admin = new AdminJS({
databases: [],
rootPath: '/admin',
resources:[UsersResources, GuestResources, SalesResources, FinancesResources],
components:{
edit: Components.MyDashboard
},
componentLoader
})
you are fixed this problem? I also ran into this problem and don't understand how to solve it
i fixed this problem. You need to do the import as follows
import AdminJs from 'adminjs';
// And now you can use any adminjs dependencies as follows
AdminJs.ValidationError(errors)
My usage example:
if(Object.keys(errors).length) {throw new AdminJs.ValidationError(errors)} else {...}
Good luck with your development!
I have the following code running on a Node server.
import admin from 'firebase-admin';
import {getAuth} from 'firebase/auth';
class MyFirebase {
constructor() {
console.log("MyFirebase Constructor");
this.firebaseApp = admin.initializeApp({
credential: admin.credential.cert("PATH_TO_CERT/cert.json"),
databaseURL: "https://DATABASE_URL",
});
console.log("App name="+firebaseApp.name);
this.defaultAuth = getAuth(firebaseApp);
this.database = this.firebaseApp.database();
// database ref code here...
}
}
and it throws the following error:
return app.container.getProvider(name);
TypeError: Cannot read property 'getProvider' of undefined
If I remove "firebaseApp" from the getAuth(..) call I get this error:
No Firebase app '[DEFAULT'] has been created - call Firebase
App.initializeApp() (app/no-app)
However the "console.log("App Name...")" line produces:
App name=[DEFAULT]
So clearly a DEFAULT app has been created. Additionally if I remove the "getAuth..." call the database calls pulling data from the realtime database below it work just fine, which seem to imply the authentication worked properly because I can access data from the database.
What the heck is going on?
You are confusing Firebase Admin SDK (Node.js) with Firebase Javascript SDK. The former is for the back-end, while the latter is for the front-end. I understand your confusion because the front-end package/s are installable via NPM, although they are meant to be bundled with front-end code.
You can't do this:
import admin from 'firebase-admin' // back-end code
import { getAuth } from 'firebase/auth' // front-end code !!!
const adminApp = admin.initializeApp(...)
getAuth(adminApp) // TypeScript actually catches this error
/*
Argument of type 'App' is not assignable to parameter of type 'FirebaseApp'.
Property 'automaticDataCollectionEnabled' is missing in type 'App' but required in type 'FirebaseApp'.ts(2345)
app-public.d.ts(92, 5): 'automaticDataCollectionEnabled' is declared here.
const adminApp: admin.app.App
*/
If you are on the back-end, just use adminApp.auth() to get the Auth instance. If on the front-end, you need to call getAuth with the front-end Firebase App instance:
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
const app = initializeApp(...)
const auth = getAuth(app)
The new modular apis have a slightly different syntax. The following should still work if you wrap it in a class, but as long as you only do this once at the top of your express? server you shouldn't need to use a class.
Also, I'm using the require syntax but imports should work too depending on your setup.
//Import each function from the correct module.
const { initializeApp, applicationDefault } = require("firebase-admin/app");
const { getAuth } = require("firebase-admin/auth");
const { getDatabase } = require("firebase-admin/database");
const app = initializeApp({
credential: applicationDefault(), //Don't forget to export your configuration json https://firebase.google.com/docs/admin/setup
databaseURL: "https://DATABASE_URL",
});
const auth = getAuth(app)
const database = getDatabase(app)
It's not super well documented but you can find hints in the Admin SDK reference: https://firebase.google.com/docs/reference/admin/node/firebase-admin.auth
One tip: In VSCode you should see the a description of each function when you hover over them, if you have the import path formatted correctly.
I'm quite new to NodeJS and I try to follow an example setting up a payment solution provided by Adyen. In their example code they give me this:
const config = new Config();
config.apiKey = MY_API_KEY;
config.merchantAccount = MY_ACCOUNT;
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
const paymentsResponse = checkout.paymentMethods({
amount: {
currency: "EUR",
value: 1000,
},
countryCode: "NL",
channel: "Web",
merchantAccount: config.merchantAccount
}).then(res => res);
However (maybe not so surprising) I get the following error:
const config = new Config();
^
ReferenceError: Config is not defined
What should Config() be here? Should I define a new class? (class Config {}?) Or am I missing something? Like something to include? Same for client, how can I call .setEnvironment if Client is a class I create?
Any help appreciated.
Turned out you are supposed to import #adyen/api-library with:
npm install --save #adyen/api-library
Source
After installing the API library, you can include the modules:
const {Client, Config, CheckoutAPI} = require('#adyen/api-library');
Just place it at the top of the file where the rest of your code lives (i.e., where you make that checkout.paymentMethods() call), and you should be good to go!
I have a react app running redux and thunk which has all been working fine. I need to persist the store state on page reload so that data is not lost, so have created a function which is storing data in the localstorage and then returning the data ready for adding to createStore (https://stackoverflow.com/a/45857898/801861). The data storage is working fine and returning the object ready for setting the sate. When adding the data object at createStore react fails to compile with this error:
Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function
Here is CURRENT CODE RETURNING ERROR:
const store = createStore(reducers, LoadState, applyMiddleware(thunk) );
//Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function
My original code which was running:
const store = createStore(reducers, applyMiddleware(thunk) );
I attempted to fix this following some similar issues I found online, compiles but breaks site code which was originally working fine:
const composeEnhancers = LoadState || compose;
const store = createStore(reducers, composeEnhancers( applyMiddleware(thunk) ) );
//Error: Actions must be plain objects. Use custom middleware for async actions.
Not sure what I need to change to get this to work, any help is appreciated.
I think you are following a tutorial which is performing tasks in a previous version of redux.
You need to create a composeEnhancer which will take in your Redux Dev Tools extension as shown
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
after importing compose from 'redux' obviously as shown -
import {createStore, compose, applyMiddleware} from 'redux';
and then, you can create the store as shown -
const Store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))
The error is self-explanatory. It tells you what to do exactly!!
Namely it tell you that you should compose your enhancers instead.
Here is how to it:
Step #1: Import 'compose' from redux library
import { createStore, applyMiddleware, compose } from 'redux';
Step #2: Compose your list of enhancers since you have more than one
const enhancers = [LoadState, applyMiddleware(thunk)];
const store = createStore(
reducers,
compose(...enhancers)
);
Refer to this page for more details.
I suspect your issue is within your LoadState. What ever is it? Here is a working createStore:
const store = createStore(
reducers,
{ counter: { count: 5 } },
applyMiddleware(() => dispatch => {
console.log('Yoyoyo')
return dispatch;
}));
Hope it solves your issue. Make sure to put actual initial state values and not some function or what ever it is LoadState is :)
You can use a package to persist the redux store into the local storage and you don't need to make your own function:
https://github.com/rt2zz/redux-persist
In the first example of the package you can see how to use the persistReducer() and persistStore() to save your state and then auto rehydrates on refresh page.
plz check this advanced store setup that may help you
enter link description here
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
import { createStore, applyMiddleware, compose } from 'redux';
+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware)
));
Am starting out with it React-Redux and faced the same issue. am not sure if it is the right approach but here we go.
the one issue you only need to fix in your code is to call the function,
store = createStore(reducers, LoadState(), applyMiddleware(thunk) );
this solution worked for me.
For redux saga users,
import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancer(applyMiddleware(sagaMiddleware)))
import { applyMiddleware, compose, createStore } from "redux";
import { devToolsEnhancer } from "redux-devtools-extension";
import { logger } from "./middlewares/logger";
import reducers from "./reducers";
import { todoReducer } from "./todoReducer";
const store = createStore(
reducers,
compose(applyMiddleware(logger), devToolsEnhancer({ trace: true }))
);
export default store;
I think I can best explain it with code. I have a file in webpack like the following:
import ReactDOMServer from 'react-dom/server';
import Server from './server';
import templateFn from './template';
export default (req, res) => {
const reactString = ReactDOMServer.renderToString(<Server />);
const template = templateFn(html);
res.send(template);
};
I also have an express application where I want to have access to the default exported function. If it makes any difference, this file is the webpack entry file. Here is what I tried in my express app:
const handleRequest = require(path.resolve(webpackConfig.output.path, webpackConfig.output.filename));
app.get('*', (req, res) => {
console.log(handleRequest);
});
I was trying to import the webpack generated file with the hope that I will be able to access the entry file's default export. Well, I was wrong as the output of the import was {}.
Is there a webpack plugin or some kind of a technique to do what I am trying to build? I don't want the express application to be part of the webpack build. That was the main reason I separated the code in this way.
I was able to access contents of webpack using library parameter (webpack.config.js):
output: {
path: ...,
filename: ...,
library: 'myapp',
libraryTarget: 'commonjs'
}
Then access it in the code:
const output = require(path.resolve(webpackConfig.output.path, webpackConfig.output.filename));
const defaultExportFunction = output.myapp.default;