Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
zhangqhzz opened this issue Mar 9, 2018 · 25 comments
Open

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

zhangqhzz opened this issue Mar 9, 2018 · 25 comments

Comments

@zhangqhzz
Copy link

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
Copy link
Author

我是用了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
Copy link

vipcxj commented Mar 9, 2018

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

@Lobos
Copy link
Owner

Lobos commented Mar 9, 2018

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

@zhangqhzz
Copy link
Author

我配置了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
Copy link
Author

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

@zhangqhzz
Copy link
Author

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
Copy link
Owner

Lobos commented Mar 12, 2018

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

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

@zhangqhzz
Copy link
Author

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

@Lobos
Copy link
Owner

Lobos commented Mar 12, 2018

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

@zhangqhzz
Copy link
Author

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
Copy link
Owner

Lobos commented Mar 12, 2018

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

@zhangqhzz
Copy link
Author

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

@zhangqhzz
Copy link
Author

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

@zhangqhzz
Copy link
Author

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

@Lobos
Copy link
Owner

Lobos commented Mar 12, 2018 •
edited
Loading

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

  "plugins": [
    "react-require"

@zhangqhzz
Copy link
Author

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

@Lobos
Copy link
Owner

Lobos commented Mar 12, 2018

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

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

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

@zhangqhzz
Copy link
Author

谢谢

@zhangqhzz
Copy link
Author

因为我原先有配置
{
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
Copy link
Owner

Lobos commented Mar 12, 2018 •
edited
Loading

原先的不动，或者加一个 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
Copy link
Owner

Lobos commented Mar 12, 2018 •
edited
Loading

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

@zhangqhzz
Copy link
Author

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

@zhangqhzz
Copy link
Author

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

@Lobos
Copy link
Owner

Lobos commented Mar 12, 2018

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

@zhangqhzz
Copy link
Author

谢谢

@miyizs miyizs mentioned this issue Aug 29, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Lobos @vipcxj @zhangqhzz