I had a working Xero API OAUTH integration, which has suddenly stopped working. I'm getting the following error:
Error: [UnexpectedValueException] Invalid response received from Authorization Server. Expected JSON. in /var/www/html/mnr-be/vendor/league/oauth2-client/src/Provider/AbstractProvider.php on line 539
Here's the relevant part of the composer.lock file:
{
"name": "cakephp/app",
...
"type": "project",
"version": "0.4.2",
"license": "Private, no license granted",
"repositories": [],
"require": {
"php": ">=7.2",
"burzum/cakephp-service-layer": "^2.0",
"cakephp/authentication": "^2.6",
"cakephp/authorization": "^2.0",
"cakephp/bake": "2.5.x",
"cakephp/cakephp": "4.2.*",
"cakephp/migrations": "^3.0",
"cakephp/plugin-installer": "^1.2",
"friendsofcake/crud-json-api": "^1.0.1",
"friendsofcake/search": "^6.0",
"josegonzalez/dotenv": "dev-master",
"league/oauth2-client": "^2.5",
"mobiledetect/mobiledetectlib": "^2.8",
"robmorgan/phinx": "^0.12.4",
"symfony/yaml": "^5.1",
"xeroapi/xero-php-oauth2": "^2.1"
},
Any idea why? Has the API been changed?
UPDATE
The response from the server:
<html>
<head>
<title>Access Denied</title>
</head>
<body>
<h1>Access Denied</h1>
You don't have permission to access
"http://identity.xero.com/connect/token" on this
server.
<p>Reference #18.b0c35068.1667675819.108773f6</p>
</body>
</html>
According to Xero's documentation (https://developer.xero.com/documentation/guides/oauth2/troubleshooting/#tls-errors):
But I'm using ngrok v2 and caddy v2, which both implement TLS 1.2, so that can't be the problem.
I've also tried updating to "xeroapi/xero-php-oauth2": "2.17.0", the latest version of the library and I get the same error.
Turns out there was an issue with the Xero API's firewall that wasn't letting ngrok through. I wrote to them and they've made a change that solves the issue.
Related
I created a simple react application using npx create-react-app and made minor modifications which looks like this initially.
Initial Page
I then build it and deployed it to S3 bucket. I have enabled static website hosting, enabled public access and set bucket policy as
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::s3-demo-react/*"
}
]
}
But the S3 bucket url displayed Blank White Screen like this
White Screen on Initial Deployment
I researched and came up with answer to add homepage to my package.json. My Package.json looks like this after the change.
{
"name": "s3-app",
"homepage": "./",
"version": "0.1.0",
"private": true,
I build the project and the asset-manifest.json inside build file has following code
{
"files": {
"main.css": "./static/css/main.073c9b0a.css",
"main.js": "./static/js/main.d4f30fdf.js",
"static/js/787.668da4e5.chunk.js": "./static/js/787.668da4e5.chunk.js",
"static/media/logo.svg": "./static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg",
"index.html": "./index.html",
"main.073c9b0a.css.map": "./static/css/main.073c9b0a.css.map",
"main.d4f30fdf.js.map": "./static/js/main.d4f30fdf.js.map",
"787.668da4e5.chunk.js.map": "./static/js/787.668da4e5.chunk.js.map"
},
"entrypoints": [
"static/css/main.073c9b0a.css",
"static/js/main.d4f30fdf.js"
]
}
I redeployed the application but the same issue persist.
Still the whitescreen with css and js 404
I watched few videos on deployment where all of them hosted their site even without specifying homepage in package.json and it worked as expected for them. Am I missing something here?
Problem
When running e2e tests with Capybara in my Rails/React app, whenever the javascript uses React, it has trouble executing the code. <div id="root"></div> remains empty while the code renders properly locally and in docker. I've duplicated this running the capybara tests locally as well. What is odd is that if I add a document.getElementById("root").innerText = "Foo bar" it runs the javascript and either doesn't know how to execute the ReactDOM.render bit or just doesn't. When running tests against Stimulus code, it renders properly. For funsies, I downgraded to react 16 but had the same issue.
Background:
We use Vite js to bundle the javascript which I don't think is related but definitely could be. The app runs in an alpine docker environment but I can reproduce it locally so I don't think its specific environment related. Rails routes are empty endpoints that serves an empty html page with a #root div for React to hydrate and route accordingly. We're not using the react-rails gem. In the output of the html page, the assets are all pointing at the correct js files and the code does exist in those files.
Code
The main runtime code for capybara tests. I've included the code for the small react snippet I tested with the capybara test and the output of the print page.html.
app/javascript/entrypoints/test.jsx
import React from "react"
import ReactDOM from "react-dom"
// If this is uncommented, this line runs correctly but is not
// replaced by the "Hello World" in the `render` method
// document.getElementById("root").innerText = "Foo bar"
// This never gets run or is run incorrectly
ReactDOM.render(
<div>Hello World</div>,
document.getElementById("root")
)
test.html.haml (yes, I know haml is awful)
!!!
%html{lang: :en}
%head
= vite_client_tag
= vite_react_refresh_tag
= vite_javascript_tag "test.jsx"
%body
#root
react_test_spec.rb
require "rails_helper"
RSpec.describe "Testing react", type: :feature, js: true do
describe "just checking", :with_csrf do
before { visit test_home_path }
subject { page }
it "renders react" do
print page.html
expect(page).to have_content "Hello World"
end
end
end
print page.html output
<html lang="en"><head>
<script src="/vite-test/assets/test.92ee76c9.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite-test/assets/jsx-dev-runtime.ddafb254.js" as="script" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
</body></html>
Config/setup code. Package versions, capybara/vite configuration, and etc.
package.json
// react related packages
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "6",
// vite related packages
"stimulus-vite-helpers": "^3.0.0",
"vite": "^2.9.1",
"vite-plugin-ruby": "^3.0.9",
"vite-plugin-stimulus-hmr": "^3.0.0",
"#vitejs/plugin-react": "^1.3.2",
// babel related packages
"#babel/core": "^7.0.0-0",
"#babel/preset-react": "^7.16.7",
"#babel/preset-typescript": "^7.17.12",
"#babel/eslint-parser": "^7.17.0",
"#babel/plugin-transform-runtime": "^7.18.2",
"#babel/preset-env": "^7.17.10",
"babel-jest": "^27.5.1",
"babel-plugin-macros": "^3.1.0",
capybara.rb
Capybara.register_driver :chrome_headless do |app|
options = ::Selenium::WebDriver::Chrome::Options.new
options.add_argument("--headless")
options.add_argument("--no-sandbox")
options.add_argument("--disable-dev-shm-usage")
options.add_argument("--window-size=1400,1400")
Capybara::Selenium::Driver.new(app, browser: :chrome, capabilities: [options])
end
Capybara.javascript_driver = :chrome_headless
vite.config.ts
export default defineConfig({
build: {
sourcemap: true,
},
plugins: [RubyPlugin(), react(), StimulusHMR()],
})
vite.json
{
"all": {
"sourceCodeDir": "app/javascript",
"watchAdditionalPaths": []
},
"development": {
"autoBuild": true,
"publicOutputDir": "vite-dev",
"port": 3036
},
"test": {
"autoBuild": true,
"publicOutputDir": "vite-test",
"port": 3037
}
}
some packages in Dockerfile.development. Also duplicated this issue locally using chromedriver
RUN apk add \
build-base \
chromium \
chromium-chromedriver \
Your JS assets are likely built differently in dev and test modes - and this sounds like you have a JS bug which is preventing the hydration. Add a pause to your test, run it in non-headless mode and look at the developer console for JS/network errors
My problem is
when I deploy new version react web to production
some user browser display old version from previous deploy
My user have to press ctrl+f5 for clear cache browser then I think which bad solution
please suggest best solution for me thx bro.
This could be because your web server is setting a cache control response header, which is set to a large value. Could you check the value in devtools?
A simple explanation of what cache control does is it tells the browser that the browser can use the cached resource upto n minutes. So only after n minutes will the browser send a new request for the resource.
Since you have a react app (a web app), the browser requests for index.html, and it will subsequently fetch the js bundle for your react app.
When you push an updated version, the browser doesn't know that there is an update. Since the index.html was cached, it continues to use it. Until the cache time expires, and then it will fetch again and this time it will get the latest js bundle.
Based on your server, you will need to figure out how to set the cache-control header for index.html to be of value no-cache. Here is an example of how I set it up in firebase hosting,
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "/service-worker.js",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
},
{
"source": "/index.html",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
},
{
"source": "/static/**/*",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Since create react app automatically configures the webpack build to generate static files with different hashes in the filename, it is fine to set a large cache value for it.
That occurs because, by default, the service workers do cache, so you should check your react project index.js file and check to see if services workers are registered. serviceWorker.register().
If it is registered then Unregister the service worker serviceWorker.unregister().
The above being quite drastic as a method, since it could affect your user experience what is recommended is that you configure your PWA to suit your particular caching needs. Follow this resource "https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker" for more about playing with service workers.
In case you need caching for your application, your backend sends appropriate response headers.
I am using Firebase for the first time and I deployed a react app I know to be working and have hosted on github pages. I followed the instructions provided by Firebase docs and deployed the app to their website. On loading the website I am greeted with a blank page.
the link: https://monsterpwa.web.app/
the firebase.json file:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The previous posts on here are all bout the public sections being changed to build. Other then that I could not find anyone else with a similar question.
The console logs and error that there is an unexpected token '<' in line one column 1, but I also cannot see that.
The manifest file:
{
"short_name": "Monster App",
"name": "Monster App D&D Spells and Items",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "/public/media/800x800.png",
"type": "image/png",
"sizes": "800x800"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#2d4059;",
"theme_color": "#2d4059",
"orientation": "portrait-primary"
}
build
Build
--> Media -- > *empty*
--> static -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.
asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js
Kind regards,
Snow
The issue is that you've configured your app to look for assets in a /MonsterPWA directory but that doesn't appear to exist.
For example, your index.html file has
<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>
but the file is actually available at /static/js/main.3267ab84.js.
Your rewrite rule is catching all non-existent file requests and returning index.html, hence the warnings about <.
Check your homepage configuration in package.json and / or your PUBLIC_URL environment variable.
If you check the JavaScript console of your browser it shows there's a problem loading the CSS.
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".
Uncaught SyntaxError: Unexpected token '<'
From looking at the Network tab, we can see that it is loading this URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css, but that is returning HTML (due to your rewrite rule).
Make sure that your CSS is generated to build/MonsterPWA/static/css/main.7bf83f0f.css, since that's where Firebase Hosting looks for it.
Edit: a quick check shows that the CSS actually exists at https://monsterpwa.web.app/static/css/main.7bf83f0f.css so at build/static/css/main.7bf83f0f.css.
Do the following:
run the command: npm run build
check firebase.json file to ensure it says "public":"build".. if not make the change
run the command: firebase deploy
Go grab a coffee!
I am new to webpack and typings, i am trying to setup new project.
I have globally installed the webpack.
Issues are
Even it is not allowing me to put the code of entrypoint.ts in a module like
module taxCalculator{
[.....entrypoint.ts code.......]
}
webpack build works fine when i avoid point 1 but i am not able to use the testClass in entrypoint.ts while creating mainPageController. when i load the application get following error in console:
taxCalculator.bundle.js:13307 ReferenceError: taxCalculator is not defined
In my entrypoint.ts vs 2013 shows the red error line below the 'require' text.
I have already referred a lot on internet but could not find anything and wasted 4-5 hours of mine, can someone please guide me what i am doing wrong.
Following are my files for reference.
Package.json
{
"name": "taxcalculator",
"version": "1.0.0",
"description": "To Calculate Tax",
"scripts": {
"build": ""
},
"author": "temp",
"license": "ISC",
"devDependencies": {
"ts-loader": "1.3.3",
"typescript": "2.0.0",
"typings": "2.1.0",
"webpack": "1.14.0"
},
"dependencies": {
"angular": "1.5.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5"
}
}
typings.json
{
"dependencies": {
"angular": "registry:dt/angular#1.5.0+20170111164943"
}
}
entrypoint.ts
/// <reference path="../../typings/index.d.ts"/>
/// <reference path="TestClass.ts"/>
var angular = require('angular');
var app = angular.module('taxCalculatorApp', []);
app.controller("mainPageController", ["$scope", function(scope) {
scope.testString = "My String Value";
scope.myObj = new taxCalculator.TestClass("Constructor string");
}])
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Tax Calculator</title>
</head>
<body>
<div ng-app="taxCalculatorApp">
<div ng-controller="mainPageController">
<div>{{testString}}</div>
<div>{{myObj.myString}}</div>
</div>
Loading.....!!
</div>
<script src="../dist/taxCalculator.bundle.js"></script>
</body>
</html>
testclass.ts
module taxCalculator {
export class TestClass {
constructor(public myString) {
}
}
}
In the compilerOptions section of your tsConfig file, add the following:
"moduleResolution" : "node", // or "classic"
"module" : "amd",
The moduleResolution section determines how the tsc compiler looks for modules. A full description can be found on the typescript docs.
The module section describes how each of your modules will be written out. By default this will be CommonJS, which is not what you want. It should probably be amd, which is a front-end friendly module system.
It's a good idea to take a deeper look at all the compiler options and see if any more are relevant for your project. In general, starting off new projects with strict null checks and no implicit any will help you in the long run.