NextJS & Rollup & yalc - Element type is invalid: expected a string (for built-in components) but got: undefined

I keep getting the following invalid error while trying to create a component library for React.

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`.

I'm using rollup to bundle my library, and yalc to link the local dependency into a nextjs project in another directory. Everything seems to work and imports fine, except a React Context. Both projects are using react and react-dom 17.0.2.

I've broken the components as simple as possible.

index.tsx (from component library)

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 };

Then in the _app.tsx for the nextjs project I have the following

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;

The above produces that error when I navigate to a page, but the below doesn't

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;

I'm not really sure why that is because they're both being created and exported the same way, and they're both wrapping and passing the children down.

Here is my rollup.config.js for reference:

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(),
    ],
};

One of your components may have failed to render somewhere in your app's component tree, even if you have return <></>. This could happen if your component has an import statement that isn't resolved, or perhaps an error has occurred and your component never made it to the return code.

If you are lucky, the error message from NextJS will tell you to check the render method of some component.

If not, try commenting out components at the top level and work your way down to see which one is the culprit.

UPDATE: Seems like there is a compiling bug in NextJS (currently on v12.0.8). I might get that error message importing a component, but add a console.log() line to the error component and save, triggering a fast refresh on the same page, everything works again.