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

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/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 commented 6 years ago

我是用了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 commented 6 years ago

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

Lobos commented 6 years ago

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

zhangqhzz commented 6 years ago

我配置了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 commented 6 years ago

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

zhangqhzz commented 6 years ago

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 commented 6 years ago

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

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

zhangqhzz commented 6 years ago

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

Lobos commented 6 years ago

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

zhangqhzz commented 6 years ago

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 commented 6 years ago

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

zhangqhzz commented 6 years ago

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

zhangqhzz commented 6 years ago

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

zhangqhzz commented 6 years ago

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

Lobos commented 6 years ago

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

  "plugins": [
    "react-require"

zhangqhzz commented 6 years ago

谢谢，这个问题解决了，能进入了，table显示还有其他问题，我再看看

Lobos commented 6 years ago

如果样式有问题，可能是css-module的问题，需要配置一下。

test: /\.scss$/,
        use: [
          { loader: 'style-loader' },

          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]-[local]'
            }
          },

zhangqhzz commented 6 years ago

谢谢

zhangqhzz commented 6 years ago

因为我原先有配置 { test: /.(scss)$/, use: ['css-hot-loader'].concat(extractSCSS.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: {alias: {'../img': '../public/img'}} }, { loader: 'sass-loader' } ] })) },因为原先有用其他组件的也是基于bootstrap4的，所以你帮看一下，如何与你的整合这个配置

Lobos commented 6 years ago

原先的不动，或者加一个 exclude，'node_modules/rctui'，再加一个配置 include 就好了

{
test: /.(scss)$/,
exclude: [path.resolve(__dirname, 'node_modules/rctui')],
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {alias: {'../img': '../public/img'}}
},
{
loader: 'sass-loader'
}
]
}))
},
{
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'node_modules/rctui')],
        use: [
          { loader: 'style-loader' },

          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]-[local]',
            },
          },

          {
            loader: 'sass-loader',
          },
        ],
      },

Lobos commented 6 years ago

或者 test 里面加上path， test: /node_modules\/rctui\/*\/\.scss$/，这样应该也可以的

zhangqhzz commented 6 years ago

最后还是不能用我原先抽离CSS的方式，不知为什么，两者都放上去也不行，用你的不抽离CSS可以

zhangqhzz commented 6 years ago

我想问一下，如何单纯的将TABLE拿出来用，会涉及多少其他组件？

Lobos commented 6 years ago

比较简单的办法，fork 一下这个项目，把 src/index.js 只保留 Table，然后执行npm run build，编译一个只有Table的版本就好了。

zhangqhzz commented 6 years ago

谢谢

Lobos / react-ui

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