I am working on a react components library to use in a NextJS project. For some of the components I want to use the Image
or Link
component from NextJS. This causes the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
I am bundling my components with Rollup.
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import packageJson from './package.json';
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({
tscConfig: './tsconfig.json',
exclude: ['**/*.stories.tsx', '**/*.test.tsx'],
declarationDir: 'dist',
declaration: true,
}),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
],
};
Thanks in advance!