Importing React: Unexpected identifier 'React'. import call expects exactly one argument."

Question

I am using React in Action by Manning Publications. The book uses React v. 16.0.0 and I have set up my dependencies in package.json to be identical to theirs. Their code says to import as follows:

import React, { Component } from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

But when I do, I get the following error:

SyntaxError: Unexpected identifier 'React'. import call expects exactly one argument. 

I've scoured Stock Overflow for an answer but could not find anything about what the error means in the context of React. I have tried using React v. 16.4.2, the current version, 16.0.1, the version that the book uses, and v. 15.0.1. Nothing changes.

The closest Stack Overflow article I could find is asking the difference between the "import react" and "{ Component }" "from 'react'" portions of the import expression.

Idolist

What browser are you running this in? – Undermanned

Are you running this code in the browser directly, or jave you set up something like Babel, Webpack or a combination of them, or similar tools, to interpret your code? – Thanasi

What transpiler are you using? – Marchellemarcher

Safari; not using a transpiler because I am not using JSX, in my current code--e.g., I am using React.createElement calls; no web pack or other tools. When I use the official unpkg CDN for react rather than hosting it locally using NPM, everything works fine without the import statements. The issue is the book uses the prop-types library, which is no longer a core feature. When I use the CDN for prop-types, I get other warnings: "Warning: Failed prop type: Comment: prop type content is invalid; it must be a function, usually from the prop-types package, but received undefined." – Idolist

If I don't use the prop-types CDN, it just throws errors that propTypes is an undefined variable. – Idolist

Oddly, I just added Babel. I didn't add web pack. And its transpiring the code as normal. But now I'm getting the error: "ReferenceError: Can't find variable: require" – Idolist

Answer 1

You need some Modules or bundler like Webpack.You cannot excecute it

Brachylogy

Please give some steps and examples. – Kristynkrock