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(<HashRouter><Route history={history} location={location}></Route></HashRouter>,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'
<Router history={hashHistory}>
                <Route path="/" component={homepage}></Route>
</Router>
解决：改
import { BrowserRouter } from 'react-router-dom'
 <BrowserRouter>
                <Route path="/" component={homepage}></Route>
</BrowserRouter>


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

import {BrowserRouter} from 'react-router-dom'
 <BrowserRouter>
                <Route path='/' component={App}>
                    <Route path='list' component={List}/>
                    <Route path='detail/:id' component={Detail}/>
                    <Route path="*" component={NotFound}/>
                </Route>
</BrowserRouter>

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

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

<BrowserRouter>
                <Route component={App}>
                    <Route path='list' component={List}/>
                    <Route path='detail/:id' component={Detail}/>
                    <Route path="*" component={NotFound}/>
                </Route>
</BrowserRouter>

报以上错；
新的写法：

<BrowserRouter>
                <App>
                    <Route path='list' component={List}/>
                    <Route path='detail/:id' component={Detail}/>
                    <Route path="*" component={NotFound}/>
                </App>
</BrowserRouter>

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  没有页面，
解决是，改路由中的配置为

<HashRouter>
                <AppContainer history={history} location={location}>
                    <Route path="/" exact component={Home}/>
                    <Route path="/homePage" exact component={Home}/>
                </AppContainer>
</HashRouter>

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


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(<img key={i+1} src="../../../public/images/Star.png" alt=""/>)
              }
              stars.push(<img key={i+1} src="../../../public/images/StarGrey.png" alt=""/>)
          }
      }

  解决：if else

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

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

  10 The tag <app> 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 '#<Object>'
     解决：
     需要引入插件 babel-plugin-transform-es2015-modules-commonjs
     然后在 .babelrc中配置 { "plugins": ["transform-es2015-modules-commonjs"] }


  12  都不报错了，但是不显示路由中对应的视图，
  解决：
  将原来的switch  换为HashRouter；
  <HashRouter>
                  <App>
                      <Route path='/home' component={Home}/>
                      <Route path='/list' component={List}/>
                      <Route path='/detail/:id' component={Detail}/>
                  </App>
  </HashRouter>

  13  ...Duplicate declaration "Route"

  问题：组件命名错误，换一个就好；


  网页警告===============================================

  1 WARNING in configuration
  The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

  WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  This can impact web performance.
  ...

  WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
  ...


  WARNING in webpack performance recommendations:
  You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
  For more info visit https://webpack.js.org/guides/code-splitting/

  原因：webpack4要加多一个mode来判断是开发环境还是生产环境；
  解决：webpack.config.js
       var config = {
           mode: "development",
       };

 

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

原因：render中{}方式使用方法，但是没有触发，例{this.getMenuList}就会报错，正确是{this.getMenuList()}

 

 

Warning: React does not recognize the `computedMatch` prop on a DOM element.

原因：在switch中使用了div或是组件；

解决：

用Fregment将div或组件包起来

 

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.

原因是配置路由的时候，我这里的问题是在app.jsxz中使用Router：

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

改为：

import {HashRouter as Router} from 'react-router-dom'

解决问题。

 

Do not mutate state directly. Use setState()

警告语句：

this.setState({pageIndex:this.state.pageIndex++});

改：

 var val=this.state.pageIndex;
this.setState({pageIndex:val+1});

警告解决。

 

Import in body of module; reorder to top  import/first

问题描述：原因大概就是说import要放在业务代码之前，你可以理解成，import语句前不能出现非import的语句；