Unable to use hooks in compiled package

[pm0u]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
I have a package that is build using vite and the preact plugin. I created this via the vite CLI helper: npm create vite@latest --template preact-ts. I ripped out all the HTML related things since all I cared about was compiling the context and consumer, so this just spits out a JS file.

I have a simple provider and context consumer:

// provider and hook
import { useContext, createContext } from "react";

interface Context {
  test: string;
}
interface ContextProps {
  children: JSX.Element;
}

// @ts-expect-error
const Context = createContext<MapContext>({});

export const MyProvider = ({ children }: ContextProps) => {
  return (
    // @ts-expect-error errors bc react types mismatch preact
    <Context.Provider value={{ test: "test" }}>{children}</Context.Provider>
  );
};

export const useMyContext = () => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error("useMyContext must be used in child of MyProvider!");
  }
  return context;
};

// consumer
import { useMyContext } from "./my-context";

export const MyConsumer = () => {
  const { test } = useMyContext();
  console.log({ test });
  return <div></div>;
};

I attempted to exclude all preact/react possible deps from bundling so as to prevent duplicates.
I wasn't sure if react or preact would be the ticket here with Vite's aliasing so I just threw in both on top of pulling peer deps from the package.json. Note this is vite.config.mts otherwise some dep of preact/preset-vite threw esmodule errors. I tried with both type: module and without in package.json, I removed it as I thought this could cause some bundling issue. Neither type module with a TS config or no type module with an mts config seems to work.

import { defineConfig } from "vite";
import { resolve } from "path";
import pkg from "./package.json";
import preact from "@preact/preset-vite";

const peerDependencies = Object.keys(pkg.peerDependencies);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()],
  build: {
    sourcemap: "inline",
    minify: false,
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: pkg.name,
      formats: ["es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: [
        ...peerDependencies,
        "preact/compat",
        "preact/hooks",
        "react",
        "react-dom",
      ],
    },
  },
});

Both components are exported from the entry index

export * from './my-context'
export * from './my-consumer'

// package.json
{
  "name": "my-package",
  "version": "0.0.1",
  "private": true,
  "main": "dist/index.es.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": true,
  "scripts": {
    "clean": "rm -rf ./dist",
    "build": "npm run clean && vite build  && tsc --declaration --emitDeclarationOnly --project tsconfig.production.json"
  },
  "peerDependencies": {
    "preact": "^10.13.1"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.8.0",
    "eslint": "^8.57.0",
    "eslint-config-preact": "^1.3.0",
    "typescript": "^5.4.3"
  },
  "eslintConfig": {
    "extends": "preact"
  }
}

I then attempt to consume these in another project (currently via npm-link)
This was also created using npm create vite preact-ts.
Using the basic scaffolding with index.html

// src/index.tsx
import { render } from "preact";
import { MyProvider, MyConsumer } from "my-package";

export function App() {
  return (
    <MyProvider>
      <MyConsumer />
    </MyProvider>
  );
}

render(<App />, document.getElementById("app"));

vite.config.mts I've included sourcemaps and disabled minification top to bottom to try to aid in debugging.

import { defineConfig } from "vite";
import preact from "@preact/preset-vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()],
  build: {
    minify: false,
    sourcemap: "inline",
  },
});

This works in a dev build. However when I vite build && vite preview I get the following error:

Expected behavior
This works in production as it does in development

Related issues that did not seem to resolve or didn't quite seem to apply to the best of my knowledge:

#1918
#1757

[rschristian]

Your main entry is invalid, FWIW, as you're providing ESM w/ .js and don't have "type": "module" set. That being said, have a repo we can clone by any chance? It's easier than trying to piece together your files via copy/paste.

Have you opened up your bundles and actually looked at what's being built? Keeping Preact external as you have should make the built output pretty simple, it should be easy to debug.

Microbundle might be an option worth considering in place of Vite, it's from the Preact team and should be well suited to libs like this. Just a thought though.

[pm0u]

hmm - tried this:

rollupOptions: {
      external: [/^preact(\/.*)?/, /^react(\/.*)?/],
    },

Now I get:

import { createContext, useContext } from "react";
import { jsx } from "preact/jsx-runtime";
const Context = createContext({});
const MyProvider = ({
  children
}) => {
  return (
    // @ts-expect-error
    jsx(Context.Provider, {
      value: {
        test: "test"
      },
      children
    })
  );
};
const useMyContext = () => {
  const context = useContext(Context);
  if (context === void 0) {
    throw new Error("useMyContext must be used in child of MyProvider!");
  }
  return context;
};
const MyConsumer = () => {
  const {
    test
  } = useMyContext();
  console.log({
    test
  });
  return jsx("div", {});
};
export {
  MyConsumer,
  MyProvider,
  useMyContext
};

And seem to get a variation of the same error.

[pm0u]

Also tried

    rollupOptions: {
      external: [/^preact.*?/],
    },

which led to:

import { createContext, useContext } from "preact/compat";
import { jsx } from "preact/jsx-runtime";
const Context = createContext({});
const MyProvider = ({
  children
}) => {
  return (
    // @ts-expect-error
    jsx(Context.Provider, {
      value: {
        test: "test"
      },
      children
    })
  );
};
const useMyContext = () => {
  const context = useContext(Context);
  if (context === void 0) {
    throw new Error("useMyContext must be used in child of MyProvider!");
  }
  return context;
};
const MyConsumer = () => {
  const {
    test
  } = useMyContext();
  console.log({
    test
  });
  return jsx("div", {});
};
export {
  MyConsumer,
  MyProvider,
  useMyContext
};

And again, the same error. Thought maybe just import "preact/compat" in my top level component could help but no dice. The consumer of the package has the basic plugins: [preact()] in vite config as well as the compiled package's vite config.

[pm0u]

More or less the setup stackblitzed: https://stackblitz.com/edit/vitejs-vite-ys2h9m?file=dist%2Findex.es.js

I can work on expanding it to also consume the package but not super good at the stackblitz-fu

[rschristian]

Looks like it works just fine for me, your built output is fine.

The only obvious thing I'd say is ditch npm link as it's... not great. All of the local linking utilities are quite awful and unreliable, to be frank. Use something like yalc to test packages locally instead, as this fixes a handful of problems you'll only encounter with local symlinks. The problem is likely that your lib is pulling its copy of Preact through the symlink, rather than using the copy in your app.

[pm0u]

Confirmed that yalc fixed the issue (or at least let it run without the useContext error) 🎉

Thanks for all the help