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",
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
I am trying out Laravel 9 with Vite, but without(!) a frontend framework (like Vue or React).
I am trying to make a reusable js module that I could use/load in different Blade templates.
So I created a file 'menu-btn-toggle.js' in 'resources/js/components/utilities'.
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
I then created a 'utilities.js' file in 'resources/js/components'.
import './utilities/menu-btn-toggle';
I then updated the 'app.js' file in 'resources/js'
import './bootstrap';
import './components/utilities';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
So far, this seems to be working (?). Atleast, i think so. Vite is not giving me any errors so far (yay!)
But then I try to import the module in a blade template, but I can't get it to work.
So at the bottom of my blade template, I added this:
<script type="module">
import MenuBtnToggle from 'menu-btn-toggle';
new MenuBtnToggle();
</script>
But this gives me the following error:
Uncaught TypeError: Error resolving module specifier “menu-btn-toggle”. Relative module specifiers must start with “./”, “../” or “/”.
But when I add one of the examples, the error changes to:
Loading module from “[local_dev_url]/menu-btn-toggle” was blocked because of a disallowed MIME type (“text/html”).
as it isn't be able to find the module. It returns a 404.
Is it even possible do to want I want without a frontend framework? Or am I not seeing something obvious? I have experience with php, unfortunately not (enough) with Laravel and Vite.
I was stuck into almost same situation where we are not able to use import statement inside our blade files using Vite. We commonly get
Uncaught TypeError: Error resolving module specifier
“menu-btn-toggle”. Relative module specifiers must start with “./”,
“../” or “/”.
or We get 404 Blocked error nearly same as
Loading module from “[local_dev_url]/menu-btn-toggle” was blocked
because of a disallowed MIME type (“text/html”).
When importing external npm packages or modules, we need to put them in windows object just like you did above for Alpine
window.Alpine = Alpine;
But for your specific case problem you must do following
1)Inside menu-btn-toggle.js
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
2)Inside utilities.js
import {MenuBtnToggle} from "./utilities/menu-btn-toggle";
window.MenuBtnToggle = MenuBtnToggle;
And then finally inside your app.js
import './components/utilities';
Now inside your .blade file, there is no need to import the MenuBtnToggle
instead just do it like
new MenuBtnToggle();
No need to use import MenuBtnToggle from 'menu-btn-toggle'; in blade.
Important thing is to import your app.js file properly inside .blade file through vite
#vite(['resources/css/app.css','resources/js/app.js'])
And it works. It has worked when reproducing same files/setup as yours.
I am beginner with javascript's world and svelte. And I am trying to import an external library into the svelte app that can highlight words.
However, I am running out the ideas. For example, I am trying to utilize:
import { Mark } from './mark.js';
But it shows the following error:
'Mark' is not exported by src\routes\mark.js, imported by src\routes\page.svelte
In my react app import Mark from 'mark.js'; works fine after installing with yarn
I am writing a web app in react and as soon as I use reactdate picker in my code ,it simply breaks giving me the error stated above .
Adding these two lines breaks my webapp and throws an error .
import {SingleDatePicker} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
I have react-dates installed in package.json file but I don't understand as how to fix this and move forward ?
According to the Readme, you may want to add this import 'react-dates/initialize'; to root of your application
I'm trying to incorporate a React component for radio buttons in my iOS app that's written in React Native, however I get an error when trying to import the component using the method that the author specified.
I first installed the component in the root directory of the app's XCode project/source code using the following statement:
npm i -S react-native-radio-buttons
Everything looked like it went through fine, so I incorporated the code for the component into the JS file for the screen that would use it, but I get an error on the very first line (which contains the import statement).
The import statement goes like this:
import { RadioButtons } from 'react-native-radio-buttons'
And the error is:
Uncaught SyntaxError: Unexpected reserved word
As far as I can tell, that should be an acceptable way of doing things in ES6. If anyone could tell me why this would happen, I'd be grateful. Thanks in advance.
react-native-radio-buttons author here,
I assumed everybody was using Babel with ES6 features enabled. I should add that to the README.
Edit: instruction and example .babelrc added to 0.4.2
Please try add this .babelrc file to your project root, as the provided example does:
{
"whitelist": [
"es6.modules"
]
}
Are you using a tool to translate from ES6? "import" is not going to work. Have you tried:
var RadioButtons = require('react-native-radio-buttons');
instead?