我在用web-dev-server时遇到下列问题

[zhangqhzz]

ERROR in ./src/views/mydesk/TraceList.js
Module not found: Error: Can't resolve 'rctui/DatepickerRange' in 'C:\Users\Harry\web develop\oa3test\src\views\mydesk'
@ ./src/views/mydesk/TraceList.js 39:23-55
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/Fetch.js
Module parse failed: Unexpected token (100:54)
You may need an appropriate loader to handle this file type.
| fetch = { url: fetch }
| }
| let { method = 'get', url, data, then, request, ...options } = fetch
| if (!request) {
| request = Refetch
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 2:0-41
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Table/Table.js
Module parse failed: Unexpected token (111:8)
You may need an appropriate loader to handle this file type.
| if (!Array.isArray(data)) {
| return (
|
|
| <td style={{textAlign: 'center'}} colSpan={columns.length + (onSelect ? 1 : 0)}>{data} @ ./node_modules/_rctui@0.7.20@rctui/Table/index.js 3:0-27
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Select/Select.js
Module parse failed: Unexpected token (118:8)
You may need an appropriate loader to handle this file type.
| if (this.props.filterAble) {
| return (
|

| <input className={classnames(_input.input)}
| value={this.state.filter}
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 6:0-29
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/FormItem.js
Module parse failed: Unexpected token (168:37)
You may need an appropriate loader to handle this file type.
|
| render () {
| let { name, readOnly, popover, ...props } = this.props
| const { controlProps, errors } = this.context
| const { result } = this.state
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 3:0-47
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./src/views/mydesk/TraceList.js
Module not found: Error: Can't resolve 'rctui/DatepickerRange' in 'C:\Users\Harry\web develop\oa3test\src\views\mydesk'
@ ./src/views/mydesk/TraceList.js 39:23-55
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/Fetch.js
Module parse failed: Unexpected token (100:54)
You may need an appropriate loader to handle this file type.
| fetch = { url: fetch }
| }
| let { method = 'get', url, data, then, request, ...options } = fetch
| if (!request) {
| request = Refetch
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 2:0-41
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Table/Table.js
Module parse failed: Unexpected token (111:8)
You may need an appropriate loader to handle this file type.
| if (!Array.isArray(data)) {
| return (
|
|
| <td style={{textAlign: 'center'}} colSpan={columns.length + (onSelect ? 1 : 0)}>{data} @ ./node_modules/_rctui@0.7.20@rctui/Table/index.js 3:0-27
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Select/Select.js
Module parse failed: Unexpected token (118:8)
You may need an appropriate loader to handle this file type.
| if (this.props.filterAble) {
| return (
|

| <input className={classnames(_input.input)}
| value={this.state.filter}
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 6:0-29
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/FormItem.js
Module parse failed: Unexpected token (168:37)
You may need an appropriate loader to handle this file type.
|
| render () {
| let { name, readOnly, popover, ...props } = this.props
| const { controlProps, errors } = this.context
| const { result } = this.state
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 3:0-47
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js
ERROR in ./node_modules/_rctui@0.7.20@rctui/Lazyload.js
Module parse failed: Unexpected token (32:13)
You may need an appropriate loader to handle this file type.
|
| if (Array.isArray(children)) {
| return

{children}

| } else {
| return Children.only(children)
@ ./src/views/mydesk/TraceList.js 43:16-41
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/Filter.js
Module parse failed: Unexpected token (32:28)
You may need an appropriate loader to handle this file type.
|
| render () {
| const { data, filter, ...props } = this.props
| return (
| <Component {...props}
@ ./node_modules/_rctui@0.7.20@rctui/Table/index.js 8:0-43
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Input.js
Module parse failed: Unexpected token (32:58)
You may need an appropriate loader to handle this file type.
|
| render () {
| const { className, grid, type, size, readOnly, value, ...other } = this.props
| const props = {
| className: classnames(
@ ./src/views/mydesk/TraceList.js 33:13-35
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/Sort.js
Module parse failed: Unexpected token (37:20)
You may need an appropriate loader to handle this file type.
| render () {
| const state = this.state
| const { data, ...props } = this.props
| let sortData = isEmpty(state) ? data : this.sort(data, state)
|
@ ./node_modules/_rctui@0.7.20@rctui/Table/index.js 6:0-39
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Filter.js
Module parse failed: Unexpected token (39:8)
You may need an appropriate loader to handle this file type.
| }
| return (
| <FormControl key={f.name} {...props}>
| { cloneElement(f.component, {name: f.name}) }
|
@ ./src/views/mydesk/TraceList.js 29:14-37
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/Pagination.js
Module parse failed: Unexpected token (54:26)
You may need an appropriate loader to handle this file type.
|
| render () {
| const { pagination, ...props } = this.props
| let pagi = this.getPagination(pagination)
|
@ ./node_modules/_rctui@0.7.20@rctui/Table/index.js 7:0-51
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/Select/format.js
Module parse failed: Unexpected token (69:11)
You may need an appropriate loader to handle this file type.
| }
|
| return <Component {...props} data={data} />
| }
|
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 5:0-29
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

ERROR in ./node_modules/_rctui@0.7.20@rctui/higherOrders/ClickAway.js
Module parse failed: Unexpected token (69:8)
You may need an appropriate loader to handle this file type.
| render () {
| return (
| <Component {...this.props}
| open={this.state.open}
| onOpen={this.handleOpen}
@ ./node_modules/_rctui@0.7.20@rctui/Select/index.js 4:0-49
@ ./src/views/mydesk/TraceList.js
@ ./src/views/mydesk/All.js
@ ./src/containers/Full/Full.js
@ ./src/index.js

[zhangqhzz]

我是用了import Table from 'rctui/Table'
import Select from 'rctui/Select'
import Filter from 'rctui/Filter'
import {Input as RctuiInput} from 'rctui/Input'
import ArrayHolder from 'rctui/ArrayHolder'
import DatepickerRange from 'rctui/DatepickerRange'
import Lazyload from 'rctui/Lazyload'

[vipcxj]

删了node_modules，然后npm i试试~ npm里面本地库版本换来换去，很容易出毛病，删了重建最干净~

[Lobos]

webpack配置了babel-loader么。新项目的话，可以试试这个脚手架，https://github.com/Lobos/ogier-react

[zhangqhzz]

我配置了babel-loader
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
module.exports = {
devtool:'eval-source-map',
entry: __dirname + "/src/index.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
port:9001,
inline: true//实时刷新
},

module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"                    
            },
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use:  extractCSS.extract({
				fallback: 'style-loader',
				use: 'css-loader'
			  })
        } ,
    {
      test: /\.html$/,
      loader: 'html-loader'
    },
    {
      test: /\.(scss)$/,
      use: ['css-hot-loader'].concat(extractSCSS.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {alias: {'../img': '../public/img'}}
          },
          {
            loader: 'sass-loader'
          }
        ]
      }))
    },
    {
      test: /\.(png|jpg|jpeg|gif|ico)$/,
      use: [
        {
          // loader: 'url-loader'
          loader: 'file-loader',
          options: {
            name: './img/[name].[hash].[ext]'
          }
        }
      ]
    },
    {
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file-loader',
      options: {
        name: './fonts/[name].[hash].[ext]'
      }
    } 
    ]
} ,
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
  new webpack.NamedModulesPlugin(),
  extractCSS,
  extractSCSS,
  new HtmlWebpackPlugin(
    {
      inject: true,
      template: './public/index.html'
    }
  ),
  new CopyWebpackPlugin([
      {from: './public/img', to: 'img'}
    ],
    {copyUnmodified: false}
  )
]

}

[zhangqhzz]

.babelrc中
{
"presets": ["react", "env"],
"plugins": ["transform-object-rest-spread"]
}

[zhangqhzz]

package.json中
{
"name": "oa3test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress --color --inline --env.dev",
"build": "webpack -p --progress --env.prod",
"clean": "rimraf ./build"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "4.0.0",
"flag-icon-css": "2.9.0",
"font-awesome": "4.7.0",
"prop-types": "^15.6.1",
"rctui": "^0.7.20",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-transition-group": "2.2.1",
"reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"json-server": "^0.12.1",
"style-loader": "0.20.1",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"uglify-js": "3.3.9",
"url-loader": "0.6.2"
}
}

[Lobos]

你的babel-loader配置了exclude，把 rctui 给排除了，去掉这个，使用 include 来配置

{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"                    
            },
            exclude: /node_modules/
        }

[zhangqhzz]

include 应该如何配置，我将node_modules/rctui加入include中，还有很多错误
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/rctui')]

[Lobos]

可以先不配置 include 和 exclude，看一下有没有问题

[zhangqhzz]

Copilded successfully。但运行报错
Uncaught ReferenceError: React is not defined
at eval (webpack-internal:///./node_modules/_rctui@0.7.20@rctui/svgs.js:6)
at Object../node_modules/_rctui@0.7.20@rctui/svgs.js (VM20 bundle.js:1)
at d (VM20 bundle.js:1)
at B (VM20 bundle.js:1)
at eval (webpack-internal:///./node_modules/_rctui@0.7.20@rctui/Datepicker/Clock.js:25)
at Object../node_modules/_rctui@0.7.20@rctui/Datepicker/Clock.js (VM20 bundle.js:1)
at d (VM20 bundle.js:1)
at B (VM20 bundle.js:1)
at eval (webpack-internal:///./node_modules/_rctui@0.7.20@rctui/Datepicker/Datetime.js:33)
at Object../node_modules/_rctui@0.7.20@rctui/Datepicker/Datetime.js (VM20 bundle.js:1)
react-dom.development.js?ae09:15374 Download the React DevTools for a better development experience: https://fb.me/react-devtools
webpack-internal:///./node_modules/_rctui@0.7.20@rctui/svgs.js:6 Uncaught ReferenceError: React is not defined
at eval (webpack-internal:///./node_modules/_rctui@0.7.20@rctui/svgs.js:6)
at Object../node_modules/_rctui@0.7.20@rctui/svgs.js (VM20 bundle.js:1)
at d (VM20 bundle.js:1)
at B (VM20 bundle.js:1)
at eval (webpack-internal:///./node_modules/_rctui@0.7.20@rctui/Datepicker/Clock.js:25)
at Object../node_modules/_rctui@0.7.20@rctui/Datepicker/Clock.js (VM20 bundle.js:1)
at d (VM20 bundle.js:1)
at B (VM20 bundle.js:1)
at eval (webpack-internal:///./node_modules/_rctui@0.7.20@rctui/Datepicker/Datetime.js:33)
at Object../node_modules/_rctui@0.7.20@rctui/Datepicker/Datetime.js (VM20 bundle.js:1)

[Lobos]

浏览器里执行出错？这个是没有引入React 库吧，在html里面引入就好了吧。

[zhangqhzz]

为什么没有加入rctui之前，是可以运行的

[zhangqhzz]

因为测试项目中需要TABLE，我就装了rctui，之后就不能正常了

[zhangqhzz]

一般 npm install rctui 之后，就可以直接import 使用了，不是太明白这个rctui还要做哪些事

[Lobos]

呃，这个是babel的问题……它的某些版本，需要强制require React，可以用这个插件 npm install babel-plugin-react-require --save-dev
babelrc的plugin里面加一下

  "plugins": [
    "react-require"