easy-team / egg-react-webpack-boilerplate

Egg React Server Side Render(SSR) / Client Sider Render(CSR)
https://easyjs.cn/egg-react
MIT License
671 stars 93 forks source link

Egg + React 多页面服务端渲染方案引入react loadable报错 #44

Closed HadeAs closed 4 years ago

HadeAs commented 4 years ago

20191115155256

项目地址

复现步骤:

问题代码在app/web/page/home/home.jsx

请问是我哪里写错了,还是有bug

HadeAs commented 4 years ago

貌似require引入的图片资源也加载不了

HadeAs commented 4 years ago

@hubcarl 麻烦看一下

hubcarl commented 4 years ago

@HadeAs 好,今天看一下

hubcarl commented 4 years ago

@HadeAs 初步定位了一下,这个与 webpack entry路径有关系,entry没有路径就可以;目前Demo生成的entry是home/home.js,改成 home.js 就可以,具体看一下master.根本解决办法需要再看看

HadeAs commented 4 years ago

这种方法我也试了,但是这种配置方式如果在entry里加上loader,启动就会报错 20191119132751

20191119133207

@hubcarl 麻烦再看一下

hubcarl commented 4 years ago

临时解决办法:可以不用 loader 方式,loader 改成 app.js 方式, 入口文件改成 js, 类似下面这种,自己实现入口

https://github.com/easy-team/egg-react-webpack-boilerplate/blob/master/app/web/framework/app.js

hubcarl commented 4 years ago

@HadeAs 或者通过customize方法把webapck entry的key统一处理一下,比如把/换成_

//${root}/webpack.config.js
module.exports = {
  ...
  customize(webpackConfig){ // 此外 webpackConfig 为原生生成的 webpack config
   return webpackConfig;
  }
}

找不到模块问题的方案还在验证测试

HadeAs commented 4 years ago

@HadeAs 或者通过customize方法把webapck entry的key统一处理一下,比如把/换成_

//${root}/webpack.config.js
module.exports = {
  ...
  customize(webpackConfig){ // 此外 webpackConfig 为原生生成的 webpack config
   return webpackConfig;
  }
}

找不到模块问题的方案还在验证测试

好的 感谢解答

hubcarl commented 4 years ago

@HadeAs 发布了 @easy-team/easywebpack-react@4.1.1 可以验证一下, master 增加例子

HadeAs commented 4 years ago

@HadeAs 发布了 @easy-team/easywebpack-react@4.1.1 可以验证一下, master 增加例子

好的 我试一下

lpg-kobe commented 4 years ago

@HadeAs 麻煩幫忙看看rax分支的page/async.jsx也是由於引用了loadable之後該頁面同樣出現報錯的情況,頁面再次刷新本地進程會被強退