从下一个应用中共享的动态导入中获取编译错误

Question

我正在使用yarn工作空间来设置多应用程序SPA，因为我有一个文件夹，它将共享页眉、页脚等常见组件。如果我试图使用共享目录中的组件，则会出现编译错误。

Failed to compile.

../core/components/hoc/Layout.js 11:4
Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default function Layout(props) {
|   return (
>     <div style={layoutStyle}>
|       <Header />
|       {props.children}

> Build error occurred
Error: > Build failed because of webpack errors

package.json文件中的依赖项

  "dependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "concurrently": "^5.1.0",
    "cross-env": "^7.0.0",
    "express": "^4.17.1",
    "next-transpile-modules": "^3.0.2",
    "request": "^2.88.0",
    "webpack": "^4.41.5"
  }

Answer 1

我弄明白了，这是一个转译的问题，因为next希望组件是转译格式的。