We Keep Coding

Are CSS modules available for excel add-in using React?

I have created a reactjs project using the Yeoman office generator. I am trying to keep the components and the styling files together. Are css modules available for this type of projects? Below is my code:
import * as React from "react";
import classes from "./Header.module.css"
const Header = (props) => {
return <header className={classes["header-main"]}>...</header>;
};
export default Header;
For this case my Header.module.css is in the same folder as the Header.js file. But my Header.module.css file doesn't appear to have any effect on my component.
Is there something missing in my packages? Below is my package.json file.
{
"name": "office-addin-taskpane-react-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-React-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "excel",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack -p --mode production --https false",
"build:dev": "webpack --mode development --https false",
"build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
"dev-server": "webpack-dev-server --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"#fluentui/react": "^8.16.0",
"core-js": "^3.9.1",
"es6-promise": "^4.2.8",
"office-ui-fabric-react": "^7.10.0",
"react": "^16.8.2",
"react-dom": "^16.10.2",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#types/es6-collections": "^0.5.29",
"#types/find-process": "1.2.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"#types/react": "^16.8.22",
"#types/react-dom": "^16.8.4",
"#types/react-hot-loader": "^4.1.0",
"#types/webpack": "^4.4.34",
"#types/webpack-dev-server": "^3.1.6",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^5.2.4",
"eslint": "^7.20.0",
"eslint-plugin-office-addins": "^1.0.0",
"eslint-plugin-react": "^7.16.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^4.2.0",
"find-process": "^1.4.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.1",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"office-addin-cli": "^1.2.2",
"office-addin-debugging": "^4.2.2",
"office-addin-dev-certs": "^1.6.2",
"office-addin-lint": "^1.3.2",
"office-addin-manifest": "^1.6.2",
"office-addin-prettier-config": "^1.1.0",
"postcss-loader": "^4.0.0",
"react-hot-loader": "^4.12.6",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"ts-loader": "^6.2.2",
"typescript": "^4.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"prettier": "office-addin-prettier-config"
}
Any insight is appreciated.

In your className you pretend the string as object.. you can replace with that.
return <header className={classes.header-main}>...</header>;
and most of the cases in your module.css file is better to name it as camelCase for example ".headerMain"

NextJS redux-saga sample code doesn't work with redux-saga ^1.0.0?

I'm working on connecting Next.js and redux-saga in a large existing React project. I am following the Next.js sample code for this. The sample code works fine, but when I tried to move the Next.js redux-saga sample code -- https://github.com/zeit/next.js/tree/master/examples/with-redux-saga --, my data wasn't getting stored in the store. I'm not sure if my action to store it is being called, or if it's being called late, but I end up with an empty store.
I was tracing through the output and saw that the redux-saga task seems to have a done field with the sample code, but with my code it has a toPromise field.
The only obvious difference I could see between the two projects was that the sample code uses redux-saga 0.16.0 and my project uses ^1.0.0.
When I switched my project to use redux-saga 0.16.0 it works fine.
Perhaps next-redux-saga, on which both of these projects depends, is looking for the done field? Could it be something else? I attach the two package.json fields, in case you spot something I didn't. Thanks for any help!
Sample code package.json
{
"name": "with-redux-saga",
"version": "1.0.0",
"license": "ISC",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"es6-promise": "4.1.1",
"isomorphic-unfetch": "2.0.0",
"next": "^7.0.2",
"next-redux-saga": "3.0.0",
"next-redux-wrapper": "2.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-saga": "^1.0.0"
},
"devDependencies": {
"redux-devtools-extension": "2.13.2"
}
}
My package.json
{
"name": "PAW-React",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/InterficieIS/PAW-React.git",
"author": "Javier1177 <javierlopezblasco#gmail.com>",
"license": "MIT",
"dependencies": {
"#date-io/date-fns": "^1.0.1",
"#material-ui/core": "^3.8.3",
"autoprefixer": "7.1.5",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.0",
"bulma": "^0.6.2",
"date-fns": "^2.0.0-alpha.27",
"dotenv": "^4.0.0",
"eslint-config-airbnb": "^17.1.0",
"express": "^4.16.4",
"glob": "^7.1.2",
"isomorphic-unfetch": "^3.0.0",
"jss": "^9.8.7",
"material-ui-pickers": "^2.1.1",
"next": "^7.0.2",
"next-fonts": "^0.16.0",
"next-redux-saga": "^3.0.0",
"next-redux-wrapper": "^2.1.0",
"node-sass": "^4.4.0",
"normalize.css": "^7.0.0",
"prop-types": "^15.6.2",
"raw-loader": "^0.5.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-jss": "^8.6.1",
"react-redux": "^6.0.0",
"react-slick": "^0.23.2",
"redux": "^4.0.1",
"redux-saga": "^1.0.0",
"sass-loader": "^6.0.6",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"command-line-args": "^4.0.7",
"cross-env": "^5.1.3",
"eslint": "^5.12.0",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.41.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.5.1",
"file-loader": "^3.0.1",
"url-loader": "^1.1.2",
"redux-devtools-extension": "^2.13.7"
},
"scripts": {
"dev": "PORT=3001 node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"export": "next export",
"eslint": "eslint . --ext=\"js,jsx\""
}
}

