We Keep Coding

Office.JS but in Nuxt

I am trying to get an Office-Addin work in Nuxt instead of Vue (Source:
https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-vue).
# Working example in Vue
import { createApp } from 'vue'
import App from './App.vue'
window.Office.onReady(() => {
createApp(App).mount('#app');
});
What i have tried so far in Nuxt:
# plugins/office.js
console.log(window.Office)
window.Office.onReady(function () {
alert("office is ready");
});
# nuxt.config.js
plugins: [
{ src: '~/plugins/outlook.js', mode: 'client' },
],
But I got undefined and Uncaught TypeError: Cannot read properties of undefined (reading 'onReady') in the console.

I have found a solution with the help of a random guy with a heart on the internet that replied to my email (https://github.com/benemohamed). All I did is put following code snippet in my outlook.vue file:
head() {
return {
script: [
{
innerHTML: `
window._historyCache = {
replaceState: window.history.replaceState,
pushState: window.history.pushState
};
`,
},
{
src: "https://appsforoffice.microsoft.com/lib/1/hosted/office.js",
},
{
innerHTML: `
// And restore them
window.history.replaceState = window._historyCache.replaceState;
window.history.pushState = window._historyCache.pushState;
`,
},
],
};
},

Markdown-it not working with Nuxt & contentful, throwing errors

I am Building a site using Contentful and have followed different guides and configurations. No matter what I do I can't seem to get a basic example of markdownit working. I keep getting an error:
Property or method "$md" is not defined on the instance but referenced during render.
can't get any examples in the docs working:
https://openbase.com/js/#nuxtjs/markdownit
I have even deleted the whole template and tried simple versions. I have also tried different set ups in the config file below.
I have run 'yarn build', 'yarn add markdown-it'
and neither seem to have helped
here is what I am trying to get to work eventually:
<article v-html="$md.render(post.fields.body)"></article>
This is one example I am following and it seems to be working here on the live demo:
https://github.com/sdras/contentful-nuxt-netlify/blob/e80e6552eef812320a7bd2dd66ad3fa8ebf5f840/pages/_slug.vue
In context - pages/_id/index.vue
<template>
<div class="post-component">
<a #click="$router.go(-1)">Go back to overview</a>
<hr />
<h1>{{post.fields.title}}</h1>
<p></p>
<p>
{{post.fields.body}}
</p>
<article v-html="$md.render(post.fields.body)"></article>
</div>
</template>
<script>
import {createClient} from '../../plugins/contentful';
const contentfulClient = createClient();
export default {
name: 'index',
asyncData ({ env, params }) {
return contentfulClient.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
'fields.slug': params.id
}).then(post => {
return {
post: post.items[0]
}
}).catch(console.error)
}
}
</script>
nuxt.config.js
const config = require('./.contentful.json')
module.exports = {
// ...
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_PERSON_ID: config.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
}
// ...
}
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'thomasulman',
htmlAttrs: {
lang: 'en'
},
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' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'nuxt-buefy',
"#nuxtjs/markdownit"],
markdownit: {
runtime: true, // Support `$md()`
injected: true,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
package.json
{
"name": "******",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/markdownit": "^1.2.10",
"contentful": "^8.4.2",
"core-js": "^3.15.1",
"markdown-it": "^12.1.0",
"nuxt": "^2.15.7",
"nuxt-buefy": "^0.4.8"
},
"devDependencies": {}
}
just in case it helps:
index.vue
<template>
<div>
<!-- <Navigation /> -->
<!-- render data of the person -->
<h1>{{ person.fields.name }}</h1>
<!-- render blog posts -->
<ul>
<li v-for="post in posts">
{{ post.fields.title }}
<nuxt-link :to="post.fields.slug" class="more">Read more ⟶</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import { createClient } from '~/plugins/contentful.js'
const client = createClient()
export default {
// `env` is available in the context object
asyncData({ env }) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
]).then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
}).catch(console.error)
}
}
</script>

