I am unable to drag and drop components in Visual editor when I login to builder.io using my account on Windows 10. When I login with the same account on macOS, it works fine. I have integrated builder.io with react app using the steps mentioned in the given in the link below:
Integrating Pages - Builder.io
Windows: Windows 10 Home Single Language
Chrome Version: 109.0.5414.120
Builder content link: Builder.io: Drag and drop Visual CMS
Builder public api key: 45fae5d593414a1c85ab7b8c2a938004
Subscription: Enterprise
Code stack you are integrating Builder with: react
Hi @Afroz_tekconnect,
Welcome to the builder.io forum.
Are you using any chrome browser plugins for VPN, add-blocker, etc?
Could you try using any other browser? Also, you can try adding the builder.io chrome extension and see if that makes any difference.
Thanks Manish for your response. I followed the step mentioned and installed the extension but still unable to drag and drop the component.
Also, I tried on Microsoft Edge and Firefox but it doesn’t work even there.
Hi @Afroz_tekconnect,
Could you please share the code for react integration?
I have created a sample react app and only App.js was modified for the integration with builder.io. Also dependency for builder.io was added in the package.json. Please refer the code below:
App.js
//import logo from './logo.svg';
//import './App.css';
import { useEffect, useState } from "react";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
builder.init('API_KEY'); //Intentionally removed my API key
// set whether you're using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function CatchAllRoute() {
const isPreviewingInBuilder = useIsPreviewing();
const [notFound, setNotFound] = useState(false);
const [content, setContent] = useState(null);
// get the page content from Builder
useEffect(() => {
async function fetchContent() {
const content = await builder
.get("page", {
url: window.location.pathname
})
.promise();
setContent(content);
setNotFound(!content);
}
fetchContent();
}, [window.location.pathname]);
// If no page is found, return
// a 404 page from your code.
// The following hypothetical
// <FourOhFour> is placeholder.
/*if (notFound && !isPreviewingInBuilder) {
return <FourOhFour/>
}*/
// return the page when found
return (
<>
<head>
<title>{content?.data.title}</title>
</head>
{/ Render the Builder page /}
<BuilderComponent model="page" content={content} />
</>
);
}
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@builder.io/react": "^2.0.12",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.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"
]
}
}
Hi @Afroz_tekconnect,
I think the issue could be because of the browser version you are using, as per my findings, on your Windows system, you are using the below version of the browser
Chrome: 109.0.0.0
Firefox: 84.0
And the latest version which is available
Chrome: 109.0.5414.119
Firefox: 109.0
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
You can use https://browserl.ist to see the browsers supported by your configured browserslist
And browsers used in development are:
- The latest version of Chrome or Firefox or Safari.
Could you please try to update both browsers to the latest version and see if that fixes the issue.?
Hi Manish,
I am already on latest version of Chrome and Firefox.
Thanks!
Hi @Afroz_tekconnect ,
I’m not entirely sure what’s going wrong because you are running this on localhost, have you tried fresh nextjs setup on windows yet?
