react+webpack项目遇到的报错和解决方法

  1. 一直报react语法错误
    react+webpack项目遇到的报错和解决方法_第1张图片
    解决方法a:
    装babel-loader: npm install babel-loader
    装babel-preset-react: npm install babel=preset-react
    修改webpack.config.js如下:
    react+webpack项目遇到的报错和解决方法_第2张图片

    解决方法b:
    引用React-dom的同时要需要引用react
    不然浏览器会报错找不到react
    react+webpack项目遇到的报错和解决方法_第3张图片

  2. 浏览器报错:react: Minified React error #130;

    react+webpack项目遇到的报错和解决方法_第4张图片
    打开链接是详细报错:
    react+webpack项目遇到的报错和解决方法_第5张图片
    解决方法: jsx写法问题(需要export)
    错误写法:
    react+webpack项目遇到的报错和解决方法_第6张图片
    正确写法:
    react+webpack项目遇到的报错和解决方法_第7张图片
    因为render 的语句需要render的,所以只要export这个就行了,如果是同一个文件的其他组件就直接写class xxx

  3. 开发环境打包生成两个不一样的文件
    一开始打包 npm run deploy 生成的文件是:
    react+webpack项目遇到的报错和解决方法_第8张图片
    原因是我在webpack.config.js里写的是:
    react+webpack项目遇到的报错和解决方法_第9张图片
    解决办法:
    react+webpack项目遇到的报错和解决方法_第10张图片
    生成的就是一个app.min.js和一个vendor.min.js(dist文件夹下)

相关项目链接<<

你可能感兴趣的:(react,webpack)