我正在用ReactJS构建一个项目，并从一个非常简单的代码开始测试我的项目设置：
import React, { Component } from "react";
import PropTypes from "prop-types";
class App extends Component {
state = {
test: null
}
componentWillMount = () => {
this.setState({
test: "Hello World!"
})
}
render = () => {
return (
<div>
<p>{this.state.test}</p>
</div>
);
}
}
export default App;
当我运行（纱线启动）时，我的所有导入都无法识别：
Failed to compile.
./src/components/pages/App/App.js
Line 18: 'state' is not defined no-undef
Line 22: 'componentWillMount' is not defined no-undef
Line 28: 'render' is not defined no-undef
Search for the keywords to learn more about each error.
我的package.json（继承自另一个有效的项目）：
{
"name": "test",
"version": "3.0.0",
"private": true,
"proxy": "http://localhost:3001/",
"dependencies": {
"autoprefixer": "7.1.1",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.0.0",
"babel-plugin-relay": "^1.4.1",
"babel-preset-react-app": "^3.0.3",
"babel-runtime": "6.23.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "3.19.0",
"eslint-config-react-app": "^1.0.5",
"eslint-loader": "1.7.1",
"eslint-plugin-flowtype": "2.34.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "5.0.3",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"fixed-data-table-2": "^0.8.13",
"fs-extra": "3.0.1",
"graphql": "^0.13.2",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"moment": "^2.19.1",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "^4.1.1",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.0.0",
"postcss-loader": "2.0.6",
"promise": "7.1.1",
"react": "^15.6.2",
"react-datetime": "^2.11.0",
"react-dev-utils": "^3.1.1",
"react-dom": "^15.6.2",
"react-error-overlay": "^1.0.10",
"react-fa": "^4.2.0",
"react-relay": "^1.4.1",
"react-router-dom": "^4.2.2",
"react-router-relay": "^0.14.0",
"react-virtualized": "^9.19.1",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.3",
"url-loader": "0.5.9",
"validator": "^9.1.1",
"webpack": "2.6.1",
"webpack-dev-server": "2.5.0",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.3"
},
"devDependencies": {
"faker": "^4.1.0",
"relay-compiler": "^1.1.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive --follow",
"start-js": "node scripts/start.js",
"build-js": "node scripts/build.js",
"start": "npm-run-all -p watch-css start-js",
"build": "npm-run-all build-css build-js",
"test": "node scripts/test.js --env=jsdom",
"relay": "relay-compiler --src ./src --schema ./graphql/schema.graphql"
},
"babel": {
"plugins": [
"relay"
],
"presets": [
"react-app"
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
我的脚本：
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web sever.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {
process.on(sig, function() {
devServer.close();
process.exit();
});
});
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
为什么无法识别我的进口商品？我是否缺少某些参数/配置？
相同的package.json和启动脚本已在另一个具有ReactJs的项目中成功使用。...
答案 0 :(得分：0)
您可能缺少babelrc
"plugins": [ "babel-plugin-transform-class-properties" ]