We Keep Coding

Receiving errors when trying to import Box2D(LiquidFun)-wasm in vite

I'm doing a project that requires wasm more specific box2d-wasm (https://github.com/Birch-san/box2d-wasm) I'm importing it as it is said in the doc here is the code.
import { useEffect, useState } from "react";
import Box2DFactory from "box2d-wasm";
import "./App.css";
function App() {
useEffect(() => {
Box2DFactory().then((box2D: typeof Box2D & EmscriptenModule) => {
console.log(box2D);
});
}, []);
return (
<>
<h1>test</h1>
<h2>test test</h2>
<canvas width="800" height="600"></canvas>
</>
);
}
export default App;
But for some reason, I'm getting huge amount of errors and I have no clue what they are saying, I pretty much tried everything I could myself to fix it but nothing worked if you know what might be wrong please help and thank you here are the errors.
If you have trouble replicating the problem create react app using vite.
Update: It looks like the reason why it is not working is because the library requires node.js path module, so in order to solve the problem I need to polyfill this module however after doing some digging the solution that I found ended up not working, here is what was supposed to work if anyone knows why it didn't work please tell me.
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
path: "path-browserify",
},
},
});

How to use Graphql Vue Apollo on older IOS / older browser?

I just realize and noticing that my vue app doesn't work well on some older browsers (ios 9 for example). I used the vue-apollo to get data from graphql api using django graphene , but it doesn't event get called on the first load when i debug it.
Previously i get error like "fetch is not found globally", but then i already fix it by adding "unfetch" to the ApolloClient config. But i still can't see on xhr network the api get called. I haven't try with isomorphic-fetch
Here's my code for the apollo client config:
// src/utils/graphql.js
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import fetch from 'unfetch'
export default new ApolloClient({
// Provide the URL to the API server.
link: new HttpLink({ uri: '/api/', fetch: fetch }),
// Using a cache for blazingly
// fast subsequent queries.
cache: new InMemoryCache(),
connectToDevTools: true
});
and i specify it like so in the main.js
import apolloClient from '../utils/graphql'
import VueApollo from 'vue-apollo'
Vue.use(VueApollo);
Vue.config.silent = true
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$loadingKey: "loading"
}
})
This is example of the apollo that i use inside the main.js as well using the smart query:
apollo: {
currentUser: {
query: GET_LOGGED_USER,
skipQuery() {
return this.skipUser
}
}
}
How can i make it work on ios 9 / any older browser?

Ok, after debugging it for two days, I finally found out the issue. So it turns out that i need to add and configure babel/polyfill as well in order to make it works, and add it to the entry point of my app.
Hope everyone who has the same issue can learn from my mistake lol

Importing npm packages in Nativescript Playground

I'm trying to learn nativescript-vue where I'm using the Nativescript's Playground to tryout my sample codes. I'm trying to use nativescript-localstorage package so that I can store some of the information into local storage:
Whenever I'm trying to save project it is giving use compilation error
and following is the error:
An error occurred while transpiling nativescript-localstorage/localstorage.js.
unknown: We found a path that isn't a NodePath instance. Possiblly due to bad serialisation.
I followed the tutorials and added the package as it was instructed my code looks like:
import Vue from 'nativescript-vue';
import Vuex from 'vuex';
import localStorage from 'nativescript-localstorage';
import userStore from './user-store';
//For local storage of vuex tools
const NSVuexPersistent = store => {
// Init hook.
let storageStr = localStorage.getItem('ns-vuex-persistent');
if (storageStr) {
store.replaceState(JSON.parse(storageStr))
}
store.subscribe((mutation, state) => {
// Subscribe hook.
localStorage.setItem('ns-vuex-persistent', JSON.stringify(state));
})
};
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store({
modules: {
userStore
},
strict: debug,
plugins: [NSVuexPersistent]
})
Since the project is not getting saved so I've not shared the link. Help me out with it. Thanks.

nativescript-vue is packaged within the Preview APK, so it can be imported as
import Vue from 'nativescript-vue'
But nativescript-localstorage is something you have installed in your project, so while at Playground you should use relative path to import the module, something like
import * as localStorage from "../nativescript-localstorage"
// Or
const localStorage = require("../nativescript-localstorage");
You can use import name from "package" only when the package has marked something as default in its exports, the syntax is commonly used in ES6 & Vue plugins. nativescript-localstorage has not exported anything as default.

