react-toolbox-example
react-toolbox-example copied to clipboard
react-toolbox
Using in Isomorphic Application
Hi, I'm trying to use toolbpx in isomorphic application. But have some troubles... Here is my webpack config:
import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const DEBUG = !process.argv.includes('release');
const VERBOSE = process.argv.includes('verbose');
const WATCH = global.WATCH === undefined ? false : global.WATCH;
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1',
];
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG,
};
const JS_LOADER = {
test: /\.jsx?$/,
include: [
path.resolve(__dirname, '../node_modules/react-routing/src'),
path.resolve(__dirname, '../src'),
],
loader: 'babel-loader',
};
//
// Common configuration chunk to be used for both
// client-side (app.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
const config = {
output: {
publicPath: '/',
sourcePrefix: ' ',
},
cache: DEBUG,
debug: DEBUG,
stats: {
colors: true,
reasons: DEBUG,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: VERBOSE,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
],
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss'],
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader',
}, {
test: /\.txt$/,
loader: 'raw-loader',
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
}, {
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
},
],
},
postcss: function plugins() {
return [
require('postcss-import')({
onImport: files => files.forEach(this.addDependency),
}),
require('postcss-nested')(),
require('postcss-cssnext')({ autoprefixer: AUTOPREFIXER_BROWSERS }),
];
},
};
//
// Configuration for the client-side bundle (app.js)
// -----------------------------------------------------------------------------
const appConfig = merge({}, config, {
entry: [
...(WATCH ? ['webpack-hot-middleware/client'] : []),
'./src/app.js',
],
output: {
path: path.join(__dirname, '../build/public'),
filename: 'app.js',
},
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
plugins: [
...config.plugins,
new ExtractTextPlugin('app.css'),
new webpack.DefinePlugin(GLOBALS),
...(!DEBUG ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: VERBOSE,
},
}),
new webpack.optimize.AggressiveMergingPlugin(),
] : []),
...(WATCH ? [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
] : []),
],
module: {
loaders: [
WATCH ? {
...JS_LOADER,
query: {
// Wraps all React components into arbitrary transforms
// https://github.com/gaearon/babel-plugin-react-transform
plugins: ['react-transform'],
extra: {
'react-transform': {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module'],
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react'],
},
],
},
},
},
} : JS_LOADER,
...config.module.loaders,
{
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap'),
},
],
},
});
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = merge({}, config, {
entry: './src/server.js',
output: {
path: './build',
filename: 'server.js',
libraryTarget: 'commonjs2',
},
target: 'node',
externals: [
function filter(context, request, cb) {
const isExternal =
request.match(/^[a-z][a-z\/\.\-0-9]*$/i) &&
!request.match(/^react-routing/) &&
!context.match(/[\\/]react-routing/);
cb(null, Boolean(isExternal));
},
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
devtool: 'source-map',
plugins: [
...config.plugins,
new webpack.DefinePlugin(GLOBALS),
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
],
module: {
loaders: [
JS_LOADER,
...config.module.loaders,
{
test: /(\.scss|\.css)$/,
loader: 'css/locals?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap',
},
],
},
});
export default [appConfig, serverConfig];
Actually building of bundle is done without errors, but when I try to run server.js - I get error:
Error: Cannot find module './style'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/some-path/node_modules/react-toolbox/lib/font_icon/index.js:15:14)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
In my server.js I do not using hot-middleware.
Hi! I did not try toolbox from the server yet but you shouldn't have any problems. Apparently your server side is not able to resolve the path for the styling. This usually happens in the frontend because it's a common pattern to exclude node_modules from the loaders pipeline.
Maybe you can open an issue in the main repository pointing here to get help. I know there are some people using toolbox from the server with no issue. Also, this points that it could be cool to have the example with server side rendering better than just frontend.
Sorry I can't help too much at this moment, I'll try to do something during the evening. Thanks!
