I am creating a Vue component library with Rollup, but when I use slots it gives me the following error:

Uncaught (in promise) TypeError: currentRenderingInstance is null

I made a very simple component in my library:

<script setup></script>

<template>
  <button>
    <slot></slot>
  </button>
</template>

<style scoped></style>

Then I simply use it like this:

<ExampleComponent>
  Text
</ExampleComponent>

If I remove the slot and replace it with a prop or hard-coded text, everything works fine.

This is my rollup.config.js:

import { defineConfig } from 'rollup';
import path from 'path';

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import vue from 'rollup-plugin-vue';

// the base configuration
const baseConfig = {
  input: 'src/entry.js',
};

// plugins
const plugins = [
  vue(),
  resolve({
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
  }),
  // process only `<style module>` blocks.
  postcss({
    modules: {
      generateScopedName: '[local]___[hash:base64:5]',
    },
    include: /&module=.*\.css$/,
  }),
  // process all `<style>` blocks except `<style module>`.
  postcss({ include: /(?<!&module=.*)\.css$/ }),
  commonjs(),
];

const external = ['vue'];
const globals = {
  vue: 'Vue',
};

export default [
  // esm
  defineConfig({
    ...baseConfig,
    input: 'src/entry.esm.js',
    external,
    output: {
      file: 'dist/vue-my-lib.esm.js',
      format: 'esm',
      exports: 'named',
    },
    plugins,
  }),

  // cjs
  defineConfig({
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/vue-my-lib.ssr.js',
      format: 'cjs',
      name: 'VueMyLib',
      exports: 'auto',
      globals,
    },
    plugins,
  }),

  // iife
  defineConfig({
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/vue-my-lib.min.js',
      format: 'iife',
      name: 'VueMyLib',
      exports: 'auto',
      globals,
    },
    plugins,
  }),
];

Any idea about the problem?

CodePudding user response：

After a whole day of search, I found the solution (here and here). It's a problem with using a library locally (e.g., through npm link) where it seems there are two instances of Vue at the same time (on of the project and one of the library). So, the solution is to tell the project to use specifically its own vue through webpack.

In my case, I use Jetstream Inertia, so I edited webpack.mix.js:

const path = require('path');

// ...

mix.webpackConfig({
    resolve: {
        symlinks: false,
        alias: {
            vue: path.resolve("./node_modules/vue"),
        },
    },
});

Or if you used vue-cli to create your project, edit the vue.config.js:

const { defineConfig } = require('@vue/cli-service');
const path = require(path);

module.exports = defineConfig({
  // ...
  chainWebpack(config) {
    config.resolve.symlinks(false);
    config.resolve.alias.set("vue", path.resolve("./node_modules/vue"));
  }
}