Use of async/await to dynamically import the locales on addLocaleData

I have an 'external' intl provider because I have to handle some labels outside react components.
I am trying to dynamically load the locales without using require statements and I am having a issue I am not sure why it's happening.
So, the following code works:
//intlProvider.js
import { IntlProvider, addLocaleData } from 'react-intl';
import Locale from '../../../../utils/locale';
const locale = Locale.getLocale();
addLocaleData(require(`react-intl/locale-data/${locale}`));
const messages = Locale.getMessages('prot');
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();
export default intl;
then I read the intl in a sharedMessages.js file:
import { defineMessages } from 'react-intl';
import intl from '../components/i18n/Intl';
const messages = defineMessages({
interest: {
id: 'sharedMessages.rate.label',
defaultMessage: 'Interest',
},
bank: {
id: 'sharedMessages.bank.label',
defaultMessage: 'Bank',
},
});
function prepareSharedMessages() {
const msgsObj = {};
Object.keys(messages).forEach(item => {
msgsObj[item] = intl.formatMessage(messages[item]);
});
return msgsObj;
}
const sharedMessages = prepareSharedMessages();
export default sharedMessages;
The above code works fine, but since I want to get rid of the require statement in this line (as dynamic imports increase the bundle a lot):
addLocaleData(require(`react-intl/locale-data/${locale}`));
I tryed to replace it for:
(async localeCode => {
const localeData = await import(`react-intl/locale-data/${localeCode}`);
addLocaleData(localeData.default);
})(locale);
Expected behavior
I'd expect the locale to be loaded properly, but apparently the application is trying to get it before it should. Since I am using async/await, I'd expect it to be set before the rest of the application tries to use it. (If it was inside react components, I could use componentDidMount to trigger the locale, but how can I achieve this behavior for non react components?)
Current behavior
After replacing the require for the import statement above mentioned, I am getting the react-intl warning:
[React Intl] Missing locale data for locale: "de". Using default
locale: "en" as fallback.
My Environment:
react-intl 2.7.0
react 16.0.0
node 9.10.0
OS: macOS Mojave 10.14
Browser Version: Chrome 71.0.3578.98 (Official Build) (64-bit)

web add-in load issues on Outlook desktop only

I've got a problem where my add-in is running fine in Outlook Online, but won't run in Outlook desktop. The add-in is successfully activated from the manifest, but fails after load. This is a React + TypeScript project (testing using NodeJS + webpack in Webstorm).
I've narrowed the problem to the usage of ANY require statement for importing a reference. If I eliminate it, it runs fine and shows my test Office UI Fabric CompoundButton component. With the code, it spins and eventually shows a blank page. No script exceptions are thrown, and this is enabled in IE settings.
Why would this fail only on the desktop?
To repro, use three files:
Start/main page: myapp.tsx
Which renders TestComponent.tsx
Which references test.jsx
//myapp.tsx
import TestComponent from './components/TestComponent';
import * as $ from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
const render = (Component) => {
ReactDOM.render(
,
document.getElementById('container')
);
};
Office.initialize = function () {
$(document).ready(function () {
console.log('====myapp.tsx.Office.initialize(): entered');
render(TestComponent);
});
};
if ((module as any).hot) {
console.log('====index.tsx.module() foo');
(module as any).hot.accept('./components/App', () => {
const NextApp = require('./components/App').default;
render(NextApp);
});
}
//TestComponent.tsx
import * as React from 'react';
import { CompoundButton } from 'office-ui-fabric-react/lib/Button';
//============
// BAD CODE!
//import foo = require('../scripts/test.jsx');
//============
export default class TestComponent extends React.Component {
render() {
console.log('====TestComponent.render()');
//============
// BAD CODE!
//foo.testFunction();
//============
return(
Create account
);
}
}
//test.jsx
export function testFunction(){
console.log("test.jsx: testFunction");
}

Office 2013 and 2016 for Windows (desktop apps) use an embedded IE 11 browser for rendering. IE 11 doesn't support a lot of the recent JS features you find in Edge, Chrome, and Firefox. As such, you either need to polyfill the functionality you need to provide alternative paths for IE 11.
One quick-fix may be just changing how TypeScript is generating JS so that it is compatible with IE 11:
{
"compilerOptions": {
"skipLibCheck": true,
"lib": [ "es5", "dom", "es2015.promise" ]
}
}