react搭建运行打包常见错误

要素：
webpack.config.js中，
js入口   文件导出出口路径指定    首页的模板指定；


运行：webpack打包文件；





【运行报错】----------------------------------

1 webpack.config.js配置加载器报错：
configuration.module has an unknown property 'loaders'. These properties are valid:
...

解决：将 loaders 改为rules

2 当报错 SyntaxError:...，并且错误指向标签的尖括号时，表示jsx语法不能被解析，记得配置.babelrc
解决：
1 下载babel-plugin-transform-react-jsx
2 .babelrc
{
"presets": ["react",'env'],
"plugins":["transform-react-jsx"]
}

3 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
   - configuration has an unknown property 'mode'. These properties are valid:

原因：webpack.config.js
 //mode: "development",//4以下要指定，以下的话不要


 4  duplicate declaration "xxx"

 问题：多次申明 xxx 这个变量了

 5 less在有style-loader，css-loader，less-loader的情况下引进，编译报错
      解决：less没下载：npm install less --save-dev


 6  ERROR in ./src/index.jsx
    Module build failed: SyntaxError: F:\博客\react\reactDemo\src\index.jsx: Unexpected token (21:7)

      19 |
      20 |
    > 21 | render(,document.getElementById('app'));
         |        ^

     @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.jsx
    Child html-webpack-plugin for "index.html":
           [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/indexTemplate.html 586 bytes {0} [built]


    解决：配置  .babelrc文件：
    {
    "presets": ["react",'env'],
    "plugins":["transform-react-jsx"]
    }

【网页报错】------------------------------------------
1 路由相关报错
页面：The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

错误代码：
import { Router, Route, Link,hashHistory} from 'react-router'

                

解决：改
import { BrowserRouter } from 'react-router-dom'
 
                



解决办法：
路由中不要用其他的，就用

import {BrowserRouter} from 'react-router-dom'
 
                
                    
                    
                    
                

2 Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
原因：组件没有export暴露

3  You should not use  and  in the same route;  will be ignored
route4.0以前的路由嵌套写法：

报以上错；
新的写法：

4  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
解决：
将原来的：import  {Link} from 'react-router'
改import { BrowserRouter as Router, Link} from "react-router-dom";

5 跳转路由是8080/home  没有页面，
解决是，改路由中的配置为

6 多次点击路由出现Hash history cannot PUSH the same path; a new entry will not be added to the history stack
解决：
link上加一个replace属性就好，例 list


7 Invalid DOM property `class`. Did you mean `className`?

原因是JSX中写了class，由于JSX是JavaScript，诸如class和for之类的标识符作为XML属性名是不支持的。
所以，React DOM组件中的DOM属性名称分别是className和htmlFor。

8  less样式审核样式有，但是出现警号，样式失效，并且less文件里面有报错的显示：

原因：例
 position: absolute;
 【这里样式中出现了空格！！！！！去掉就好了】
  position:absolute;

  9Each child in an array or iterator should have a unique "key" prop.

 for循环是，里面的循环HTML要有key ,否则会有上面警告


 9 使用for加if判断渲染html时，key值警告：
  Encountered two children with the same key, `2`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

  源码：
  if(scoreInit==1){
          for(var i=1;i<5;i++){
              if(i==1){
                  stars.push()
              }
              stars.push()
          }
      }

  解决：if else

  10 Functions are not valid as a React child. This may happen if you return a Component instead of  from render. Or maybe you meant to call this function rather than return it.

  原因：
  render 里面定义了方法，return 使用了方法方式是{fun} 没有执行，改{fun()}就好

  10 The tag  is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
     【在这个浏览器中，标签是未被识别的。如果您打算呈现一个React组件，请以一个大写字母开始它的名字。】
     解决：最终的app组件要用大写开头命名；


  11  Cannot assign to read only property 'exports' of object '#