We Keep Coding

nuxtjs/router use runtime config client side

we are using nuxt 2.14.12 and #nuxtjs/router 1.5.0
we are trying to use runtime config to make some HTTP request client side.
here is our router.js
export async function createRouter(ssrContext, createDefaultRouter) {
[...]
try {
const res = await axios.get(`${config.public.apiBaseUrl}/myslug`)
} catch (e) { }
[...]
}
here is the config file
[...]
const apiBaseUrl = `${process.env.NUXT_ENV_MY_API_URL || 'http://my-dev-domain.com'}`
[...]
export default {
apiBaseUrl,
},
private: {
apiBaseUrl,
},
[...]
here is our nuxt.config.js
export default {
[...]
publicRuntimeConfig: config.public,
privateRuntimeConfig: config.private,
[...]
buildModules: [
['#nuxtjs/router', { keepDefaultRouter: true }],
],
[...]
router: {
linkActiveClass: 'current-menu-item'
},
[...]
}
we use nuxt build in our CI and later at runtime we use nuxt start
at runtime, despite on server side the env variable NUXT_ENV_MY_API_URL is correctly set, on the client site the variable looks hardcoded (I think webpack replace it) and we get the value present on build time (http://my-dev-domain.com)
is there a way to use the runtime config on the client side?
thank you

Unable to resolve module in react-viro

I'm trying to run this app and I get the following error!
https://github.com/vnovick/pile-blocks-ar
I checked the proper asset import instruction from here https://docs.viromedia.com/docs/importing-assets
everything seems legit but I keep getting the error!
===
error: bundling failed: Error: Unable to resolve module ./res/tetris/blocks_1.vrx from /Users/###/pile-blocks-ar-master/js/GameSceneAR.js: The module ./res/tetris/blocks_1.vrx could not be found from /Users/###/pile-blocks-ar-master/js/GameSceneAR.js. Indeed, none of these files exist:
`/Users/###/pile-blocks-ar-master/js/res/tetris/blocks_1.vrx
...
===
I change the versions in package.json to the latest:
"react": "16.6.1",
"react-native": "0.57.7",
"react-viro": "2.13.0"
Thanks in advance :)

You need to add assets support manualy if you have imported ViroAR in existing React-Native app (not created with Viro CLI).
Here's the guide:
https://docs.viromedia.com/docs/importing-assets
If you are using RN > 0.59 then you should discard viro instructions and modify metro.config.js file (located in project root) to look something like this:
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
resolver: {
assetExts: [
'obj',
'mtl',
'JPG',
'vrx',
'hdr',
'gltf',
'glb',
'bin',
'arobject',
'png',
],
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
resolver.assetExts is the key.

Integration of woocommerce using angular 4 getting TypeError: crypto.createHmac is not a function

I am trying to make a angular 4 app with woocommerce integration to list all the products. Here is my code
import { Component, OnInit } from '#angular/core';
import {Headers, Http, RequestOptions, URLSearchParams} from '#angular/http';
import 'rxjs/add/operator/toPromise';
import * as WC from 'woocommerce-api';
import { WooApiService } from 'ng2woo';
import * as CryptoJS from 'crypto-js';
#Component({
selector: 'app-pcat',
templateUrl: './pcat.component.html',
styleUrls: ['./pcat.component.scss']
})
export class PcatComponent implements OnInit {
WooCommerce: any;
products: any;
public crypto: any;
typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
constructor(private woo: WooApiService) {}
ngOnInit(): void {
this.woo.fetchItems('products')
.then(products => console.log(products));
}}
I am getting error in console
Error: Uncaught (in promise): TypeError: crypto.createHmac is not a function
TypeError: crypto.createHmac is not a function
hash_function#webpack-internal:///../../../../woocommerce-api/index.js:133:16
OAuth.prototype.getSignature#webpack-internal:///../../../../oauth-1.0a/oauth-1.0a.js:100:12
OAuth.prototype.authorize#webpack-internal:///../../../../oauth-1.0a/oauth-1.0a.js:87:34
WooCommerceAPI.prototype._request#webpack-internal:/woocommerce-api/index.js:186:17
WooCommerceAPI.prototype.get#webpack-internal:/woocommerce-api/index.js:213:10
fetchItems/<#webpack-internal:/ng2woo/dist/src/woocommerce.service.js:24:13
ZoneAwarePromise#webpack-internal:/zone.js/dist/zone.js:891:29

Yes this issue is related to the recent "upgrades" in Angular6, in my case with Ionic4. The crypto library was excluded as it was seen as been to bulky. There seems to be no clear solution from Angular on how this can be solved, so up till now one has to include these libraries externally.
Most likely you have added something similar to the "package.json" what I have below even to get this far.
"browser": {
"aws4": false,
"aws-sign2": false,
"crypto": false,
"ecc-jsbn": false,
"http": false,
"http-signature": false,
"https": false,
"net": false,
"oauth-sign": false,
"path": false,
"request": false,
"sshpk": false,
"stream": false,
"tls": false
},
I have also tried without success
1 - Install #angular-builders/custom-webpack :
2 - Add custom builder in angular.json :
In angular.json > project > architect > build > builder
replace #angular-devkit/build-angular:browser to #angular-builders/custom-webpack:browser
3 - Create a file webpack.config.js at the root of the project :
This will be loaded by the new builder (by default the filename is webpack.config.js but you can have a custom one if needed see here.
Note : This will append your config to the default webpack config from angular.
4 - Add node support in webpack.config.js :
Here is what is needed for web3 for example.
module.exports = {
node: {
crypto: true,
http: true,
https: true,
os: true,
vm: true,
stream: true
}
}
I eventually just forked the woocommerceAPI and I have a working version. I saw that at least 40 forks have done something similar. Between the code bellow and the browser it should work. The custom webpack is not necessary.
Modified WooCommerceAPI

Importing services in Vue.js

I have a utils service I wish to use in my Vue component:
import utils from './utils';
export default {
name: 'grid',
props: {
'gridInit': { type: Object, require: true },
'gridDataInit' : { type: Array, required: true }
},
data: function() {
return {
gridData: [],
}
},
created: function(){
this.gridData = utils.transformRawData(this.gridDataInit, this.gridInit.check);
},
}
However, I receive:
[Vue warn]: Error in created hook: "ReferenceError: utils is not defined"
How can I solve the issue? The structuring of my project with utils services is very important to me.

This code says that you have declared utils as you imported. So that was the declaration part. But what about definition? In definition there is main play happening around for which that declared utils is used in code. So I think it creates warning that it is not defined. You should use it via registering like Vue.use(componentname/pluginname). This all should be done in index.js and then should be used in components
Anyhow hope this clears for you!

How to use "import" in a polymer element

I'm trying something like the following:
<dom-module id="my-app">
<template> <div>{{data.name}}</div> </template>
<script>
import data from 'data';
class MyApp {
constructor() { ... }
beforeRegister() {
this.is = 'my-app';
this.properties = {
data: {
type: Object,
value: function () {
return data;
},
}
};
}
ready() {}
...
}
</script>
</dom-module>
So, I have here ES6 too, so I constructed the following gulp task:
gulp.task('js', function () {
return gulp.src(['app/**/*.{js,html}'])
.pipe($.sourcemaps.init())
.pipe($.if('*.html', $.crisper())) // Extract JS from .html files
.pipe($.if('*.js', $.babel()))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/'))
.pipe(gulp.dest('dist/'));
});
});
This works as long as I don't have the import data from 'data' line. Now I get the following error in the browser:
require is not defined
So, I decided to add browserify to the process just below babel
.pipe($.if('*.js', $.browserify({ debug: true, extensions: ['.js', '.html'] })))
Now I get a transpile error
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
I think I'm close, but I'm now stuck here unfortunately. To reproduce this I've created a github repo here
You can check it out and do:
$> cd polymer-es6
$> npm install
$> bower install
$> gulp js
A bonus question: Why is the constructor not called ? It seems that ready is called instead.