[英]React loadable to be used with two repos/create-react-app
I am trying to use react-loadable with two repos / two different application made by create-react-app 我正在尝试将react-loadable与两个repos / create-react-app制作的两个不同的应用程序一起使用
I have used npm link to connect the two application and in the parent application I have used the child application using the below code 我已经使用npm链接来连接两个应用程序,并且在父应用程序中,我使用了以下代码使用了子应用程序
//parent application
import Loadable from 'react-loadable';
export default Loadable({
loader: () => import("child-app/src"),
loading() {
return <div>Loading...</div>
}
})
I have made child component exportable and the code is, 我已使子组件可导出,并且代码是,
//child application
import React from 'react';
function App() {
return (
<div>Child App</div>
);
}
export default App;
I keep getting below error 我不断出错
SyntaxError: /Users/ssinha/Documents/microfrontend2/first-app/src/App.js: Unexpected token (5:4)
3 | function App() {
4 | return (
> 5 | <div>Child App</div>
| ^
6 | );
7 | }
looks like its not getting transpiled, I have tried using some plugin such as "@loadable/babel-plugin" with no help .:-( 看起来好像没有被编译,我尝试使用一些插件,例如“ @ loadable / babel-plugin”,没有帮助。:-(
First of all I would suggest you to reduce complexity during debug, so try to not use react-loadable
until you fixed the issue. 首先,我建议您减少调试期间的复杂性,因此,在解决问题之前,请不要使用
react-loadable
。 I don't think react-loadable is the problem here. 我不认为react-loadable是这里的问题。
create-react-app
is not transpiling the code that it's inside your node_modules
folder (I think this is something you can't change, it's this way by design, at least it was so last time I used it). create-react-app
不会转储位于node_modules
文件夹中的代码(我认为这是您无法更改的,这是设计node_modules
,至少是上次使用它)。
So: if you want too keep working with a npm-linked module you must build the module before using it (the annoying part is that you should rebuild it at avery change on the child). 因此:如果您也想继续使用与npm链接的模块,则必须在使用它之前先构建该模块(令人讨厌的部分是,您应该在孩子每次更改时重新构建它)。
You should not import child-app/src
(because it's source, not transpiled) but simply "child-app". 您不应该导入
child-app/src
(因为它是源代码,而不是被编译),而只是“ child-app”。
Finally: migrating to a monorepo or using yarn workspaces would probably simplify you life. 最后:迁移到monorepo或使用纱线工作区可能会简化您的生活。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.