I got the msg "Error running plugin hook transform for preserve-directives, expected a function hook."

[deli-ght]

I got the error msg like this. Is there any solution for this?

[huozhi]

Can you share a reproduction that how are you testing with it right now?

[deli-ght]

@huozhi Thanks for reply.

I try to make a design system with react , vanilla-extract and rollup so I config the rollup.config.js like this.

import { vanillaExtractPlugin } from "@vanilla-extract/rollup-plugin";
import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import typescript from "@rollup/plugin-typescript";
import preserveDirectives from "rollup-preserve-directives";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "esm",
  },
  plugins: [
    vanillaExtractPlugin(),
    preserveDirectives(),
    nodeResolve({
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    }),
    babel({
      babelHelpers: "bundled",
      presets: ["@babel/preset-react"],
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    }),
    commonjs(),
    typescript({
      tsconfig: "tsconfig.json",
      declaration: true,
      declarationDir: "dist",
      outputToFilesystem: true,
    }),
  ],
  external: ["react", "react-dom"],
};

and run rollup -c the result was that

[huozhi]

Maybe it's transformed to sth different? Can you log it out what is the plugin we imported there.

Another way is to try named exports

import { preserveDirective } from "rollup-preserve-directives"

[deli-ght]

Maybe it's transformed to sth different? Can you log it out what is the plugin we imported there.

Another way is to try named exports

import { preserveDirective } from "rollup-preserve-directives"

Could you explain more detail for Can you log it out what is the plugin we imported there.? you mean this maybe..?

or this? (src/index.ts)

and sadly, it doesn't work neither...

import { preserveDirective } from "rollup-preserve-directives"

Also, even if I turn off the other plugins, it still throw out the same result

import { vanillaExtractPlugin } from "@vanilla-extract/rollup-plugin";
// import nodeResolve from "@rollup/plugin-node-resolve";
// import commonjs from "@rollup/plugin-commonjs";
// import babel from "@rollup/plugin-babel";
// import typescript from "@rollup/plugin-typescript";
import preserveDirectives from "rollup-preserve-directives";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "esm",
  },
  plugins: [
    // vanillaExtractPlugin(),
    preserveDirectives(),
    // nodeResolve({
    //   extensions: [".js", ".jsx", ".ts", ".tsx"],
    // }),
    // babel({
    //   babelHelpers: "bundled",
    //   presets: ["@babel/preset-react"],
    //   extensions: [".js", ".jsx", ".ts", ".tsx"],
    // }),
    // commonjs(),
    // typescript({
    //   tsconfig: "tsconfig.json",
    //   declaration: true,
    //   declarationDir: "dist",
    //   outputToFilesystem: true,
    // }),
  ],
  external: ["react", "react-dom"],
};

rollup throws throwInvalidHookError to the plugin

[SukkaW]

@huozhi I suspect that our plugin is not compatible with rollup 2.73.0 (which @deli-ght is using). We could test that.

[deli-ght]

@SukkaW I think you are right, I update rollup as "^4.13.0" and it works!! Thank you so much everyone! :)