The react-redux release 1.0.0 brings along API breaking changes which aren't yet implemented in those project. Please keep track of the following issues and pull-requests to know more:
https://github.com/zeit/next.js/pull/6109
https://github.com/bmealhouse/next-redux-saga/issues/27
https://github.com/bmealhouse/next-redux-saga/pull/29
Best Regards

babel-runtime module not found when using material-ui-pickers

i have a react project built using brunch. I am now trying to use material-ui-pickers, by just trying the very first example:
// Imports
/* eslint-disable */
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
// pick utils
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
And wrapping the whole app:
<MuiPickersUtilsProvider utils={MomentUtils}>
<App />
</MuiPickersUtilsProvider>
I am having the following error in the console:
Uncaught Error: Cannot find module 'babel-runtime/core-js/object/get-prototype-of' from 'material-ui-pickers/utils/MuiPickersUtilsProvider.js'
My package.json:
{
"name": "brunch-app",
"description": "Brunch.io application",
"private": true,
"author": "",
"version": "0.0.1",
"repository": "",
"scripts": {
"start": "brunch watch --server",
"build": "brunch build --production"
},
"dependencies": {
"#material-ui/core": "^1.4.0",
"babel-runtime": "^6.26.0",
"material-ui-pickers": "^1.0.0-rc.11",
"moment": "^2.22.2",
"prop-types": "^15.6.0",
"react": "^16.2",
"react-dom": "^16.2",
"react-redux": "~5.0.6",
"react-router-dom": "^4.3.1",
"redux": "~3.7.2",
"shortid": "^2.2.11"
},
"devDependencies": {
"auto-reload-brunch": "^2",
"babel-brunch": "~6.1.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "~6.24",
"brunch": "^2",
"clean-css-brunch": "^2",
"enzyme": "^3.3.0",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
"hmr-brunch": "^0.1",
"uglify-js-brunch": "^2"
}
}
I haven't found much info, the only thing was about installing babel-runtime, which i did but did not work.
Thanks.

Why is crashReporter undefined in Electron?

I recently upgraded to Electron version 1.6.11 and now when I run my npm start command, I get the following error:
The top of my main.js file looks like this:
const {app, BrowserWindow, ipcMain, crashReporter} = require('electron');
const path = require('path');
crashReporter.start({
productName: 'MyCo',
companyName: 'MyCo, Inc.',
submitURL: 'https://myco.co/fake-url-to-submit',
uploadToServer: true
});
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
Here are the contents of my package.json file:
{
"name": "MyApp",
"productName": "MyApp",
"version": "0.0.1",
"main": "main.js",
"repository": "https://github.com/zackshapiro/myApp",
"devDependencies": {
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-3": "^6.17.0",
"css-loader": "^0.23.1",
"electron": "^1.6.11",
"electron-packager": "^8.7.1",
"electron-rebuild": "^1.1.3",
"eslint": "^3.13.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-react": "^6.9.0",
"file-loader": "^0.10.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^4.2.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.4"
},
"scripts": {
"start": "./node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron .",
"watch": "./node_modules/.bin/webpack-dev-server",
"electron-rebuild": "./node_modules/.bin/electron-rebuild"
},
"dependencies": {
"babel-polyfill": "^6.22.0",
"electron-context-menu": "^0.8.0",
"electron-prebuilt": "^0.37.2",
"gl-react": "^2.2.9",
"gl-react-hue-rotate": "^1.1.0",
"isomorphic-fetch": "^2.2.1",
"rc-slider": "^6.1.0",
"react": "15.4.2",
"react-dnd": "^2.2.4",
"react-dnd-html5-backend": "^2.2.4",
"react-dom": "15.4.2",
"react-redux": "^5.0.2",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-saga": "^0.14.3",
"tinycolor2": "^1.4.1"
}
}
How do I fix this and get crashReporter working?

