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" ]
}
}
Related
I'm trying to migrate my website to NextJS, and I'm having trouble to do some internationalization.
I'm following the tutorial from Documentation itself, but my locale in the inspector is coming up as undefined.
What i'm doing wrong?
I'm using the latest version of nextJS.
Im trying to get some info from console.log.
console.log("Locale: " + locale);
console.log(router);
and it prints:
next.config.js
module.exports = {
i18n: {
locales: ['en-US', 'pt-BR'],
defaultLocale: 'pt-BR',
},
}
/pages/index.js
import Head from 'next/head'
import { useRouter } from 'next/router'
import pt from '../locale/index/pt'
import en from '../locale/index/en'
export default function Home() {
const router = useRouter();
const { locale } = router;
const t = locale === 'pt' ? pt : en;
return (
<div className="container">
<Head>
<title>{t.title}</title>
</Head>
</div>
)
}
/locale/pt.js
export default {
title: "Teste Portugues."
}
/locale/en.js
export default {
title: "Test English"
}
Some random info:
NextJS Version: 12.0.4
Chrome Version: 96.0.4664.55
Node Version: 17.0.1
UPDATE: I did a restart of my computer, and after this, 3 days later, when i use console.log({locale}), it get my pt-BR locale normally.
(And i did nothing more)
So, i'll close the thread. Thanks anyway!
This seems to be a bug in older versions of Next.js. yesterday, I had a similar issue, and after upgrading Next, React, and React-dom to their latest version, it worked like charm!.
Just restart the server. If the next.config.js file is modified, you have to restart your server for the changes to take effect
Problem:
The Next JS dynamic import is stuck on loading on mobile device browser (used browser: Google Chrome and Safari on IOS.) Whereas it is working perfectly on Google Chrome and Mozilla on Desktop. I am also using next-PWA on the default configuration. Could it be due to next-PWA?
Code Snippet:
import dynamic from "next/dynamic";
import { useMemo } from "react";
export default function Main() {
const Component = useMemo(
() =>
dynamic(() => import("#components/Component"), {
loading: () => <p>The component is loading</p>,
ssr: false,
}),
[],
);
return(<div><Component/></div>);
}
Output on Mobile Device
The component is loading
Output on Desktop Browser
Hello from Component
The fault was not of the Next Dynamic rather than it was due to HTTP site not getting navigator resources in mobile browsers.
How can I programmatically render a react app in gulp and node 12?
I taking over and upgrading an old react (0.12.0) app to latest. This also involved upgrading to ES6. The react code itself is done, but we also need to prerender the application (The app is an interactive documentation and must be crawled by search engines).
Previously, the gulp build process ran browserify on the code and then ran it with vm.runInContext:
// source code for the bundle
const component = path.resolve(SRC_DIR + subDir, relComponent);
vm.runInNewContext(
fs.readFileSync(BUILD_DIR + 'bundle.js') + // ugly
'\nrequire("react").renderToString(' +
'require("react").createElement(require(component)))',
{
global: {
React: React,
Immutable: Immutable,
},
window: {},
component: component,
console: console,
}
);
I am suprised it worked before, but it really did. But now it fails, because the source uses ES6.
I looked for pre-made solutions, but they seem all targeting old react versions, where react-tools was still around.
I packaged the special server-side script below with browserify & babel and then ran it using runInNewContext. It does not fail but also not output any code, it just logs an empty object
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './index';
const content = renderToString(<App />);
I found tons of articles about "server-side rendering", but they all seem to be about rendering with express and use the same lines as the script above. I can't run that code directly in gulp, as it does not play well with ES6 imports, which are only available after node 14 (and are experimental).
I failed to show the gulp-browserify task, which was rendering the app component directly, instead of the server-side entrypoint script above. In case anyone ever needs to do this, here is a working solution.
Using vm.runInNewContext allows us to define a synthetic browser context, which require does not. This is important if you access window anywhere in the app.
src/server.js:
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './index';
const content = renderToString(<App />);
global.output = content;
above script serves as entry point to browserify. Gulp task to compile:
function gulpJS() {
const sourcePath = path.join(SRC_DIR, 'src/server.js');
return browserify(sourcePath, { debug:true })
.transform('babelify', {
presets: [
["#babel/preset-env", { targets: "> 0.25%, not dead" }],
"#babel/preset-react",
],
})
.bundle()
.pipe(source('server_output.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
.pipe(dest(BUILD_DIR));
}
The generated file can now be used by later tasks, e.g. to insert the rendered content into a HTML file.
const componentContent = fs.readFileSync(path.join(BUILD_DIR, 'server.js'));
const context = {
global: {
React: React,
Immutable: Immutable,
data: {
Immutable
},
},
window: {
addEventListener() { /* fake */ },
removeEventListener() { /* fake */ },
},
console,
};
vm.runInNewContext(componentContent, context);
const result = context.global.output;
I am editing some javascript files (particularly, reactjs coed) in VS Code on Ubuntu 18.04. However, the "formatting" is really terrible.
Before:
import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return (
<div className="App">
<Dropzone onDrop={this.onDrop} />
</div>
);
}
}
export default App;
After:
import React, {
Component
} from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return ( <
div className = "App" >
<
Dropzone onDrop = {
this.onDrop
}
/> <
/div>
);
}
}
export default App;
Previously, I was editing these files on Windows 10 in VS Code, and the formatter was great. Is there an extension I am missing? Or what am I doing wrong here. To format, I am using the "Format Document" keyboard shortcut.
Here are my current extensions:
The culprit for this behavior was Beatify extension on Vscode in my case. Disabling resolved the issue.
Here is the solution,
change the language manually to "javaScript React"
try with your favorite formatter(you can install vs code extensions such as "Prettier","beautify")
Cheers !
I personally use Prettier for JS and CSS formatting, and JS JSX Snippets for JSX in React. I have tried a lot of others, but with those 2 I can assure you your React code will look beautiful.
the full error is:"You are currently using minified code outside of NODE_ENV === "production". This means that you are running a slower development build of redux. ..."
I already tried installing webpack and setting the mode to "production" in the webpack.config.js file but it didn't work. I have a running project with redux and react-redux installed. As soon as I add the import statement to the App.js:
import { createStore } from 'redux'
it throws the error. I use expo for my app and ideally I don't want to use webpack. According to the Redux documentation webpack is not necessary.
Why does it throw the error?
App.js
import * as React from "react";
import { AppFontLoader } from "./AppFontLoader";
import { Drawer } from "./Navigation";
//import { createStore } from 'redux' //uncommenting this line throws the error
export default class App extends React.Component {
render() {
return (
<AppFontLoader>
<Drawer />
</AppFontLoader>
);
}
}