reactjsthree.jsrollupjsreact-three-fiber

How can I use R3F hooks in components to test using Rollup build?


I'm making an R3F component library and getting the error Error: R3F: Hooks can only be used within the Canvas component! when I import it into my project, even though the component is placed inside a Canvas component. Why?

I have the codes and rollup config setup inside package folder here GlslPipeline for React.

I was testing the local after I run npm run build in glsl-pipeline-react and enter the command npm link at the package folder. Then I installed it onto my project folder using npm link "glsl-pipeline". It produces that error when run. Can anyone help me, please?

P/s: I'm not very familiar with Rollup or Vite setup. It's new to me.


Solution

  • I got it now. My own package that using rollup config, cannot be tested by using npm link. It is complicated. I can do it using preconstruct workspaces inside examples folder and create a new template inside examples folder using npm create-vite@latest refers to this link Create Template Code. And I can run test using preconstruct dev && yarn workspaces <example-folder-name> dev.

    In examples folder, install any packages to test including your own current package name (Don't worry about haven't publish to npmjs yet. It can refers to the local package automatically), then try it out! It works!"