Your start script is wrong -- you're trying to use electron-prebuilt which is outdated, but you probably forgot to uninstall it from your computer so it still works. It's currently in your devDependencies but it's been deprecated and hasn't been supported since 2016. Remove it with:
npm uninstall --save-dev electron-prebuilt
electron-prebuilt does not come with crashReporter thus it is undefined when you try to import it.
You should be using the latest electron you've installed which comes with crashReporter. To do this, change the script to (if you've installed it locally):
"start": "./node_modules/.bin/electron ."
This will use electron instead of electron-prebuilt and it should work fine.

Error on start Ember project on new machine: Unexpected token import, define is not defined

I have existing Ember js project on 2 computers, but I have problems with installation on a new one.
I do install on such way:
git clone <repository-url>
cd projectfolder
npm install
bower install
ember serve
It compiles but on browser I see such errors:
event-factory.js:3 - Uncaught SyntaxError: Unexpected token import
application.js:1 - Uncaught ReferenceError: define is not defined
Seems like some error with babel.
I have such package.json
{
"name": "project",
"version": "2.0.0",
"description": "",
"private": true,
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test"
},
"repository": {
"type": "git",
"url": "..."
},
"engines": {
"node": ">= 0.12.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "2.4.1",
"ember-cli": "^2.10.0",
"ember-cli-app-version": "^2.0.0",
"ember-cli-babel": "^5.1.7",
"ember-cli-data-export": "0.1.26",
"ember-cli-dependency-checker": "^1.3.0",
"ember-cli-deploy": "*",
"ember-cli-deploy-build": "*",
"ember-cli-deploy-gzip": "*",
"ember-cli-deploy-revision-data": "*",
"ember-cli-deploy-s3": "*",
"ember-cli-deploy-ssh-index": "*",
"ember-cli-google-fonts": "1.13.0",
"ember-cli-htmlbars": "^1.0.10",
"ember-cli-htmlbars-inline-precompile": "^0.3.3",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-jshint": "^2.0.1",
"ember-cli-moment-shim": "1.2.0",
"ember-cli-pagination": "2.2.3",
"ember-cli-qunit": "^3.0.1",
"ember-cli-release": "0.2.9",
"ember-cli-sri": "^2.1.0",
"ember-cli-test-loader": "^1.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-content-editable": "0.10.0",
"ember-data": "^2.10.0",
"ember-data-change-tracker": "0.5.5",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.5",
"ember-load-initializers": "^0.5.1",
"ember-metrics": "0.8.1",
"ember-notify": "^5.2.0",
"ember-power-select": "1.0.0",
"ember-radio-button": "1.1.1",
"ember-resolver": "^2.0.3",
"ember-select-guru": "^1.1.2",
"ember-simple-auth": "1.1.0",
"ember-simple-auth-loopback": "1.1.0",
"ember-truth-helpers": "1.2.0",
"ember-welcome-page": "^1.0.3",
"loader.js": "^4.0.10",
"mock-socket": "^6.0.4"
},
"dependencies": {
"ember-cli": "^2.11.1",
"ember-cli-babel": "^5.2.4",
"ember-cli-deploy": "^1.0.0",
"ember-cli-deploy-gzip": "^0.2.4",
"ember-cli-deploy-revision-data": "^0.3.3",
"ember-cli-deploy-s3": "^0.4.0",
"ember-cli-inject-live-reload": "^1.6.1",
"ember-cli-qunit": "^3.1.1",
"ember-data": "^2.11.3",
"ember-websockets": "6.3.0",
"loader.js": "^4.2.2"
}
}
and bower.json:
{
"name": "getprospect",
"dependencies": {
"ember": "v2.10.2",
"ember-cli-shims": "0.1.3",
"ember-cli-test-loader": "0.2.2",
"ember-qunit-notifications": "0.1.0",
"bootstrap": "^3.3.6",
"jquery-stupid-table": "^1.0.1",
"jquery-auto-grow-input": "*",
"file-saver": "*",
"js-xlsx": "~0.8.0",
"fullcalendar": "^2.7.1",
"moment": "^2.17.1",
"moment-timezone": "^0.5.11",
"ember-simple-auth": "^0.8.0",
"raven-js": "^3.2.1",
"urijs": "^1.18.8",
"socket.io-client": "^1.7.2"
}
}
I've successfully installed this project some month ago, but can't figure out why is not launching on this machine... Any help appreciated.

The problem you had is most probably using ^ for your dependencies. What ^ (caret) does is upgrading your dependencies to a major version when you do a clean install. For instance if your dependency to an addon is let's say 1.2.0 and you used ^1.2.0 and there is a new version available 1.3.0, you will get this new major version. If you use ~ (tilda) instead of ^, then you will not get 1.3.0 but 1.2.2 for instance if available. In order to use the exact versions so that your dependencies will not change when you do a clean npm install, you can remove both caret and tilda in your dependency definitions.
In order to figure out which of your dependencies is outdated you can use npm outdated.