M
M
Maxim2015-07-12 23:29:09
React
Maxim, 2015-07-12 23:29:09

Why doesn't my React app launch?

The problem appeared on its own, I don’t believe much in it, but still. It seems to have changed nothing, except for the components.
When starting the application after starting the server, it gives an error in the console

Note: The code generator has deoptimised the styling of "/home/max/projects/taui/node_modules/jquery/dist/jquery.js" as it exceeds the max of "100KB".
Note: The code generator has deoptimised the styling of "/home/max/projects/taui/node_modules/lodash/index.js" as it exceeds the max of "100KB".
Note: The code generator has deoptimised the styling of "/home/max/projects/taui/node_modules/immutable/dist/immutable.js" as it exceeds the max of "100KB".

Googling gave the option with query: { compact: false } in babel-loader, but that didn't help.
I will be grateful for help.
My webpack config
/* @flow weak */

"use strict"

var ExtractTextPlugin = require('extract-text-webpack-plugin')
var NotifyPlugin = require('./notifyplugin')
var path = require('path')
var webpack = require('webpack')

var loaders = {
  'jsx': 'babel-loader',
  'js': 'babel-loader',
  'css': 'css-loader',
  'less': 'css-loader!less-loader',
  'scss|sass': 'css-loader!sass-loader',
  'styl': 'css-loader!stylus-loader',
  'eot': 'url-loader',
  'woff': 'url-loader',
  'woff2': 'url-loader',
  'ttf': 'url-loader',
  'svg': 'url-loader',
}

module.exports = function(isDevelopment) {

  function stylesLoaders() {
    return Object.keys(loaders).map(function(ext) {
      var loader = isDevelopment ? 'style-loader!' + loaders[ext] :
        ExtractTextPlugin.extract('style-loader', loaders[ext])
      return {
        loader: loader,
        test: new RegExp('\\.(' + ext + ')$'),
      }
    })
  }

  var config = {
    cache: isDevelopment,
    debug: isDevelopment,
    devtool: isDevelopment ? 'eval-source-map' : '',
    entry: isDevelopment ? [
      'webpack-dev-server/client?http://localhost:8888',
      // Why only-dev-server instead of dev-server:
      // https://github.com/webpack/webpack/issues/418#issuecomment-54288041
      'webpack/hot/only-dev-server',
      './src/client/main.js'
    ] : [
      './src/client/main.js'
    ],
    module: {
      loaders: [{
        exclude: /node_modules/,
        loaders: isDevelopment ? [
          'react-hot', 'babel-loader'
        ] : [
          'babel-loader'
        ],
        test: /\.jsx?$/
      }].concat(stylesLoaders())
    },
    output: isDevelopment ? {
      path: path.join(__dirname, '/build/'),
      filename: 'app.js',
      publicPath: 'http://localhost:8888/build/'
    } : {
      path: 'build/',
      filename: 'app.js'
    },
    plugins: (function() {
      var plugins = [
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: JSON.stringify(isDevelopment ? 'development' :
              'production'),
            IS_BROWSER: true
          }
        })
      ]
      if (isDevelopment)
        plugins.push(
          NotifyPlugin,
          new webpack.HotModuleReplacementPlugin(),
          // Tell reloader to not reload if there is an error.
          new webpack.NoErrorsPlugin()
        )
      else
        plugins.push(
          // Render styles into separate cacheable file to prevent FOUC and
          // optimize for critical rendering path.
          new ExtractTextPlugin('app.css', {
            allChunks: true
          }),
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false
            }
          })
        )
      return plugins
    })(),
    resolve: {
      // To allow require('file') instead of require('file.jsx')
      extensions: ['', '.js', '.jsx', '.json']
    },
  }
  return config
}

compact: false added like this
module: {
      loaders: [{
        exclude: /node_modules/,
        loaders: isDevelopment ? [
          'react-hot', 'babel-loader'
        ] : [
          'babel-loader'
        ],
        test: /\.jsx?$/,
        compact: false
      }].concat(stylesLoaders())
    },

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question