I have installed angular universal on my app.
Running npm run build:ssr - DONE. WORKS.
Running npm run server:ssr - DONE.WORKS.
After accessing the server URL (localhost:4000), the page is not fully loaded and the following error is raised on the Terminal:
I also faced the same problem, so I would just like to share my findings for the same.
For me, there were two plausible causes/solutions for it:
First, in my project's I18N default JSON file that was en.json, I was having a problem In the structure of the JSON file.
For example, I had the below mistake. I missed the comma after the second label 'FINISH' :
{
"COMMON": {
"EDIT": "Edit",
"FINISH": "Finish"
"QUIT": "Quit",
}
}
So after correcting the structure, the application ran fine without an error.
Secondly, another cause of the issue could be, at runtime transloco was not able to find the correct label in the selected language, so it looked for a fallback language and it could not even find that in the transloco-root.module.ts so after adding my fallback language, it tried to find the same in the fallback language as specified in the transloco-root.module.ts.
So it found out that label and the issue got resolved.
BUT in the second solution provided, you need to have that incorrect label in at least that fallback language's json file in correct format.
I added the fallback language like below:
useValue: translocoConfig({
availableLangs: ['fr', 'en'],
defaultLang: 'en',
reRenderOnLangChange: true,
fallbackLang: 'fr',
prodMode: environment.production,
missingHandler: {
logMissingKey: true
}
})
i18n Transloco wasn't fully configured on the module file.
Related
In render.js I have
import { Grid } from 'ag-grid-community';
import { tableMethods } from './table.js';
I created my own custom table methods and decided to try ag-grid since mine aren't as fast as theirs (no surprise). Unfortunately, while I could get my own methods loading from my js file by setting
<script type="module" src="render.js"></script>
I cannot get ag-grid to load, I get this error
Uncaught TypeError: Failed to resolve module specifier "ag-grid-community". Relative references must start with either "/", "./", or "../".
I used npm i ag-grid-community -D to install it. I wasn't sure if I needed the -D, so I tried without that and it still shows same error.
*Note - of course I've tried doing what the error message says. But it didn't resolve and the documentation doesn't mention anything about this.
I was able to get this working by adding following before my render.js file
<script src="ag-grid-community.js"></script>
I also disabled type=module once I realized this is probably the intended way to split up rendering scripts, or at least that was my guess.
I have a Cypress project where I use the Cypress session API to maintain a session throughout features.
Now I try switching from the deprecated Klaveness Cypress Cucumber Preprocessor to the replacement, Badeball's Cypress Cucumber Preprocessor. But I am running into an issue; the beforeEach() step where my authentication takes place gets repeated several times before the tests start. Eventually, Cypress "snaps out of it" and starts running the actual tests - but obviously this is very resource and time intensive, something is going wrong.
My setup:
Dependencies:
"cypress": "^9.6.1",
"#badeball/cypress-cucumber-preprocessor": "^9.1.3",
index.ts:
beforeEach(() => {
let isAuthInitialized = false;
function spyOnAuthInitialized(window: Window) {
window.addEventListener('react:authIsInitialized', () => {
isAuthInitialized = true;
});
}
login();
cy.visit('/', { onBeforeLoad: spyOnAuthInitialized });
cy.waitUntil(() => isAuthInitialized, { timeout: 30000 });
});
login() function:
export function login() {
cy.session('auth', () => {
cy.authenticate();
});
}
As far as I can see, I follow the docs for cy.session almost literally.
My authenticate command has only application specific steps, it does include a cy.visit('/') - after which my application is redirected to a login service (different domain) and then continues.
The problem
cy.session works OK, it creates a session on the first try - then each subsequent time it logs a succesful restore of a valid session. But this happens a number of times, it seems to get stuck in a loop.
Screenshot:
It looks to me like cy.visit() is somehow triggering the beforeEach() again. Perhaps clearing some session data (localstorage?) that causes my authentication redirect to happen again - or somehow makes Cypress think the test starts fresh. But of course beforeEach() should only happen once per feature.
I am looking at a diff of my code changes, and the only difference except the preprocessor change is:
my .cypress-cucumber-preprocessorrc.json (which I set up according to the docs
typing changes, this preprocessor is stricter about typings
plugins/index.ts file, also set up according to the docs
Am I looking at a bug in the preprocessor? Did I make a mistake? Or something else?
There are two aspects of Cypress + Cucumber with preprocessor that make this potentially confusing
Cypress >10 "Run all specs" behaviour
As demonstrated in Gleb Bahmutov PhD's great blog post, if you don't configure Cypress to do otherwise, running all specs runs each hook before each test. His proposed solution is to not use the "run all specs" button, which I find excessive - because there are ways around this; see below for a working solution with the Cucumber preprocessor.
Note: as of Cypress 10, "run all specs" is no longer supported (for reasons related to this unclarity).
Cucumber preprocessor config
The Cypress Cucumber preprocessor recommends to not use the config option nonGlobalStepDefinitions, but instead configure specific paths like (source):
"stepDefinitions": [
"cypress/integration/[filepath]/**/*.{js,ts}",
"cypress/integration/[filepath].{js,ts}",
"cypress/support/step_definitions/**/*.{js,ts}",
]
}
What it doesn't explicitly state though, is that the file which includes your hooks (in my case index.ts) should be excluded from these paths if you don't want them to run for each test! I could see how one might think this is obvious, but it's easy to accidentally include your hooks' file in this filepath config.
TLDR: If I exclude my index.ts file which includes my hooks from my stepDefinitions config, I can use "run all specs" as intended - with beforeEach() running only once before each test.
I need to pull in the contents of a program source file for display in a page generated by Gatsby. I've got everything wired up to the point where I should be able to call
// my-fancy-template.tsx
import { readFileSync } from "fs";
// ...
const fileContents = readFileSync("./my/relative/file/path.cs");
However, on running either gatsby develop or gatsby build, I'm getting the following error
This dependency was not found:
⠀
* fs in ./src/templates/my-fancy-template.tsx
⠀
To install it, you can run: npm install --save fs
However, all the documentation would suggest that this module is native to Node unless it is being run on the browser. I'm not overly familiar with Node yet, but given that gatsby build also fails (this command does not even start a local server), I'd be a little surprised if this was the problem.
I even tried this from a new test site (gatsby new test) to the same effect.
I found this in the sidebar and gave that a shot, but it appears it just declared that fs was available; it didn't actually provide fs.
It then struck me that while Gatsby creates the pages at build-time, it may not render those pages until they're needed. This may be a faulty assessment, but it ultimately led to the solution I needed:
You'll need to add the file contents to a field on File (assuming you're using gatsby-source-filesystem) during exports.onCreateNode in gatsby-node.js. You can do this via the usual means:
if (node.internal.type === `File`) {
fs.readFile(node.absolutePath, undefined, (_err, buf) => {
createNodeField({ node, name: `contents`, value: buf.toString()});
});
}
You can then access this field in your query inside my-fancy-template.tsx:
{
allFile {
nodes {
fields { content }
}
}
}
From there, you're free to use fields.content inside each element of allFile.nodes. (This of course also applies to file query methods.)
Naturally, I'd be ecstatic if someone has a more elegant solution :-)
I'm using the admin-on-rest npm package starter project and trying to plug in a simple SSO Facebook login button using the FacebookAuth npm package. Every time I try to click the "Login" button, I get the following error:
FB.login() called before FB.init()
I'm using an .env file with the following variable: REACT_APP_FACEBOOK_APP_ID and setting it to the right value. I even did console.log() within my app and can see it output.
I checked and I'm only loading the FB SDK once, not multiple times (this was a common issue reported on other threads).
Ok, it turned out to be something pretty dumb, but something to point out nonetheless!
In my .env file, I had accidentally placed a semicolon (;) at the end of the declaration, like this:
REACT_APP_FACEBOOK_APP_ID = XXXXXXXXXXXX;
Apparently .env files do NOT like semi-colons. This was just very difficult to figure out from the error above.
So if any of you want to pull your hair out because of this issue, and you're using similar tech, check to make sure you're syntactically kosher EVERYWHERE variables are being declared.
the funny thing was i forgot to replace your-app-id with my app id:
<script>
FB.init({
appId: 'your-app-id',
autoLogAppEvents: true,
xfbml: true,
version: 'v8.0'
});
</script>
I want to xhr some opal script, and use ruby code defined there. I tried to get it with $.getScript. But no success for me.
$.ajax({
url: 'assets/foo.js.rb',
success: function(data){
#{ClassInFooJs.new}
},
dataType: "script"
});
Moreover the script is evaled (in strange manner), I mean I can call Opal.modules["file_i_required"] from console, and it will return basically the compiled code.
BUT inside of it nothing is evaled, (no console.logs, window["foos"] = #{something}), and I can't reference anything from that file.
Any help?
You should use either require "foo" from Opal or Opal.require("foo") from JavaScript. If the load "foo" behavior is required should be noted that Opal.load("foo") is also present.
The alternative is to compile files on the server with the :requirable flag set to false but that's kinda difficult unless you compile manually. See the API docs for more info.
Calling directly Opal.modules["foo"](Opal) should be avoided as it doesn't properly update $LOADED_FEATURES and in general can change in the future.