NextJS & Rollup & yalc -元素类型无效:需要一个字符串(用于内置组件)，但got:未定义

Question

当我试图创建一个组件库以供响应时，我一直得到以下无效错误。

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.

Check the render method of `MyApp`.

我使用rollup绑定我的库，使用yalc将本地依赖项链接到另一个目录中的nextjs项目中。一切似乎都正常，导入也很好，除了反应上下文。这两个项目都使用react和react-dom 17.0.2。

我已经尽可能简单地分解了组件。

index.tsx (来自组件库)

const TestContext = React.createContext<TextContextValues>({} as TextContextValues);
const ProviderWrapper = ({ children }) => {
    const value = {};
    return <TestContext.Provider value={value}>{children}</TestContext.Provider>;
};

const Wrapper = ({ children }) => {
    return <div>{children}</div>;
};

// =============================================================================
// EXPORT
// =============================================================================
export { ProviderWrapper, Wrapper };

然后，在nextjs项目的_app.tsx中，我有以下内容

import { ProviderWrapper, Wrapper } from '@package-name-from-yalc';
import type { AppProps } from 'next/app';
import React from 'react';

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <ProviderWrapper>
            <Component {...pageProps} />
        </ProviderWrapper>
    );
}

export default MyApp;

当我导航到一个页面时，上面的内容会产生这个错误，但是下面的内容不会

import { ProviderWrapper, Wrapper } from '@package-name-from-yalc';
import type { AppProps } from 'next/app';
import React from 'react';

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Wrapper>
            <Component {...pageProps} />
        </Wrapper>
    );
}

export default MyApp;

我不太清楚为什么会这样，因为它们都是以相同的方式创建和导出的，而且它们都在包装和传递子程序。

这是我的rollup.config.js供参考：

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
const tailwindcss = require('tailwindcss');

export default {
    input: 'src/index.tsx',
    output: [
        {
            file: pkg.main,
            format: 'cjs',
            sourcemap: true,
        },
        {
            file: pkg.module,
            format: 'es',
            sourcemap: true,
        },
    ],
    external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {}), 'react'],
    plugins: [
        peerDepsExternal(),
        postcss({
            plugins: [
                tailwindcss('./tailwind.config.js'),
                require('autoprefixer'),
                require('cssnano')({ preset: 'default' }),
            ],
        }),
        resolve(),
        typescript({
            useTsconfigDeclarationDir: true,
            rollupCommonJSResolveHack: true,
            exclude: ['**/__tests__/**', '**/*.stories.tsx'],
            clean: true,
        }),
        commonjs({
            include: ['node_modules/**'],
        }),
        terser(),
    ],
};

Answer 1

您的一个组件可能无法在应用程序的组件树中呈现，即使您有return <></>。如果组件有一个未被解析的导入语句，或者可能发生了错误，而您的组件从未返回代码，则可能会发生这种情况。

如果幸运的话，来自NextJS的错误消息将告诉您检查某些组件的呈现方法。

如果没有，试着在顶层注释掉组件，然后向下看哪一个是罪魁祸首。

更新:似乎在NextJS中有一个编译错误(目前在12.0.8版本上)。我可能会收到导入组件的错误消息，但是向error组件中添加一个console.log()行并保存，触发同一页面上的快速刷新，一切都会再次正常工作。

Answer 2

更改这一行

import type { AppProps } from 'next/app';

至

import { AppProps } from 'next/app';