Webpack source path contains loaders info in webpack-stats.json and it causes error "asset not found".

[sergesemashko]

First of all, thanks for such a great and useful tool.

I have the following error when I'm trying to requre .scss file in my React app:

import React, {Component} from 'react';

export default class BannerAd extends Component {
  render() {
    const styles = require('./Ads.scss');

    return (
      <div className={styles.bannerAdWrapper}>
        <div className={styles.bannerAd}>{this.props.ad}</div>
      </div>
    );
  }
}

console:

[1] [webpack-isomorphic-tools] [debug]  requiring ./components/Ad/Ads.scss
[1] [webpack-isomorphic-tools] [error] asset not found: ./components/Ad/Ads.scss

webpack-stats.json:

{
  "javascript": {
    "main": "http://localhost:3001/dist/main-3e2673a8359a316eb4cc.js"
  },
  "styles": {},
  "assets": {
    "/myproject/~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!/myproject/~/autoprefixer-loader?browsers=last 2 version!/myproject/~/sass-loader?outputStyle=expanded&sourceMap!/myproject/components/Ad/Ads.scss": {
      "boxAdWrapper": "boxAdWrapper___2ASei",
      "bannerAdWrapper": "bannerAdWrapper___2xr1Z",
      "boxAd": "boxAd___1q-Nw",
      "bannerAd": "bannerAd___VeW6w",
      "_style": "..."
    }
  }
}

I have a custom path callback workaround in my config, but would be great to have such cases resolved out of the box.

// WebpackIsomorphicToolsPlugin config
var path = require('path');
module.exports = {
      ...
      path: function(mod, options, log) {
        var loaders = mod.name.split('!');
        var name = mod.name
        if (loaders.length) {
          name = loaders[loaders.length - 1];
          name = './' + path.relative(options.project_path, name);
        }
        return name;
      },
      parser: WebpackIsomorphicToolsPlugin.css_modules_loader_parser
    }
  }
}

Thanks,
Sergey

[catamphetamine]

Well, we have style_loader_path_extractor for that now
https://github.com/halt-hammerzeit/webpack-isomorphic-tools/blob/master/source/plugin/plugin.js#L207-L210

The strange thing is that your path is /myproject/components/Ad/Ads.scss instead of ./components/Ad/Ads.scss.
I didn't see such absolute paths before.
Maybe your webpack is set up wrong or something else

[sergesemashko]

I've just tried style_loader_path_extractor, however I got the same error because paths are absolute in webpack-stats.json:

{
  "javascript": {
    "main": "http://localhost:3001/dist/main-3e2673a8359a316eb4cc.js"
  },
  "styles": {},
  "assets": {
    "/myproject/example/components/Ad/Ads.scss": {
      "boxAdWrapper": "boxAdWrapper___2ASei",
      "bannerAdWrapper": "bannerAdWrapper___2xr1Z",
      "boxAd": "boxAd___1q-Nw",
      "bannerAd": "bannerAd___VeW6w",
      "_style": "..."
    }
  }
}

I'm using https://github.com/erikras/react-redux-universal-hot-example boilerplate, so webpack config is almost the same except few lines, see them highlighted below as CHANGED:

module.exports = {
  devtool: 'inline-source-map',
  context: rootDir, // CHANGED. absolute path to project root, /myproject
  entry: {
    'main': [
      // use webpack-hot-middleware from koa-webpack-hot-middleware dependencies
      'koa-webpack-hot-middleware/node_modules/webpack-hot-middleware/client.js?path=http://' + host + ':' + port + '/__webpack_hmr', // CHANGED
      path.relative(rootDir, process.env.CLIENT) // CHANGED. relative path of project rootDir to client.js
    ]
  },
  output: {
    path: assetsPath,
    filename: '[name]-[hash].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: 'http://' + host + ':' + port + '/dist/'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /hydra\/node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
      { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },
  progress: true,
  resolve: {
    modulesDirectories: [
      'src',
      'node_modules'
    ],
    extensions: ['', '.json', '.js']
  },
  plugins: [
    // hot reload
    new webpack.HotModuleReplacementPlugin(),
    new webpack.IgnorePlugin(/webpack-stats\.json$/),
    new webpack.DefinePlugin({
      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: true,
      __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
    }),
    webpackIsomorphicToolsPlugin.development()
  ]
};

Not really sure where absolute paths are coming from. @halt-hammerzeit, does it make sense to add check for absolute path to style_loader_path_extractor?

NodeJS version is 5.0.0

[catamphetamine]

Well, there are two CHANGED lines.

Try to output these values to the console.log

rootDir
path.relative(rootDir, process.env.CLIENT)

[sergesemashko]

Console logged them:

• rootDir: /Users/<user>/Sites/react-redux - the alias of /myproject from previous message
• path.relative(rootDir, process.env.CLIENT): client.js

[catamphetamine]

try to manually write ./client.js instead of path.relative(rootDir, process.env.CLIENT) and then run your project.

[sergesemashko]

I figured out the weird issue with paths. I have uncommon project structure and I was loading webpack from node_modules of parent directory, so that's probably why webpack made all paths absolute. I placed everything in one folder and it works fine now.
Thanks for the help and for style_loader_path_extractor hint.
closing the issue.