- 🌍 I'm based in Colombia
- ✉️ You can contact me at [email protected]
- 🧠 I'm learning WebAssembly
- 🤝 I'm open to collaborating on any project that helps the community
My GitHub Stats
Electron + Webpack 4 + Babel 7 + React 16 + PostCSS + Sass + Ant Design + Jest + Enzyme + Eslint
License: MIT License
My GitHub Stats
Hi,
I have noticed that CSS from the .scss file are imported into styles and then styles.app or styles.helloWorld is used. Is there any particular reason for that?
Isnt importing "myStylesheet.scss"
enough at the start?
Cheers
cannot build usingyarn install...
0 warnings and 6 errors generated.
make: *** [Release/obj.target/fse/fsevents.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:200:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.6.0
gyp ERR! command \"/usr/local/Cellar/node/12.4.0/bin/node\" \"/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/node-gyp/bin/node-gyp.js\" \"build\" \"--fallback-to-build\" \"--module=/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node\" \"--module_name=fse\" \"--module_path=/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64\" \"--napi_version=4\" \"--node_abi_napi=napi\" \"--napi_build_version=0\" \"--node_napi_label=node-v72\"
gyp ERR! cwd /Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents
gyp ERR! node -v v12.5.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/Cellar/node/12.4.0/bin/node /Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64 --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:200:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
node-pre-gyp ERR! System Darwin 18.6.0
node-pre-gyp ERR! command \"/usr/local/Cellar/node/12.4.0/bin/node\" \"/Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp\" \"install\" \"--fallback-to-build\"
node-pre-gyp ERR! cwd /Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/fsevents
node-pre-gyp ERR! node -v v12.5.0
node-pre-gyp ERR! node-pre-gyp -v v0.12.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/Cellar/node/12.4.0/bin/node /Users/ronenmagid/dev/electron-react-ant-boilerplate/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/ronenmagid/dev/[1/4] ⠁ node-sass
I cannot compile with Atlaskit components, May be because are written in CSS, some webpack issue?. I attached a demo on simple create react app that not work with the boilerplate because cannot find the modules.
I cloned the repo, npm install, then when I try npm run start or npm run build it get stucks at
`
[email protected] build C:\Users\me\ElectronProjects\electron-react-ant-boilerplate
node -r @babel/register & webpack --config webpack.prod.config.babel.js
`
Hi,
I am trying to import inside the layouts/App.js.
const { ipcRenderer } = require('electron')
const remote = require('electron').remote
On npm start
I am encountering an error,
index.js:1 Uncaught Error: Cannot find module 'fs' index.js:1
at webpackMissingModule (index.js:1)
at Object.<anonymous> (index.js:1)
at Object../node_modules/electron/index.js (index.js:18)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object.<anonymous> (App.js:10)
at Object../src/layouts/App.js (App.js:19)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object.<anonymous> (Home.js:6)
./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in
'directory/electron-react-ant-boilerplate/node_modules/electron'
To solve this I tried to add
base: {
node: {
fs: 'empty'
},
module: {
...
}
}
on line 101 inside const config in file webpack.config.babel.js
, then I got new error
Uncaught TypeError: fs.existsSync is not a function
at getElectronPath (index.js:7)
at Object.<anonymous> (index.js:18)
at Object../node_modules/electron/index.js (index.js:18)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object.<anonymous> (App.js:10)
at Object../src/layouts/App.js (App.js:19)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object.<anonymous> (Home.js:6)
Is there any solution?
Here is the code:
// Libs
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Layout } from "antd";
import { ConfigProvider } from 'antd';
import ptBR from 'antd/lib/locale/pt_BR'
// Styles
import styles from "./App.scss";
// Components
import Header from "@/components/@shared/Header";
import Footer from "@/components/@shared/Footer";
/**
* App
*
* @class App
* @extends {Component}
*/
class App extends Component {
static propTypes = {
children: PropTypes.node.isRequired
};
constructor(props) {
super(props);
}
render() {
const { children } = this.props;
return (
<ConfigProvider locale={ptBR}>
<Layout>
<Header />
<Layout className={styles.app}>
<Layout.Content>{children}</Layout.Content>
</Layout>
<Footer />
</Layout>
</ConfigProvider>
);
}
}
export default App;
What I tried:
I´m following ant design suggestion to change language:
https://ant.design/docs/react/i18n
What I´d like:
To use ConfigProvider locale to change the language in all components.
Any ideas? I was able to set only protable locale, but dropdowns and other components are still in chinese. I did through this issue solution:
ant-design/pro-table#79 (comment)
Error: Cannot find module './src/ant-design/dark-theme' after install the theme via npm and put in the less loader, any idea why?
const lessLoader = AntdScssThemePlugin.themify({
loader: "less-loader",
options: {
modifyVars: darkTheme,
sourceMap: isDev,
javascriptEnabled: true
}
});
I put the integration in the webpack config
target: "electron-renderer",
base: {
node: {
fs: 'empty',
child_process: 'empty'
},
then call in a react component
const spawn = require('child_process').spawn;
const ls = spawn('ls', ['-lh', '/usr']);
ls.stdout.on('data', (data) => {
console.log(`stdout: ${data}`);
});
ls.stderr.on('data', (data) => {
console.log(`stderr: ${data}`);
});
ls.on('close', (code) => {
console.log(`child process exited with code ${code}`);
});
and get this error
main.js:272309 Uncaught TypeError: spawn is not a function
Any ideas about that?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.