I want to use reactDOM for injecting content to page. So, I want to
import React from 'react';
...
import App from './src/js/App';
const root=createRoot(document.getElementById('title'));
root.render(
<App/>
);
included into my background.js but I get the following
error: SyntaxError: Cannot use import statement outside a module
Import that is causing the error:
import React from 'react'
I've done some research and tried adding type: "module" but that does not work.
What can I do to solve this?
Facing pretty similar issues atm, digging SO for a while.
Try to play around with
import React from './react.js'; // path and file extension here
or
import * as React from './react.js'; // another import option
Also, ensure you have manifest v3 in order type: "module" to work.
After many research,
I did npm run eject
here is the working react setup
https://github.com/rba1aji/chrome-extension-template-react
Related
I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");
In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs
Multiple people (like asked here) have asked the same question but I couldn't resolve my problem as almost all the solutions asked me to check for mistakes while importing but I am sure I went through all of them but couldn't find anyone that made sense to me. My code used to be much bigger but as someone mentioned in the solution to the post I have tagged previously, I created a new app using CRA and imported things one by one only to realize that this error started appearing as soon as I imported the routing method as mentioned in my code.
I am aware that this error is pointing to the broken symlinks in my system as mentioned in some other posts(also pointed to another symlink when I previously ran my code) but I am trying to find a way to resolve this without damaging my system by deleting symlinks.
After using CRA to make a new app I tried to run this code which worked fine until I imported Router.
edit: As soon as I removed routing from my initial project (which had multiple components ) it got fixed. I need to figure out a way to route this now.
My index.js CODE :
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import {BrowserRouter as Router} from'react-router-dom';
render(
<Router>
<App />
</Router>,
document.getElementById('root') );
My App.js CODE :
import React from "react";
function App()
{
return(
<h1> hello world </h1>
)
}
export default App;
PS: Thank you for reading my post, please post your solutions or links that might help.
You are probably missing #material-ui/icons
Try to install it
npm install #material-ui/icons
In my case an import statement was missing a file. Check your import statements. It actually shows what's missing for a second on the Compiling... screen after npm start
Today I decided to try to learn React, but whenever I try to import the two modules below:
import React from "react"
import ReactDOM from "react-dom"
I get the error:
Uncaught SyntaxError: Cannot use import statement outside a module
Here's the steps I've taken to try to create my React program:
Install NodeJS
Add NodeJS to environmental variables
Create new folder for my program
Create HTML, CSS, and JS files in my folder
Why am I getting this error, and how can I fix it?
I assume this is your first time working with React? I see that you have installed NodeJs, which is great!
I recommend that you get started with a complete React app such as Create React App.
https://create-react-app.dev/
I am also new to react and using visual studio2022 to write the react code in MVC project. I created login page exactly same as https://github.com/narendra315/yt-210911-react-login-page/blob/master/src/LoginComponent2.js
and was getting same error as
Uncaught SyntaxError: Cannot use import statement outside a module
fixed it by removing the import as well as export line at the end. I replaced the export line with
ReactDOM.render(<LoginComponent />, document.getElementById('content'));
where LoginComponent is my class and content is id of my Index.cshtml page
This fixed my issue.
You need to add this to your package.json and it should work. If you are going to use es6 import statements you need to tell node you are using modules inside of your package.json like this.
"type": "module",
I have seen that it is used
import React from 'react';
import './cssName.css';
but it does not work for me, I am working on the electron app and add react as shown here
https://reactjs.org/docs/add-react-to-a-website.html
It is not working because you do not have a build process set up. You will need to setup webpack or something like that to be able to import css.
I suggest you read this article: https://flaviocopes.com/react-electron/.
I'm using the reactstrap library, Successfully installed the bootstrap and reactstrap
however when i use import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; react won't compile. Is there a workaround?
try using the following import statement - without the node_modules/ and you should get around this issue
import 'bootstrap/dist/css/bootstrap.min.css';
working stackblitz here