I'm sure there's something obvious I'm missing, but for the life of me I cannot get the aurelia bundler to work.
When I run gulp serve-export, using the bundles, I get a blank page and no errors. The System.import('aurelia-bootstrapper') promise never returns.
config.js gist
Bundles
module.exports = {
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text",
"**/*.json!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"aurelia-authentication",
"aurelia-configuration",
"sweetalert",
"toastr"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
};
Served directory
|- dist/
|-- app-build.js
|-- aurelia.js
|- jspm_packages/
|-- github/
|--- ...
|-- npm/
|--- ...
|-- system.js
|-- system-csp-production.js
|-- system-polyfills.js
|- config.js
|- index.html
Body of index.html
<body aurelia-app="main">
<script src="jspm_packages/npm/bluebird#3.4.1/js/browser/bluebird.min.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
console.log('test');
System.import('aurelia-bootstrapper')
.then(function() {
console.log('then');
})
.catch(function(error) {
console.log('catch', error);
})
.finally(function() {
console.log('finally');
});
</script>
</body>
The only console output from the above is test. bluebird.min.js and system.js requests succeed, as does the aurelia.js bundle request. The only odd thing i can see (other than the blank page) is that the app-build.js is never requested.
Any thoughts?
Related
I just finished a Nuxt.js project, and I want to deploy it on a web server. So, I executed the command nuxt generate to have a static app. Before this, everything was working perfectly, but now nothing is working : the page is loading indefinitely with a rotating black and gray round in the center of the page.
Here is a picture
EDIT:
I am hosting my app on OVHcloud, and here is a public repo of my app : https://github.com/maximehamou/public.mh-info.fr.
Here is my nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Accueil | MH info",
htmlAttrs: {
lang: "fr",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [{ src: "https://kit.fontawesome.com/048c7a73f1.js/" }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["./css/general.css"],
server: {
port: 4000,
},
};
Here is my package.json
{
"name": "mh-info.fr",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"sass": "sass -w scss:css"
},
"dependencies": {
"buttercms": "^1.2.9",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"sass": "^1.54.9",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
}
}
Update regarding my latest changes on a cloned version of your project.
I achieved to have something properly working here: https://kissu-makes-great-sites.netlify.app/fr/tous-les-articles
Main conclusion is that there is a LOT of things to fix/improve on.
You're not writing your app as you should with Vue (even less in a Nuxt way).
There is too much to cover into a single response, so I recommend that you ping me on Twitter, Discord or by email if you want a more in-depth explanation/mentoring on how to fix all of this.
PS: I speak french, lived there for 20 years. 🇫🇷
I am trying to purge tailwind with ejs. But when I tried to purge, I got this Error: Could not resolve entry module (index.html) ..
Here is my tailwind config.js:
module.exports = {
purge: ["./**/*.ejs"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
container: {
center: true,
},
},
},
variants: {
extend: {},
},
plugins: [],
}
My postcss config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Inside my app.js
app.set('view engine', "ejs");
app.use(express.static('public'));
Inside my package.json, I have this script:
"scripts": {
"build:tailwinds": "tailwind build -i src/style.css -o public/css/style.css",
"start": "nodemon app.js",
"dev": "vite",
"build": "vite build"
},
My folder structure:
See how my files are organized
How can i purge tailwind with ejs file. In ejs there are no index.html, so how can I solve the error? What I am missing out?
Is your tailwind version updated to the latest?
Take a look at my set up, tweak things up to see if purge works for you with ejs.
tailwind.config.js
module.exports = {
mode: "jit",
purge: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
package.json
"tw:build": "tailwindcss build ./src/styles/global.css -o ./public/styles/global.css",
"tw:prod": "cross-env NODE_ENV=production postcss build ./src/styles/global.css -o ./public/styles/global.css",
"tw:watch": "onchange \"tailwind.config.js\" \"src/**/*.css\" -- npm run tw:build"
You can also use cssnano it's an awsome extension for purging tailwind css
postcss.config.js
const cssnano = require("cssnano");
module.exports = {
plugins: [
require("tailwindcss"),
cssnano({
preset: "default",
}),
require("autoprefixer"),
],
};
In case you use Tailwind v3:
Since Tailwind no longer uses PurgeCSS under the hood, we’ve renamed
the purge option to content to better reflect what it’s for:
tailwind.config.js
module.exports = {
content: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
}
Problem
I am busy writing out a tutorial for myself about jenkins and I am using jsdoc to do it.
anyways I noticed on the homepage that the section that reads the Readme.md is displaying very strangely.
jsdoc.json
{
"source": {
"include": ["src"],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(node_modules/|docs)_"
},
"plugins": ["plugins/markdown"],
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc","closure"]
},
"templates": {
"cleverLinks": true,
"monospaceLinks": true
},
"opts":{
"recurse": true,
"destination": "./docs/",
"tutorials": "./tutorials",
"readme": "README.md"
}
}
README.md
# LearningJenkins
## Tutorials
<!-- [Link to tutorials](https://codenameninja.github.io/LearningJenkins/) -->
We upgraded our GW system to 7.52 SP 7 and also migrated the systems from on-prem to Azure. ECC 7 system is on-prem. After the upgrade and migration was done, the Standard Fiori app 'My Benefits' tile is opening but only the standard portion is working and the extended parts are throwing errors.
Here are the errors:
Errors in Console (Browser debugger)
XMLTemplateProcessor-dbg.js:98 Uncaught Error: found in negative cache: 'sap/m/columns.js' from ./resources/sap/m/columns.js: failed to load 'sap/m/columns.js' from ./resources/sap/m/columns.js: 404 - at makeNestedError (https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap-ui-core.js:92:37)
XHRInterceptor-dbg.js:58 GET https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap/m/columns.js 404
XMLTemplateProcessor-dbg.js:98 Uncaught Error: failed to load 'sap/m/columns.js' from ./resources/sap/m/columns.js: 404 - Not Found
Error in the Network tab (Browser debugger)
404(Not Found) for https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap/m/columns.js
I couldn't find any errors in the front-end or the back-end, I cleaned up the caches on both front-end and back-end and also re-indexed the app on the gateway. I also reactivated the ICF nodes.
Here's the index.html
<!DOCTYPE HTML>
<html>
<!-- IMPORTANT
This HTML file is meant for testing the application/component standalone, outside the Unified Shell.
Some integration functionality, personalization etc. will not be available when running standalone.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>zMyBenefitsExtension</title>
<script id="sap-ui-bootstrap"
src="./resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.me"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.16"
data-sap-ui-resourceroots='{"hcm.mybenefits.zMyBenefitsExtension": "./"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInitEvent(function () {
var oComponentContainer = new sap.ui.core.ComponentContainer({
height : "100%",
name:"hcm.mybenefits.zMyBenefitsExtension"
});
oComponentContainer.placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Here's the source code for Component.js
jQuery.sap.declare("hcm.mybenefits.zMyBenefitsExtension.Component");
// use the load function for getting the optimized preload file if present
sap.ui.component.load({
name: "hcm.mybenefits",
url: jQuery.sap.getModulePath("hcm.mybenefits.zMyBenefitsExtension") + "/../HCM_BENF_MON" // provide parent project url
// we use a URL relative to our own component; might be different if
// extension app is deployed with customer namespace
});
hcm.mybenefits.Component.extend("hcm.mybenefits.zMyBenefitsExtension.Component", {
metadata: {
version : "1.0",
config : {
"sap.ca.i18Nconfigs": {
"bundleName":"hcm.mybenefits.zMyBenefitsExtension.i18n.i18n"
},
},
customizing: {
"sap.ui.controllerExtensions": {
"hcm.mybenefits.view.S7": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S7Custom",
},
"hcm.mybenefits.view.S6": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S6Custom",
},
"hcm.mybenefits.view.S5": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S5Custom",
},
"hcm.mybenefits.view.S3": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S3Custom",
},
"hcm.mybenefits.view.S4": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S4Custom",
},
},
"sap.ui.viewExtensions": {
"hcm.mybenefits.view.S7": {
"extS7Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS7HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S6": {
"extS6Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS6HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S5": {
"extS5Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS5HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S3": {
"extS3Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS3HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S4": {
"extS4Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS4HeaderCustom",
type: "XML",
},
},
},
"sap.ui.viewModifications": {
"hcm.mybenefits.view.S7": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S6": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S5": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S4": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S3": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
},
}
}
});
Here's the link to the same question in the official SAP forum with embedded screenshots for SICF node for the Standard Fiori app and the LPD_CUST config for the extension app.
https://answers.sap.com/questions/13230788/fiori-standard-app-my-benefits-extensions-not-work.html
I found the issue. The version of the standard Fiori app is using SAPUI5 1.28.5 where columns aggregation is still part of sap.m.List but deprecated. Also, the GW before the upgrade had the SAPUI5 version of 1.52 which still had columns listed as aggregation of List. That's why the app was working before but the upgraded GW SAPUI5 version is 1.71.24 where columns aggregation doesn't exist, hence the NOT FOUND error.
Because the XML is part of the standard code, I won't be able to modify the XML to replace columns with Table.
We had created a ticket with SAP and they said they will have to fix it for us.
Can't get jsTree nodes to expand collapse. I must be missing something very simple.
This is the script
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.jstree.js") %>"></script>
<script type="text/javascript">
$(document).ready(function () {
Refresh();
});
function Refresh() {
$('#technologyTree').jstree({
"json_data": {
"ajax": {
"url": "/TechnologyVersions/TechnologiesTreeAjax",
"type": "GET",
"dataType": "json"
}
},
"plugins": ["themes", "json_data", "ui"],
"themes": {
"theme": "default",
"dots": true,
"icons": true,
"url": " <%= Url.Content("~/Content/jsTree/themes/default/style.css") %> "
}
});
}
</script>
I can see the tree populated correctly and the json result from the controller seems correct. However when I click on those expand/collapse arrows nothing happens.
The problem was that conflict with jQuery validation plugin. Upgrading to latest version of jQuery validation plugin solves the problem.
JsTree conflicts with jquery.validate