Im trying to use react loadable with server side rendering.
My babel plugins config
"plugins": [
"syntax-dynamic-import",
"dynamic-import-node",
"react-loadable/babel",
[
"import-inspector",
{
"serverSideRequirePath": true,
"webpackRequireWeakId": true
}
],
"transform-react-remove-prop-types",
"transform-react-inline-elements",
"transform-react-constant-elements"
]
server response during rendering, with:
console.log(modules);
const bundles = getBundles(stats, modules);
console.log(bundles);
gets:
[ 'HomePage' ]
[ undefined ]
i guess my error comes from react-loadable.json which has one of the keys undefined
"undefined": [
{
"id": 7,
"name": "./node_modules/react-intl/lib/index.es.js",
"file": "main.a77d1cb1913eab1806a7.js"
},
{
"id": 19,
"name": "./node_modules/redux/es/index.js",
"file": "main.a77d1cb1913eab1806a7.js"
},
{
"id": 52,
"name": "./node_modules/redux-saga/es/internal/sagaHelpers/index.js",
"file": "main.a77d1cb1913eab1806a7.js"
}
]
but i can figure out how it becomes undefined if i have webpackChunkName and modules defined like this:
export default Loadable({
loader: () => import(/* webpackChunkName: "HomePage" */ './index'),
loading: () => null,
modules: ['HomePage'],
});
maybe someone had similar problem or know any solution?
Related
I'm very new to Strapi and GraphQL. I have created a nested data structure in Strapi that looks like this (this is a Navbar component). But when I go to GraphQL, my query looks like this.
So if this is the query:
query MyQuery {
allStrapiNavbar {
nodes {
Category {
Name
children {
id
}
}
}
}
}
This is the result:
{
"data": {
"allStrapiNavbar": {
"nodes": [
{
"Category": [
{
"Name": "Community",
"children": []
},
{
"Name": "Modules",
"children": []
},
{
"Name": "Company",
"children": []
},
{
"Name": "Pricing",
"children": []
}
]
}
]
}
},
"extensions": {}
}
This means the data is being fetched correctly. However, I can't find the nested component 'Item' inside 'Category'.
This is what my gatsby-config.ts file looks like currently:
{
resolve: "gatsby-source-strapi",
options: {
apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
queryLimit: 1000, // Default to 100
accessToken: process.env.STRAPI_TOKEN,
collectionTypes:[ 'faq', 'doc', 'docCategory', 'faqCategory', 'release', 'userType' ],
// contentTypes: [ 'Faq' ],
singleTypes: [ 'navbar' ],
},
I don't know why the data isn't showing up in GraphQL. I looked inside the children for Category, but the reality is that it should be at the same level as Name, which shows up.
Do I need to modify the gatsby-config file, or am I missing something else?
Edit: I am using the gatsby-source-strapi plugin.
I am creating a chrome extension. It injects a chat to the page of the user choice.
It works on all websites I checked but does not on a specific one.
I have a component called , when I click the button to inject the chat in the Popup.html it sends console.log to the page, from that component, but the component is not being rendered for some reason.
That's the page https://p.priority-connect.online/webui/P3A3E/
I tried to render it on another websites and it worked well.
Created console.log inside the component and received result inside the website console but not a rendered component.
that's my manifest file
{
"manifest_version": 3,
"name": "WhatsApp Chat",
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
"options_page": "options.html",
"background": {
"service_worker": "background.bundle.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon-34.png"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*",
"<all_urls>"
],
"js": [
"contentScript.bundle.js"
],
"css": [
"content.styles.css"
]
}
],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": [
"content.styles.css",
"icon-128.png",
"icon-34.png",
"assets/img/*"
],
"matches": [
"<all_urls>"
]
}
]
}
I am trying to check the last status of an ECS task, if it is STOPPED then it has to trigger lambda using cloudwatch event. I am getting below error message while validating the JSON event.
Error message:
Event pattern contains invalid element (can only be Strings enclosed in quotes, numbers, and the unquoted keywords true, false, and null)
**Code**:
{
"source": [
"aws.ecs"
],
"detail-type": [
"ECS Task State Change"
],
"detail": {
"clusterArn": [
"arn:aws:ecs:us-west-2:17025:cluster/ecs-w2"
],
"lastStatus": [
"STOPPED"
],
"overrides": {
"containerOverrides":
{
"environment":
{
"name": ["job_grp_nm"],
"value": ["QA_INTEGRATION"]
},
{
"name": ["secrets_targetdb"],
"value": ["7034908/Snowflake/facilitiesNDI/QA"]
},
"name": ["suite-dev"]
}
}
}
}
Please let me know what's wrong with the code.
There are two things wrong:
The values should be expressed as array of string, e.g. ["value"]
Your environment can be an array of objects.
So it should be:
{
"source": [
"aws.ecs"
],
"detail-type": [
"ECS Task State Change"
],
"detail": {
"clusterArn": [
"arn:aws:ecs:us-west-2:17025:cluster/ecs-w2"
],
"lastStatus": [
"STOPPED"
],
"overrides": {
"containerOverrides":
{
"environment":
{
"name": ["job_grp_nm"],
"value": ["QA_INTEGRATION"]
},
"name": ["suite-dev"]
}
}
}
}
The above should be accepted, but I can't verify if this will correctly match your event.
I am working on setting up my site authentication settings to use the AAD provider. Most of the template is respected. However, the unauthenticatedClientAction and allowedAudiences is not being properly assigned. I observe 'allow anonymous' and no 'allowed audiences' being assigned.
Please note that I was working with the ARM Template API 2018-02-01. This problem may still exist due to the documentation, if you provide an answer, please note the ARM Template version it addresses.
Additionally, create an issue for the ARM documentation team to correct any issues.
Here is my template segment for these settings. It is nested under resources in my website template.
root > Microsoft.Web/Site > Resources
{
"type": "config",
"name": "web",
"apiVersion": "2016-08-01",
"location": "[parameters('app-location')]",
"dependsOn": [
"[resourceId('Microsoft.Web/sites', variables('web-site-name'))]"
],
"properties": {
"siteAuthEnabled": true,
"siteAuthSettings": {
"enabled": true,
"unauthenticatedClientAction": "RedirectToLoginPage",
"tokenStoreEnabled": true,
"defaultProvider": "AzureActiveDirectory",
"clientId": "[parameters('web-aad-client-id')]",
"issuer": "[concat('https://sts.windows.net/', parameters('web-aad-tenant'))]",
"allowedAudiences": [
"[concat('https://', variables('web-site-name'), '.azurewebsites.net')]"
]
}
}
}
Template Validates
Deployment does not output any errors
Issues:
unauthenticatedClientAction is assigned allow anonymous not RedirectToLoginPage
allowedAudiences is not assigned any sites
What could be causing these issues? What could I have missed?
I got my answer after working with the fine people at Azure Support.
Please note that this solution targets API 2018-02-01 which was the current version at the time of this post.
This sub-resource is no longer a valid solution, while the endpoint may still recognize some of its fields, this is deprecated.
The new solution is to add the siteAuthSettings object to the main 'Microsoft.Web/site' properties and the siteAuthEnabled is no longer needed as siteAuthSettings.enable duplicates this functionality.
Updated ARM Template (removed other settings for brevity)
{
"name": "[variables('app-service-name')]",
"type": "Microsoft.Web/sites",
"location": "[parameters('app-location')]",
"apiVersion": "2016-08-01",
"dependsOn": [
"[variables('app-plan-name')]"
],
"properties": {
//... other app service settings
"siteAuthSettings": {
"enabled": true,
"unauthenticatedClientAction": "RedirectToLoginPage",
"tokenStoreEnabled": true,
"defaultProvider": "AzureActiveDirectory",
"clientId": "[parameters('web-aad-client-id')]",
"issuer": "[concat('https://sts.windows.net/', parameters('web-aad-tenant'))]",
"allowedAudiences": [
"[concat('https://', variables('web-site-name'), '.azurewebsites.net')]"
]
}
}
}
As suggested by #Michael, the siteAuthSettings object must be added to the siteConfig object, not just under the root properties object.
{
"apiVersion": "2019-08-01",
"name": "[variables('webAppName')]",
"type": "Microsoft.Web/sites",
"kind": "app",
"location": "[resourceGroup().location]",
"dependsOn": [
"[resourceId('Microsoft.Web/serverfarms', variables('appServiceName'))]"
],
"properties": {
...
"siteConfig": {
"siteAuthSettings": {
"enabled": true,
"unauthenticatedClientAction": "RedirectToLoginPage",
"tokenStoreEnabled": true,
"defaultProvider": "AzureActiveDirectory",
"clientId": "[parameters('clientId')]",
"issuer": "[concat('https://sts.windows.net/', parameters('tenantId'), '/')]"
}
}
}
}
The other solutions given only apply when using the classic authentication experience (Authentication (Classic)). If you would like to use the new authentication experience, use below configuration:
{
"$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
"contentVersion": "1.0.0.0",
"resources": [
{
"apiVersion": "2019-08-01",
"name": "[variables('webAppName')]",
"type": "Microsoft.Web/sites",
"kind": "app",
"location": "[resourceGroup().location]",
"resources": [
{
"type": "config",
"apiVersion": "2020-12-01",
"name": "authsettingsV2",
"location": "[resourceGroup().location]",
"dependsOn": [
"[concat('Microsoft.Web/sites/', variables('webAppName'))]"
],
"properties": {
"platform": {
"enabled": true,
"runtimeVersion": "~1"
},
"identityProviders": {
"azureActiveDirectory": {
"isAutoProvisioned": false,
"registration": {
"clientId": "[parameters('clientId')]",
"clientSecret": "[variables('clientSecret')]",
"openIdIssuer": "[concat('https://sts.windows.net/', parameters('tenantId'), '/v2.0')]"
},
"validation": {
"allowedAudiences": [
"https://management.core.windows.net/"
]
}
}
},
"login": {
"routes": {},
"tokenStore": {
"enabled": true,
"tokenRefreshExtensionHours": 72,
"fileSystem": {},
"azureBlobStorage": {}
},
"preserveUrlFragmentsForLogins": false,
"allowedExternalRedirectUrls": [],
"cookieExpiration": {
"convention": "FixedTime",
"timeToExpiration": "08:00:00"
},
"nonce": {
"validateNonce": true,
"nonceExpirationInterval": "00:05:00"
}
},
"globalValidation": {
"redirectToProvider": "azureactivedirectory",
"unauthenticatedClientAction": "RedirectToLoginPage"
},
"httpSettings": {
"requireHttps": true,
"routes": {
"apiPrefix": "/.auth"
},
"forwardProxy": {
"convention": "NoProxy"
}
}
}
}
]
}
]
}
I have a quite big solution with a few web module projects (they are kind of modules and they are copied into a common project which is the SPA). I started to write jasmine-typescript tests against my angular 1.5.8 code. In order to spare copying time I need to set up Chutzpah for every web project so I can test every module code.
I have the chutzpah.json below and this way when I select "Open in Browser" then I can see the tests.
{
"Framework": "jasmine",
"FrameworkVersion": "2",
"Compile": {"Mode": "External"},
"References": [
{
"Path": "../../where_angular_and_other_scripts_are_placed/",
"Includes": [ "*.js" ]
},
{
"Path": "../../where_angular-mocks_are_placed/",
"Includes": [ "*.js" ]
},
{
"Path": "../../CommonLibrary/",
"Includes": [ "*.js" ],
"Excludes": [ "*.Spec.js" ]
},
{
"Path": "app/modules/Framework/",
"Includes": [ "*.Spec.js" ]
}
]
}
If I change the file like below then there are no tests. I don't understand why. Chutzpah cannot manage that a solution has more than one chutzpah.json in different directories? According to the documentation it shouldn't be problem.
{
"Framework": "jasmine",
"FrameworkVersion": "2",
"Compile": {"Mode": "External"},
"References": [
{
"Path": "../../where_angular_and_other_scripts_are_placed/",
"Includes": [ "angular.js", "*.js" ]
},
{
"Path": "../../where_angular-mocks_are_placed/",
"Includes": [ "*.js" ]
},
{
"Path": "../../CommonLibrary/",
"Includes": [ "*.js" ],
"Excludes": [ "*.Spec.js" ]
}
],
"Tests": [
{
"Path": "app/modules/Framework/",
"Includes": [ "*.Spec.js" ]
}
]
}
Another issue with Chutzpah setup is that, it always says that angular is not defined. I have the code below and when I run it it says angular is not defined. If I remove the inject part then it runs. But, I need to mock things. I have the bad feeling the above configuration issue and the stuff below somehow connected.
describe("getActiveModules method", (): void =>
{
var RestangularMock: any;
var angularCommonCheckerService:AngularCommonCheckerService;
var dilibModuleService: IDiLibModuleService;
var $q: ng.IQService;
var allReturnObject: any;
beforeEach((): void =>
{
//#region Arrange
angular.mock.inject(($injector): void => {
$q = $injector.get("$q");
});
RestangularMock = jasmine.createSpyObj("Restangular", ["all", "post"]);
angularCommonCheckerService = new AngularCommonCheckerService();
dilibModuleService = new DilibModuleService(RestangularMock, angularCommonCheckerService);
var returnList: IModuleContract[] = [
<IModuleContract>{ id: 100, isActive: 1 },
<IModuleContract>{ id: 101, isActive: 1 },
];
var allReturnObject = <any>{
getList: (): IModuleContract[]> => {
var deferred = $q.defer();
deferred.resolve(returnList);
return deferred.promise;
}
};
spyOn(allReturnObject, "getList");
//#endregion
});
it("should call Restangular resource with given string", (): void =>
{
RestangularMock.all.and.returnValue(allReturnObject);
dilibModuleService.getActiveModules();
expect(RestangularMock.all).toHaveBeenCalledWith("FrameworkApp/Module/GetActiveModules");
expect(allReturnObject.getList).toHaveBeenCalledTimes(1);
});
Questions:
Why Chutzpah doesn't list tests when the test references listed under "Test"? Did I do something wrong?
Is the issue around inject connected to the configuration issue?
how can I debug Chutzpah and see what is included from the references and tests? It is enough to check the source of the generated html file?