Develop Reference

What is the correct way to import esm/dist modules? (React/javascript)

So we're using the geist component library in our codebase. It's pretty much integrated into parts of our app and since this library is 250kb, it's impacting our page speed. To circumvent importing the entire module, the usual solution is just importing what you need and ideally, nothing should break and everything should work as expected.
import { CssBaseline } from "#npkn/geist-react"
Doing the above should work but adds 250kb to the bundle.
Another way to import a component would be to import the specific file. I get two options to import the component from either ESM or dist modules
import CssBaseline from "#npkn/geist-react/dist/css-baseline"
and
import CssBaseline from "#npkn/geist-react/esm/css-baseline/index"
I've tried doing both of these but webpack throws errors. I've tried importing named exports as well but even then it throws an error.
TypeError: _npkn_geist_react_dist_css_baseline__WEBPACK_IMPORTED_MODULE_0___default(...).flush is not a function
9 | static async getInitialProps(ctx) {
10 | const initialProps = await Document.getInitialProps(ctx)
> 11 | const styles = CssBaseline.flush()
| ^
12 |
13 | return {
14 | ...initialProps,
My question is am I doing the imports right or is there something I'm missing?
Thank you!

If anyone else comes across this question, please check out the bundle size example https://geist-ui.dev/en-us/guide/bundle-size. The example doesn't quite work but I found this work around https://spectrum.chat/geist-ui/react/minimize-build~d30af727-2b97-4d16-9357-9b4e5104fdc9
Instead of doing
import Button from '#geist-ui/react/esm/button'
do
import Button from '../../../../node_modules/#geist-ui/react/esm/button';
Reduced our bundle size significantly!

What is the best approach to import multiple react component in a file without creating performance issues?

Here is the thing:
I've gone to several components in my React application, but every time I import them in other files, I've got too many imports like the following:
components
|+comp1
| - comp1.component.tsx
| - comp1.styles.tsx
|+comp2
| - comp2.component.tsx
| - comp2.styles.tsx
|...
|
import Comp1 from "../components/comp1/comp1.component"
import Comp2 from "../components/comp2/comp2.component"
import Comp3 from "../components/comp3/comp3.component"
import Comp4 from "../components/comp4/comp4.component"
I haven't mentionned the in each of these folders I've the associated style file using styled-components that are named as following: comp1.styles.tsx too much my naming conventions styles.
Here are some approaches that I've used to solve this problem:
1st Approach
Inside every component directory i've renamed my component files into index.tsx and my styled component styles as styles.tsx.
Here is the result for this approach:
components
|+comp1
| - index.tsx
| - styles.tsx
|+comp2
| - index.tsx
| - styles.tsx
|...
|
import Comp1 from "../components/comp1/"
import Comp2 from "../components/comp2/"
import Comp3 from "../components/comp3/"
import Comp4 from "../components/comp4/"
2nd Approach
Instead of renaming components files into index.tsx in each folder i kept them as they were first :comp1.component.tsx and the style comp1.styles.tsx.But inside each component folder, I've created a file named package.json with the following configuration.
{
"main":"./comp1.component.tsx"
}
And it works just fine, and in terms of import here is the result
components
|+comp1
| - comp1.component.tsx
| - comp1.styles.tsx
| - package.json
|+comp2
| - comp2.component.tsx
| - comp2.styles.tsx
|...
|
import Comp1 from "../components/comp1/"
import Comp2 from "../components/comp2/"
import Comp3 from "../components/comp3/"
import Comp4 from "../components/comp4/"
All these approaches are working, but the main problem remains :
having too many components import statements
3rd Approach
To try to solve this, I've created a file called index.tsx in the root of the components folder and for each of my components I've used a named export like :
export const Comp1:React.FC<Comp1Pros>=(props)=>{...}
And in my index.tsx file here is what I've done:
components
|+comp1
| - comp1.component.tsx
| - comp1.styles.tsx
|+comp2
| - comp2.component.tsx
| - comp2.styles.tsx
|...
|-index.tsx
|
export * from "./components/comp1/"
export * from "./components/comp2/"
export * from "./components/comp3/"
export * from "./components/comp4/"
When I import them it's more readable and with less code :
import {Comp1,Comp2} from "../components"
I really it, but what I fear is the above syntax is a destructuring syntax, so even if I'm only making use of Comp1 and Comp2 I'm importing all the component every time, and I think that this may be a performance issue especially for production build because any component is importing all the other app components.
So that what I've tried to, but the last one is the best for me and fits my needs, but has performance issues.
Do you have any idea about how I can achieve the same goal without creating a performance issue?
Note! I'm not a native English person, so please understand that my writing isn't perfect.

How do I use use dialogs in an electron + react environment?

(clone the repo & try it)
I'm working on a desktop app using node, create-react-app, and electron. The following line, recommended here
const { dialog } = require('electron').remote
when added to my store react component (and thus not in the electron main process), causes the following error:
TypeError: fs.existsSync is not a function
getElectronPath
F:/freelance/repos/creative-ontology-editor/node_modules/electron/index.js:8
5 | var pathFile = path.join(__dirname, 'path.txt');
6 |
7 | function getElectronPath() {
> 8 | if (fs.existsSync(pathFile)) {
9 | var executablePath = fs.readFileSync(pathFile, 'utf-8');
10 |
11 | if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
I believe this is because React or create-react-app specifically blocks/nullifies certain node.js modules like fs, but I could be wrong. Note that this error happens inside the electron module when I include the above line, not in my own code.
My goal is to have my desktop app able to save and load files to the user's machine, the way something like Word or Excel does.
I've called const fs = window.require('fs'); in my react component, which I think I'm not supposed to do, but also, since this is in the actual electron module's index.js, I made sure that it also calls it, which it does: var fs = require('fs'). There was no change in behavior when I switched my call in the react component to const fs = window.require('fs').
I've also made sure to set webPreferences.nodeIntegration to true in my electron main process, to no avail.

"Syntax error: Unexpected keyword" in random places in react-scripts

I've recently updated my Javascript project from Webpack to react-scripts.
My code structure is fairly simple. I have a src folder with an index.js that just renders the DOM like this:
import ReactDOM from 'react-dom';
import Index from './pages/index';
ReactDOM.render(<Index />, document.querySelector('#root'));
and my Index which is just a single page that renders some stuff like this:
/**
* Injected styles for this component
*/
const styles = theme => ({
...
})
class Index extends Component {
...
}
export default withRoot(withStyles(styles)(Index));
in my package.json I use react-scripts to start the app.
When running npm run start the dev-webserver starts.
I can change a single letter, save the file, the dev-webserver restarts, and then I get random syntax errors throughout the code. They look like this:
./src/pages/index.js
Syntax error: Unexpected keyword 'return' (144:7)
142 |
143 | if(!this.state.data){
> 144 | return null;
| ^
145 | }
146 |
147 | return <Grid>
or this
./src/pages/index.js
Syntax error: Unexpected token (76:11)
74 | */
75 | render() {
> 76 | const { classes } = this.props;
| ^
77 |
78 | return (
79 | <div className={classes.root}>
or on any other part of the project. They keep happening until I restart npm.
I've tried to delete code until it doesn't happen anymore. Then I end up with a single React.Component that only renders a div with text.
I've tried to work on another project; the same issue happens there.
The project works fine on other devices.
Things I've tried:
delete node_modules folder
downgrade dependencies
delete project and clone again
use different browser
restart pc
change back to webpack
try to search online for the error
My node version is:
v6.9.1
My npm version is:
v6.8.0

Turns out my node version is very old (2016).
I updated node to the newest version and it stopped happening.

Import static .js in Vue-cli + webpack

I've been using vue-cli since some time now, and still have not fully understood how file loading is done. I've read documentation and some blogs and helped me to deal with it since now.
I'd like to import static .js files with some constants in a component. I don't want them to be bundled at deployment, so they can be found and changed easily, directly in the server if needed without having to rebuild the whole project.
I tried to place them in /public/constants/foo.js directory and point to them using absolute paths in different ways
import FOO from '/constants/foo.js'; // Not working
const FOO = require('/constants/foo.js'); // Not working
How can I achieve this?

If I understand well your project arch is like
/root
|__/public
| |__/img
| |__/css
| |__/constants
| |__/foo.js
| |__/bar.js
|__/webpack.config.js
In your webpack.config.js create a new entry like
module.exports = {
entry: './public/index.js'
};
Then create a index.js file inside your public directory and import your foo.js
import foo from './constants/foo';
Of course your foo.js should export something like
export default function foo() {
//
}
Hoping that will help you.