I'm developing a little website with the framework gatsby but I'm having an hard time with dynamic import and the hot reload provided by webpack.
Here is my react component :
import React from 'react'
import styles from './_frame.module.scss'
class Frame extends React.Component {
constructor(props) {
super(props);
this.frame = React.createRef();
}
render() {
return (
<div className={styles.frame}
ref={this.frame}>
<div className="inner wrap--redux">
<canvas className={styles.canvas}
id="canvas"
width="800"
height="600">
</canvas>
</div>
</div>
);
}
componentDidMount() {
import(`../../experiments/${this.props.slug}`)
.then(res => {
new res.default(this.frame.current);
});
}
};
export default Frame
I would like when I make a modification to the JavaScript imported that the hot reload triggers and refreshes my component. Currently I have to refresh my browser manually to observe the changes made.
You can see the whole repository here: https://github.com/maximeparisse/webgl-journey
And the file from which the code is extracted: https://github.com/maximeparisse/webgl-journey/blob/master/src/components/experiments/frame.js
If you want to reproduce just - git clone the repository - npm i - gatsby develop
Thanks for your help.
After trying many things, including wsl, npm clenaup etc, I realized that my antivirus sophos was blocking the webpack hot reload socket __webpack_hmr
.
All I had to do is to disable the antivirus for a while. ( You are free to uninstall it or maybe change to another one ).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.