Lobos/react-ui

您的这套组件怎样引入到项目中使用呢? 已经执行过init.js all 操作

lcsoftware opened this issue · 3 comments

Server-Render Error Occurs: /Users/holdbase/HBMessage/web-server/node_modules/rctui/index.js:1
(function (exports, require, module, __filename, __dirname) { import './styles/reset.scss'
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Module._extensions..js (module.js:579:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/holdbase/HBMessage/web-server/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/holdbase/HBMessage/web-server/app/components/Mail/test.jsx:3:1)
at Module._compile (module.js:570:32)
at loader (/Users/holdbase/HBMessage/web-server/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .jsx] (/Users/holdbase/HBMessage/web-server/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

Lobos commented

这是在服务端渲染的?看错误提示是webpack的loader没有配置对

请问问题解决了吗?我也是服务端渲染的,一样的错误。
`(function (exports, require, module, __filename, __dirname) { import './styles/reset.scss';
^^^^^^

SyntaxError: Unexpected token import
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) [as .js] (D:\app\nengliserver\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.__dirname.186 (D:/app/nengliserver/bin/ctsiApp.js:21051:19)
at webpack_require (D:/app/nengliserver/bin/ctsiApp.js:26:30)`

下面是我的webpack.config

`var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var express = require("express");

module.exports = {
devtool: 'eval',
entry: {
bundle: __dirname+'/views/react/index.js',
vendor: ['react','redux','react-dom','react-redux','react-router','reqwest','redux-thunk']
},
output: {
path: __dirname + '/dist',
filename: '[name].js',
publicPath:'dist/',
chunkFilename: '[name].chunk.js'
},
externals: {'react': 'React', 'react-dom': 'ReactDOM', 'quill': 'Quill'},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin('main.css', {allChunks: true}),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
"React": "react"
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [
{test: /.jsx?$/,loader: 'babel-loader',query: {compact: false,presets: ["react", "es2015"],plugins: ["transform-object-rest-spread"]}},
{test: /.(css|less)$/, loader: 'style-loader!css-loader!postcss-loader!less-loader'},
{test: /.scss$/, loaders: ['style-loader', 'css-loader?modules&localIdentName=[hash:base64:8]', 'postcss-loader', 'sass-loader']},
{test: /.(ttf|eot|woff|woff2|otf|svg)/, loader: 'file-loader?name=./font/[name].[ext]' },
{test: /.json$/, loader: 'file-loader?name=./json/[name].json' },
{test: /.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' }
],
preLoaders: [
{ test: /.scss$/, loader: 'rctui-theme-loader?theme=' }
]
},
postcss: function(){
return [autoprefixer, precss];
}
};
`
您方便的话 看下报错原因

Lobos commented

我也没有处理过服务端渲染。参考一下这篇文章的静态资源处理方案吧,配置看起来和客户端是不一样的。