webpack-assets.json not found

[kiki-le-singe]

Hello

I get this error:

[webpack-isomorphic-tools] [error] "/[PROJECT_PATH]/webpack-assets.json" not found. Most likely it hasn't yet been generated by Webpack. Using an empty stub instead.

Any ideas to generate it? Or What does empty stub look like?

Thanks for your help

[kiki-le-singe]

I changed my assets imported with import by require and problems are fixed :)

import styles from './Foo.scss'

by

require('./Foo.scss')

Read this may help understand why: What it does and why is it needed?

[catamphetamine]

Oh, I forgot about your issue.

[webpack-isomorphic-tools] [error] "/[PROJECT_PATH]/webpack-assets.json" not found This shouldn't happen at all. Post your entry javascript file where webpack-isomorphic-tools are initialized.

[catamphetamine]

(import styles from './Foo.scss' shouldn't have anything to do with this error)

[kiki-le-singe]

import styles from './Foo.scss' caused this error: [webpack-isomorphic-tools] [error] asset not found: ./src/common/styles/Foo.scss only when none webpack-assets.json has been found.

webpack.dev.config

import webpack from 'webpack'
import path from 'path'
import _debug from 'debug'
import WebpackIsomorphicToolsPlugin from 'webpack-isomorphic-tools/plugin'

import isomorphicToolsConfig from './isomorphic.tools.config'
import projectConfig, { paths } from '../config'

const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(isomorphicToolsConfig)
const debug = _debug('app:webpack:config:dev')
const srcDir = paths('src')
const nodeModulesDir = paths('nodeModules')
const deps = [
  'react-router-redux/dist/ReactRouterRedux.min.js',
  'redux/dist/redux.min.js'
]
const cssLoader = [
  'css?modules',
  'sourceMap',
  'importLoaders=2',
  'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&')

debug('Create configuration.')
const config = {
  context: paths('base'),
  devtool: 'cheap-module-eval-source-map',
  entry: {
    app: [
      'webpack-hot-middleware/client?reload=true',
      paths('entryApp')
    ],
    vendors: projectConfig.VENDOR_DEPENDENCIES
  },
  output: {
    path: paths('build'),
    filename: '[name]-[hash].js',
    publicPath: '/build/'
  },
  resolve: {
    alias: {},
    root: [srcDir],
    extensions: ['', '.js', '.jsx']
  },
  module: {
    noParse: [],
    // preLoaders: [
    //   {
    //     test: /\.js[x]?$/,
    //     loader: 'eslint',
    //     include: [srcDir]
    //   }
    // ],
    loaders: [
      {
        test: /\.js[x]?$/,
        loader: 'babel',
        exclude: [nodeModulesDir],
        include: [srcDir],
        query: {
          cacheDirectory: true,
          presets: ['react-hmre']
        }
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: webpackIsomorphicToolsPlugin.regular_expression('styles'),
        include: [srcDir],
        loaders: [
          'style',
          cssLoader,
          'postcss',
          'sass?sourceMap'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: webpackIsomorphicToolsPlugin.regular_expression('images'),
        loader: 'url?limit=10000'
      }
    ]
  },
  postcss: wPack => ([
    require('postcss-import')({ addDependencyTo: wPack }),
    require('postcss-url')(),
    require('autoprefixer')({ browsers: ['last 2 versions'] })
  ]),
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendors', '[name].[hash].js'),
    new webpack.DefinePlugin({
      __CLIENT__: projectConfig.__CLIENT__,
      __SERVER__: projectConfig.__SERVER__,
      __DEV__: projectConfig.__DEV__,
      __PROD__: projectConfig.__PROD__,
      __DEBUG__: projectConfig.__DEBUG__
    }),
    new webpack.optimize.DedupePlugin(),
    webpackIsomorphicToolsPlugin.development()
  ]
}

// Optimizing rebundling
deps.forEach(dep => {
  const depPath = path.resolve(nodeModulesDir, dep)

  config.resolve.alias[dep.split(path.sep)[0]] = depPath
  config.module.noParse.push(depPath)
})

export default config

webpack.isomorphic.tools.config

import WebpackIsomorphicToolsPlugin from 'webpack-isomorphic-tools/plugin'
import _debug from 'debug'

import projectConfig from '../config'

const debug = _debug('app:webpack:isomorphic:tools:config')

debug('Create configuration.')

export default {
  debug: projectConfig.__DEBUG__,
  assets: {
    images: {
      extensions: ['png', 'jpg', 'jpeg', 'gif', 'ico', 'svg']
    },
    styles: {
      extensions: ['scss'],
      filter (module, regex, options, log) {
        if (options.development) {
          return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log)
        }
        return regex.test(module.name)
      },
      path (module, options, log) {
        if (options.development) {
          return WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log);
        }
        return module.name
      },
      parser (module, options, log) {
        if (options.development) {
          return WebpackIsomorphicToolsPlugin.css_modules_loader_parser(module, options, log);
        }
        return module.source
      }
    }
  }
}

server/index.js

import WebpackIsomorphicTools from 'webpack-isomorphic-tools'

import isomorphicToolsConfig from '../../webpack/isomorphic.tools.config'
import projectConfig, { paths } from '../../config'

const projectBasePath = paths('base')

/**
 * Define isomorphic constants.
 */
global.__CLIENT__ = false
global.__SERVER__ = true
global.__DEV__ = projectConfig.__DEV__
global.__PROD__ = projectConfig.__PROD__
global.__DEBUG__ = projectConfig.__DEBUG__

global.webpackIsomorphicTools =
  new WebpackIsomorphicTools(isomorphicToolsConfig)
    .development(__DEV__)
    .server(projectBasePath, () => {
      require('.')
    })

if (__DEV__) {
  require('./server.dev')
} else {
  require('./server.prod')
}

package.json

  "scripts": {
    "start": "npm run dev",
    "dev": "DEBUG=app:* cross-env NODE_PATH=src babel-node -- src/server/index.js"
  }

[catamphetamine]

global.webpackIsomorphicTools =
  new WebpackIsomorphicTools(isomorphicToolsConfig)
    .development(__DEV__)
    .server(projectBasePath, () => {
      require('.')
    })

if (__DEV__) {
  require('./server.dev')
} else {
  require('./server.prod')
}

Well, if ./server is the actual server code then in should be moved inside

.server(projectBasePath, () => {
      require('.')
    })

Otherwise the assets file wouldn't have been created by the time it runs.

[kiki-le-singe]

yeah it works thanks. I just get this new error: [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) but I fixed it because of this issue Can't generate webpack-assets.json with webpack-isomorphic-tools

thank you very much

[catamphetamine]

FYI I'm posting this in every issue and PR to notify whoever may be interested: today I've released an alternative helper library called universal-webpack. It takes a different approach than webpack-ismorphic-tools and instead of hacking Node.js require() calls it just compiles all code with target: 'node' webpack configuration option. As a result, all Webpack plugins and features are supported. If you think you might need that here's an example project: https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example

[kiki-le-singe]

Ok thanks it is interesting. I'll take a look. In your opinion, what is the better approach to make universal react rendering on server-side with webpack? webpack-isomorphic-tools or universal-webpack?

[catamphetamine]

I would say that if you're starting a new project you may try universal-webpack. Then you can compare it to your past experience and decide what do you like more. universal-webpack has more features (webpack plugins work, etc), therefore I would recommend using it first.

[kiki-le-singe]

Thanks again for your super tools. It works very well :). I made a starter kit which uses it. The Next step is to try universal-webpack.