I've achieved to make it work properly as shown here: https://github.com/nuxt-community/markdownit-module#usage
I've added a proper HTML sanitizer too, check the plugins directory.
You can find the working Github repo here: https://github.com/kissu/so-nuxt-markdownit
This configuration was enough so far for me
nuxt.config.js
plugins: [
'~/plugins/vue-dompurify'
],
modules: [
'#nuxtjs/markdownit'
],
markdownit: {
runtime: true, // Support `$md()`
// preset: 'default',
// linkify: true,
// breaks: true,
// use: [
// 'markdown-it-div',
// 'markdown-it-attrs'
// ]
}
And those 2 files are working properly
index.vue
<template>
<div>
<div v-dompurify-html="$md.render(model)"></div>
<br/>
<br/>
<div v-dompurify-html="testMarkdownContent"></div>
<nuxt-link to="/inline">Inline markdown working too!</nuxt-link>
</div>
</template>
<script>
import testMarkdown from '../blog/test.md'
export default {
data() {
return {
model: '# Hello World!'
}
},
computed: {
testMarkdownContent() {
return testMarkdown
}
}
}
</script>
inline.vue
<template lang="md">
# Hello World!
Current route is: {{ $route.path }}
<nuxt-link to="/">Back to index</nuxt-link>
</template>

The issue with the whole thing was that // module.exports {} was overwriting the export default {} in the config file.

Loading (StaticQuery) white screen on Gatsby

I am getting the error reported on this issue: https://github.com/gatsbyjs/gatsby/issues/25920
But the people from Gatsby seems to be too busy to answer so maybe someone else here knows about this problem.
Have in mind that I am not using the StaticQuery component at all on my code.
I am getting this exact same issue.
I noticed some other devs before having it: https://github.com/gatsbyjs/gatsby/issues/6350
I saw that some devs recommend removing the export from the query variable, so this:
const query = graphql`...`
Instead of this:
export const query = graphql`...`
But this is not my case. Everything was working good until some hours ago.
I have all of my pages with queries like this:
// this is my component
const CollectionProduct = ({ data }) => {...}
// and outside the component is the query
export const query = graphql`
query($handle: String!) {
shopifyCollection(handle: { eq: $handle }) {
products {
id
title
handle
createdAt
}
}
}
}
`
In that component I am using export on const query, all of my pages are defined the same way and before there were no problems. I already upgrade and downgrade the version of Gatsby and yet the same issue.
My issues comes exactly after I added a .eslintrc.js config file to the project; is this an option that my project build fails on the live site due to ESLint?
Locally it works, I can build the project and see it on my localhost with no problems. But when I see the live site, it throws that Loading(StaticQuery) white screen. And I am not even using StaticQuery component anywhere. Only the useStaticQuery hook on non page nor templates components.
This is my ESLint config:
module.exports = {
globals: {
__PATH_PREFIX__: true,
},
'parser': 'babel-eslint',
parserOptions: {
extraFileExtensions: ['.js'],
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
useJSXTextNode: true,
include: ['**/*js'],
},
env: {
es6: true,
node: true,
jest: true,
browser: true,
commonjs: true,
serviceworker: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended', 'semistandard', 'plugin:import/react'],
plugins: ['react'],
rules: {
semi: 'off',
'strict': 0,
curly: [1, 'all'],
'no-console': 'error',
"react/prop-types": 0,
camelcase: ['off', {}],
'react/jsx-uses-vars': 1,
'react/jsx-uses-react': 1,
'react/jsx-boolean-value': 2,
"react/display-name": 'warn',
'react/react-in-jsx-scope': 1,
'brace-style': ['error', '1tbs'],
'comma-dangle': ['error', 'never'],
'linebreak-style': ['error', 'unix'],
'react-hooks/exhaustive-deps': 'off',
'standard/no-callback-literal': [0, []],
'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: '*', next: 'return' },
{ blankLine: 'always', prev: '*', next: 'multiline-const' },
{ blankLine: 'always', prev: 'multiline-const', next: '*' },
{ blankLine: 'always', prev: '*', next: 'block-like' },
{ blankLine: 'always', prev: 'block-like', next: '*' },
],
'react/jsx-curly-brace-presence': [
'error',
{ props: 'never', children: 'never' },
],
},
};
Any ideas?

