useView doesn't work in next js

[hetanthakkar]

[hetanthakkar]

@tajo useView doesn't work in next JS due to which the whole library become inaccessible! Please resolve it asap

[hetanthakkar]

This is the code to reporduce the error in Next Js:

import * as React from "react";

import { useView, Compiler, Knobs, Editor, Error, ActionButtons, Placeholder, PropTypes, } from "react-view";

import { Button, SIZE } from "./button";

function App() { const params = useView({ componentName: "Button", props: { children: { value: "Hello", type: PropTypes.ReactNode, description: "Visible label.", }, size: { value: "SIZE.default", defaultValue: "SIZE.default", options: SIZE, type: PropTypes.Enum, description: "Defines the size of the button.", imports: { "your-button-component": { named: ["SIZE"], }, }, }, onClick: { value: '() => alert("click")', type: PropTypes.Function, description: "Function called when button is clicked.", }, disabled: { value: false, type: PropTypes.Boolean, description: "Indicates that the button is disabled", }, }, scope: { Button, SIZE, }, imports: { "your-button-component": { named: ["Button"], }, }, });

const decoratorsPreset = () => ({ plugins: [[require("@babel/plugin-proposal-decorators"), { legacy: true }]], });

return ( <div style={{ maxWidth: "600px", margin: "0px auto" }}> <Compiler {...params.compilerProps} presets={[decoratorsPreset]} minHeight={62} placeholder={Placeholder} />

  <Knobs {...params.knobProps} />
  <Editor {...params.editorProps} />
  <Error {...params.errorProps} />
  <ActionButtons {...params.actions} />
</div>

); } export default App;

[tajo]

We use Next v10 + react-view for https://baseweb.design. Your issue might be something else. You should create a repro.

[hetanthakkar]

@tajo You are correct it was mistake on my side! Thank you

[raunofreiberg]

@hetanthakkar1 How did you solve this? I'm still getting it. I've configured next.config.js but no luck:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
};

@tajo Here's a reproducible Next.js 11 app → https://github.com/raunofreiberg/react-view-next-11

To be clear, this is the error I'm seeing:

[hetanthakkar]

@raunofreiberg You really think that our errors are same!? my error message indicated that the problem was due to useView on line 17 i don't see your error indicating that it's because of useView

[raunofreiberg]

It seems like the error resolves when I use yarn to install the modules instead of npm. Odd. Digging more.

[raunofreiberg]

If I delete React & ReactDOM (16.14.0) from node_modules/react-view then the error resolves. OTOH, Yarn doesn't install mismatched version of React under the project. 🤔

[tajo]

@raunofreiberg The invalid hook call is most likely because of multiple version of react?

[raunofreiberg]

@tajo Yes. I think it comes from one the deps of react-view which for some reason defines react as a dependency, so it gets installed with the package.