TypeError: preserveDirectives is not a function

[ZhengRui]

I am facing this issue right now, not sure how to fix it. Here is my rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import preserveDirectives from 'rollup-plugin-preserve-directives';
import path from 'path';

import postcss from 'rollup-plugin-postcss';

const packageJson = require('./package.json');

const isProduction = process.env.NODE_ENV === 'production';

const deps = Object.keys(packageJson.dependencies || {});

const projectRootDir = path.resolve(__dirname);

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: !isProduction,
        preserveModules: true,
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: !isProduction,
        preserveModules: true,
      },
    ],
    watch: {
      clearScreen: false,
      include: 'src/**',
      exclude: [
        'node_modules/**',
        'dist/**',
        'examples/**',
        'src/**/*.stories.tsx',
      ],
    },
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.json',
        compilerOptions: {
          sourceMap: !isProduction,
          inlineSources: !isProduction,
          ...(!isProduction && { target: 'esnext' }),
        },
        exclude: ['stories/**/*.@(ts|tsx)'],
      }),
      isProduction &&
        terser({
          format: {
            comments: /^\s*([@#]__[A-Z]+__\s*$|@cc_on)/,
          },
          compress: {
            directives: false,
          },
        }),
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: isProduction,
        extract: false,
        inject: true,
      }),
      preserveDirectives(),
    ],
    external: (id) => {
      const [pkg] = id.split('/');
      return deps.includes(pkg);
    },
  },
];

[Ephem]

Hi @ZhengRui, thanks for reporting this!

What versions of rollup-plugin-preserve-directives and rollup are you on, and if possible, could you try the latest versions? (Or latest 2.X version for Rollup if you're still on v2)

[ZhengRui]

Hi @Ephem ，I am using rollup 3.9.0 and rollup-plugin-preserve-directives 0.2.0.

[mfrlic]

const preserveDirectives = require("rollup-plugin-preserve-directives").default; solves it for now

[Sashkan]

You can use

import { default as preserveDirectives } from "rollup-plugin-preserve-directives";

// ...

preserveDirectives(),

[sshmaxime]

Hello, this is still an issue, could you look into it when you have some time please ? @Ephem

Otherwise, thanks a lot of this plugin, it's doing wonders <3

"vite": "^5.1.0",
"rollup-plugin-preserve-directives": "^0.4.0",

[ian-os]

import { preserveDirectives } from "rollup-plugin-preserve-directives" works fine, no need for import { default as preserveDirectives }

[Ephem]

I was just going through some old issues and came across this. Is this still an issue @sshmaxime, or did the above solve it for you?