CODEWITHSUNDEEP
javascriptreactjsbabeljs
bsky
bsky

Reputation: 20222

Parse Error: Line 1: Illegal import declaration

I created a React application with the code in a file called App.jsx that starts like this:

import React, { Component } from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import './App.css';

When I do npm run I get:

> 1 | Parse Error: Line 1: Illegal import declaration
    |       ^
  2 | for file /path/to/file/App.jsx

I looked online and it appears that the import statement is not recognised unless I use Babel.

However, from what I understand, with the new Create React App https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html there is no need for Babel.

So what's the best way of solving this issue?

Upvotes: 3

Views: 3026

Answers (3)

codeX
codeX

Reputation: 5398

In the .eslintrc file, enable modules via ecmaFeatures: { modules: true }

See Illegal import declaration - Issue #2112 for additional information.

Upvotes: 1

marzelin
marzelin

Reputation: 11600

You don't need to add Babel to your project because it is already included in the development environment provided by create-react-app. However, you can't just run your files directly. You have to use it as it is suggested in the blog post you linked in your question.

Upvotes: 0

Ilhan Erikci
Ilhan Erikci

Reputation: 11

From the link:

Create React App uses both Webpack and Babel under the hood.

As the current browsers don't support the import statement, you have to use Babel or similar

Upvotes: 0

Related Questions