1

我已经开始使用 Next JS 和 Lingui.js 开发一个多语言 Web 应用程序 Lingui.js 正在使用 babel，所以我也必须安装它。

我已经关注了本教程https://blog.logrocket.com/complete-guide-internationalization-nextjs/ 在遇到一些问题后，我还关注了 Lingui.js 的官方文档https://lingui.js.org/教程/setup-react.html

我在使用 babel 和 typescript 时遇到了很多问题。但是现在我遇到了以下错误，我找不到任何帮助：

wait  - compiling / (client and server)...
error - ./node_modules/resolve-from/index.js:3:0
Module not found: Can't resolve 'module'

Import trace for requested module:
./node_modules/import-fresh/index.js
./node_modules/cosmiconfig/dist/loaders.js
./node_modules/cosmiconfig/dist/index.js
./node_modules/babel-plugin-macros/dist/index.js
./node_modules/@lingui/macro/index.js
./src/pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
false
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at Home (webpack-internal:///./src/pages/index.tsx:36:51)
    at I18nProvider (C:\Project\app\node_modules\@lingui\react\cjs\react.development.js:46:19)
    at MyApp (webpack-internal:///./src/pages/_app.tsx:48:24)
    at StyleRegistry (C:\Project\app\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (C:\Project\app\node_modules\next\dist\server\render.js:394:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Project\app\node_modules\next\dist\server\render.js:424:57)
    at div
    at Body (C:\Project\app\node_modules\next\dist\server\render.js:701:21)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, 
or you might have mixed up default and named imports.

这是我的 babel.config.js

module.exports = {
    presets: [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    plugins: [
        ["@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ],
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic"
            }
        ],
        [
            '@babel/plugin-transform-runtime',
            {
                absoluteRuntime: false,
                corejs: false,
                helpers: true,
                regenerator: true,
                version: '7.0.0-beta.0',
            },
            'react-native-reanimated/plugin',
        ],
    ]
}

和我的 webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'ts-loader']
            }
        ]
    }
};

React.jsx: type is invalid 的部分是因为 index.tsx 中的 getStaticProps。

所以这可能是一个单独的问题

4

2 回答 2

0

您是否已经尝试过这里提到的解决方案？

webpack.config.js

 node: {
 module: "empty",
 }
于 2022-02-01T19:06:00.563 回答
0

我最终删除了 Babel 和 lingui 中的所有内容，并从另一个正在运行的项目中复制了所有导入。

无法说出它们之间的区别，但后来它起作用了。

于 2022-03-02T14:07:59.657 回答