Delete cache storage from the browser and reload the page. Or Hard Reload the page and see, This resolved the issue for me.

I had a similar issue which happened all of a sudden. Someone on https://github.com/gatsbyjs/gatsby/issues/24890 suggested to try to clean your project.
For me deleting both node_modules and yarn.lock to then regenerate them did the trick!
EDIT: This seems to have been fixed with gatsby 2.24.11

Updating the cli withnpm i -g gatsby-cli solved this problem for me

Angular - How can I activate AUX route with lazy loaded module?

I have an angular app which is loading lazily module.
At first the app is navigating to home where it loads the module ( named module1) :
main routing :
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", loadChildren: "./module1/module1.module#Module1Module" },
];
At module1 - there's also routing table :
const routes: Routes = [
{
path: "", component: Home1Component,
children: [
{ path: 'bird', outlet: 'under', component: Home2Component }
]
}
];
So since it's loading lazily , when the app starts - it goes to /home where there it loads the Home1Component
But Home1Component also has a button in it which suppose to set a value to the outlet route .
home1.component.html:
<input value="click to activate aux route" type="button" (click)="go()"/>
<router-outlet ></router-outlet>
<router-outlet name='under'></router-outlet> //<---- I want to activate only this
This is how I try to activate the outlet route :
public go() {
this.router.navigate([{ outlets: { under: ['bird'] } }], { relativeTo: this.route })
}
But I get an error :
Error: Cannot match any routes. URL Segment: 'home'
Question :
Why am I getting this error and how can I fix it ?
Online code here : Stackblitz

Well with the help of #jmw5598 who referenced me to the problem/bug with the router .
There is a problem with default empty location for lazy loaded modules.
Here is a working solution for the problem .
The key thing to understand is that lazy modules should not have empty root path
Related specific description :

list isn't loading in panel in sencha touch

I am trying to load a List in a Panel but i am getting following error
Uncaught TypeError: Cannot call method 'substring' of undefined
here is my ProfileContainer.js which contains the List
Ext.define('demo.view.ProfileContainer', {
extend: 'Ext.Panel',
xtype: 'profilecontainer',
// requires: [ 'Ext.TitleBar', 'demo.view.ProfileList' ],
requires: [ 'Ext.TitleBar' ],
config: {
items: [{
xtype: 'titlebar',
title: 'demo',
cls: 'bms-bg'
}, {
xtype: 'profilelist'
}]
}
});
here is the code of ProfileList.js
Ext.define('demo.view.ProfileList', {
extend: 'Ext.dataview.List',
alias: 'widget.profilelist',
requires: ['demo.store.ProfileStore'],
config: {
store: 'ProfileStore',
itemTpl: '{name}',
}
});
here is my ProfileStore.js
Ext.define('demo.store.ProfileStore',{
extend:'Ext.data.Store',
config: {
model: 'demo.model.ProfileModel',
data:[
{ name: 'John Rambo' },
{ name: 'Brad Pitt'}
]
}
});
and ProfileModel.js
Ext.define('demo.model.ProfileModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' }
]
}
});
but my list isnt loading into panel and i am getting above mentioned error

xtypes are alias defined as widget
So you need to define them like:
alias:'widget.profilecontainer',
or
alias:'widget.profilelist',
Some information on require and uses:
You have dependencies between your classes which need to be resolved. This is normally done by the buildtool or if you don't run it by yourself.
Dependencies are one of the reasons why you use require or uses where require can be threated as strict because it ensure that the class is there as soon as it get required
And here comes a the difference: because this is not valid if you lazy load. At this time the required class will be available after the
class is defined. The build tool cleans this up places the required
classes before the class definition
while uses can be treated as lose because it only ensure that the class exist the time the Ext.onReady get called.
Normally this wan't give you headache but if the class definition requires that dependencies get resolved at definition time it will blow up when lacy loaded. If you now the dependency (xtype) that is causing this you can try to load it manually by using
Ext.require('class');
which need to get placed before the class definition.