使用 webpack/react/gatsby 进行动态导入和热重载

Question

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.

Answer 1

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 ).