While working on creating a component library for React, I keep encountering the following 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.
Check the render method of `MyApp`.
My setup involves using rollup to bundle the library and yalc to link the local dependency into a nextjs project located in a different directory. Everything seems to import fine except for a React Context. Both projects are utilizing react and react-dom version 17.0.2.
I've simplified the components as much as possible.
index.tsx (from the component library)
const TestContext = React.createContext<TextContextValues>({} as TextContextValues);
const ProviderWrapper = ({ children }: Props) => {
const value = {};
return <TestContext.Provider value={value}>{children}</TestContext.Provider>;
};
const Wrapper = ({ children }: Props) => {
return <div>{children}</div>;
};
// EXPORT
export { ProviderWrapper, Wrapper };
In the _app.tsx file for the nextjs project, the code looks like this:
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 code snippet produces an error when navigating to a page, while the below code snippet does not:
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;
It's puzzling to me why this inconsistency exists since both components are created and exported in the same manner, and they both wrap and pass down the children.
Below 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(),
],
};