Getting invalid hook call error with plain React

Developer Support
1

If I run npx create-react-app myapp and then plasmic sync --p <MyProjectId> and then modify the App.js to:

import Homepage from './components/Homepage';
function App() {
  return (
    <div className="App">
      <Homepage/>
    </div>
  );
}
export default App;

and then I ran yarn start it will give these Error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See <https://reactjs.org/link/invalid-hook-call> for tips about how to debug and fix this problem.
    at resolveDispatcher (<anonymous>:28553:13)
    at useContext (<anonymous>:28561:20)
    at Module.useDataEnv (<anonymous>:346:66)
    at PlasmicHomepage__RenderFunc (<anonymous>:82871:126)
    at func (<anonymous>:82928:16)
    at renderWithHooks (<anonymous>:66944:18)
    at mountIndeterminateComponent (<anonymous>:69770:13)
    at beginWork (<anonymous>:71008:16)
    at HTMLUnknownElement.callCallback (<anonymous>:55904:14)
    at Object.invokeGuardedCallbackDev (<anonymous>:55953:16)

react-dom.development.js:20085 The above error occurred in the <PlasmicHomepage> component:

    at func (<anonymous>:82922:125)
    at Homepage_ (<anonymous>:82443:111)
    at div
    at App (<anonymous>:82298:14)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://reactjs.org/link/error-boundaries> to learn more about error boundaries.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See <https://reactjs.org/link/invalid-hook-call> for tips about how to debug and fix this problem.
    at resolveDispatcher (<anonymous>:28553:13)
    at useContext (<anonymous>:28561:20)
    at Module.useDataEnv (<anonymous>:346:66)
    at PlasmicHomepage__RenderFunc (<anonymous>:82871:126)
    at func (<anonymous>:82928:16)
    at renderWithHooks (<anonymous>:66944:18)
    at mountIndeterminateComponent (<anonymous>:69770:13)
    at beginWork (<anonymous>:71008:16)
    at HTMLUnknownElement.callCallback (<anonymous>:55904:14)
    at Object.invokeGuardedCallbackDev (<anonymous>:55953:16)

Next.js works fine, just regular react gives these errors, please let me know if there’s a fix
PS: I’ve tried this on all plasmic projects, old or new, they give the same error

2

Hey @verbal_sparrow! Sorry about that. I couldn’t reproduce your bug. I will send a DM to request more info.

3

I ran these exact commands with a newly created project and things worked here:

$ npx create-react-app myapp
$ cd myapp
$ npm install @plasmicapp/cli
$ npx plasmic sync -p <id> --yes
$ rm src/App.js
$ cat > src/App.js <<EOF
import Homepage from './components/Homepage';
function App() {
  return (
    <div className="App">
      <Homepage/>
    </div>
  );
}
export default App;
EOF
$ npm run start

@verbal_sparrow, can you share your package.json so we can take a look in the versions you’re using? Here I get:

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@plasmicapp/cli": "^0.1.182",
    "@plasmicapp/host": "^1.0.57",
    "@plasmicapp/react-web": "^0.2.100",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

node and npm versions:

$ node -v
v14.19.3
$ npm -v
8.5.5
4 
{
	"name": "figma-plugin-react-template",
	"version": "1.0.0",
	"description": "This plugin template uses Typescript. If you are familiar with Javascript, Typescript will look very familiar. In fact, valid Javascript code is already valid Typescript code.",
	"license": "ISC",
	"scripts": {
		"build": "webpack --mode=production",
		"build:watch": "webpack --mode=development --watch",
		"prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' "
	},
	"dependencies": {
		"@plasmicapp/react-web": "^0.2.97",
		"react": "^17.0.2",
		"react-dom": "^17.0.2"
	},
	"devDependencies": {
		"@figma/plugin-typings": "^1.47.0",
		"@types/react": "^17.0.11",
		"@types/react-dom": "^17.0.7",
		"css-loader": "^5.0.1",
		"html-webpack-inline-source-plugin": "^0.0.10",
		"html-webpack-plugin": "^3.2.0",
		"husky": "^4.3.0",
		"lint-staged": "^10.5.1",
		"prettier": "^2.3.1",
		"style-loader": "^2.0.0",
		"ts-loader": "^8.0.11",
		"typescript": "^4.1.2",
		"url-loader": "^4.1.1",
		"webpack": "^4.41.4",
		"webpack-cli": "^3.3.6"
	},
	"husky": {
		"hooks": {
			"pre-commit": "lint-staged"
		}
	},
	"lint-staged": {
		"src/**/*.{js,jsx,ts,tsx,css,json}": [
			"prettier --write",
			"git add"
		]
	}
}
5

Got it, my case I never have “plasmic/host” in package.json (it won’t be added through the CLI), once I added this line "plasmic/host":"*" it starts working again :slightly_smiling_face: YAY

6

Thank you so much guys @samuel @tiago

7

Oh, great! CLI >= 0.1.181 is asking you to install @plasmicapp/host, but I think we’re not requiring that version in the server. We will improve it! Thank you for reporting!