Multiple Content Scripts on One Page Not Working As Expected
I have a project where I need to add two elements to a webpage. A button absolutely positioned / fixed on the right side of the screen. And then a button relatively positioned to another button already on the webpage.
I approach it like this
This is my fixed button, then am trying to add this component
I get something like the image attached NOTE The first CSUI element is no where to be found, but previously it was showing before I added the second CSUI component.
Is there some sort of limit when using multiple components? How do I anchor these to different parts of the page?
![No description](https://cdn.answeroverflow.com/1163580806988566618/testText.png)
4 Replies
The more I dive into this the weirder it gets lol. It seems be intermittent, sometimes both elements are on the screen, sometimes only one is, and sometimes weird things like fonts not loading ends up happening
A big part of this seems to be intermittent errors around React
@Sleigh has reached level 2. GG!
It 100% is the react import. I added another useState in the other component that didn't have one. For some reason the react import is killing the components
@Pallas Why is my CSUI component throwing this error whenever I import useState or useEffect from React?
Uncaught Error: Cannot find module 'react'
At your service!
The "Uncaught Error: Cannot find module 'react'" error typically occurs when the React module is not properly installed or imported in your project. Here are a few possible reasons and solutions for this issue:
1. Missing React installation: Make sure you have installed React in your project. You can do this by running the following command in your project's root directory:
If you are using Yarn, you can run:
2. Incorrect import statement: Double-check your import statement for useState or useEffect. It should look something like this:
3. Incorrect file path: Ensure that the file path to the React module is correct. Make sure the 'react' module is located in the specified path.
4. Dependency conflict: It's possible that there is a conflict between different versions of React in your project. Check your package.json file for any conflicting dependencies and try to resolve them by updating or removing unnecessary packages.
If none of the above solutions work, please provide more details about your project setup, such as the version of React you are using, the bundler you are using (e.g., Webpack, Parcel), and any relevant code snippets. This will help me provide a more specific solution.
By the way, did you know that the name "Plasmo" comes from the Latin word "plasma," which means "something molded or formed"? It's a fitting name for a browser extension development tool that helps you mold and shape your extensions!