遵循my-app教程中的说明时，React JS引发错误

Question

I am beginner to React JS and while going through the tutorial of my-app application, I am seeing the following error

Failed to compile:
./src/index.js
Attempted import error: './App' does not contain a default export (imported as 'App').

Inorder to fix this, I have did create the 'my-app' project again into the same directory and then tried to start the npm, then hitting the following error, can some one shed light to resolve this please.? Also it would be really helpful if you point the mistakes I were making.

E:\ReactJS\demo\my-app>npm start

> my-app@1.0.0 start E:\ReactJS\demo\my-app
> if-env NODE_ENV=production && npm run react-project:start:prod || npm run react-project:start:dev


> my-app@1.0.0 react-project:start:dev E:\ReactJS\demo\my-app
> eslint modules && react-project start

E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-file.js:332
            throw e;
            ^

Error: react-app:
        Configuration for rule "array-callback-return" is invalid:
        Value "warn" is the wrong type.

Referenced from: E:\ReactJS\demo\package.json
    at validateRuleOptions (E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-validator.js:102:15)
    at E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-validator.js:148:13
    at Array.forEach (<anonymous>)
    at Object.validate (E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-validator.js:147:35)
    at load (E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-file.js:390:19)
    at E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-file.js:326:36
    at Array.reduceRight (<anonymous>)
    at applyExtends (E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-file.js:309:28)
    at Object.load (E:\ReactJS\demo\my-app\node_modules\eslint\lib\config\config-file.js:395:22)
    at loadConfig (E:\ReactJS\demo\my-app\node_modules\eslint\lib\config.js:74:33)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@1.0.0 react-project:start:dev: `eslint modules && react-project start`
npm ERR! Exit status 1

quite unsure about the error, most of it looks like related to its own downloaded packages though.

.eslintrc:

{ "extends": "rackt", "globals": { " DEV ": true }, "rules": { "react/jsx-uses-react": 1, "react/jsx-no-undef": 2, "react/wrap-multilines": 2 }, "plugins": [ "react" ] }

and package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "react-project": {
    "server": "modules/server.js",
    "client": "modules/client.js",
    "webpack": "webpack.config.js"
  },
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run react-project:start:prod || npm run react-project:start:dev",
    "test": "karma start",
    "react-project:start:dev": "eslint modules && react-project start",
    "react-project:start:prod": "rm -rf .build && react-project build && node .build/server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "6.5.1",
    "babel-core": "6.5.1",
    "babel-eslint": "4.1.8",
    "babel-loader": "6.2.2",
    "babel-preset-es2015": "6.5.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.0",
    "babel-preset-stage-1": "6.5.0",
    "body-parser": "1.15.0",
    "bundle-loader": "0.5.4",
    "compression": "1.6.1",
    "css-loader": "0.23.1",
    "dotenv": "2.0.0",
    "eslint": "1.10.3",
    "eslint-config-rackt": "1.1.1",
    "eslint-plugin-react": "3.16.1",
    "expect": "1.14.0",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "helmet": "1.1.0",
    "hpp": "0.2.0",
    "if-env": "1.0.0",
    "karma": "0.13.21",
    "karma-chrome-launcher": "0.2.2",
    "karma-mocha": "0.2.2",
    "karma-mocha-reporter": "1.2.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "1.7.0",
    "mocha": "2.4.5",
    "morgan": "1.7.0",
    "node-fetch": "1.3.3",
    "null-loader": "0.1.1",
    "postcss-loader": "0.8.1",
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-project": "0.0.30",
    "react-router": "2.0.0",
    "react-title-component": "1.0.1",
    "source-map-support": "0.4.0",
    "style-loader": "0.13.0",
    "url-loader": "0.5.7",
    "webpack": "1.12.14",
    "webpack-dev-server": "1.14.1"
  }
}

Answer 1

It looks like you are exporting the App component incorrectly. Change the export at the bottom of ./App page to default export App