Develop Reference

Unexpected token '{'. import call expects exactly one argument - when trying to import chart.js

I am creating a simple node.js app that uses chart.js for some visualisations but when trying to import and use Chart I am getting errors.
I used npm to install chart.js and served it to the client with:
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/chart.js/dist')))
I am using pug as a rendering engine and have imported the scripts:
script(type="module" src="./scripts/chart.js")
script(src="/scripts/index.js")
Then in the index.js file when I try and import the chart module using:
import { Chart } from './chart.js/auto';
I get an error:
SyntaxError: Unexpected token '{'. import call expects exactly one argument.
Removing the curly braces doesn't work either.
I can see the chart.js scripts are included in the sources of the page but it will not load into the script I have tried omitting the import as I saw that inline scripts do not need this however that produces another error saying that it cannot find the variable Chart
Unsure what I am doing wrong, whether it be with serving the files or with the client-side import.

Solved
I used a different link in the script tag. Instead of /chart.js I used /chart.umd.js.
script(src="/scripts/chart.umd.js")
Then I was not required to use any-side import statement in the client side index.js file

"Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ReactJS

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",

React added to existing webpage does not render components from multiple files

I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)

You either have to use native ES modules or use a bundler like webpack or Rollup

iView not defined error while trying to import it

I'm trying to import iView UI on my VueJS project with Webpack inside main.js.
import iView from 'iview'
Then:
Vue.use(iView)
And console shows up an error saying
Uncaught ReferenceError: iView is not defined
I added iview plugin by doing npm i iview -D on my project.
Why this isn't working? Any ideas? Maybe some package.json issues? whenever i run npm run dev it compiles everything fine, no errors, no warnings.

Okay, after some hours of attempts, I found out I had two ways of including this lib.
By either doing:
import iView from 'iview/dist/iview'
This one would throw a warning about types not defined for this, but if you do it like so:
const iView = require('iview')
It will work like a charm! Hope this helps to anyone who's under the same situation I was.

Error on import statement in JavaScript/React Native code

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?