<p dir="auto">Hey, nice tool you've got here!</p>
<p dir="auto">I am running a simple test with the <code class="notranslate">json-loader</code>, with code like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var foo = require('./package.json');
module.exports = foo.version;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./package.json'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">foo</span><span class="pl-kos">.</span><span class="pl-c1">version</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">My config:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
    context: __dirname,
    entry: &quot;./index.js&quot;,
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: &quot;json&quot;
            }
        ]
    }
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">context</span>: <span class="pl-s1">__dirname</span><span class="pl-kos">,</span>
    <span class="pl-c1">entry</span>: <span class="pl-s">"./index.js"</span><span class="pl-kos">,</span>
    <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
                <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>json<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
                <span class="pl-c1">loader</span>: <span class="pl-s">"json"</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">]</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Let's say I was to author this package on NPM as <code class="notranslate">foo</code>. Now, I'm writing another module called <code class="notranslate">bar</code>, which depends on <code class="notranslate">foo</code>. The code for that new module:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var test = require('foo');
console.log(test)"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">test</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'foo'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">test</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Unfortunately, bundling the above gives me <code class="notranslate">Cannot find module "package.json"</code> errors. Presumably because it doesn't know to use the JSON loader when resolving the <code class="notranslate">foo</code> module.</p>
<p dir="auto">Browserify handles this by putting transforms in the <code class="notranslate">package.json</code>, so that when it reaches that module, it knows to transform it. This seems like a pretty important feature for code re-use and dependency management.</p>
<p dir="auto">Or am I simply missing some configuration?</p>
<p dir="auto">Hello,</p>
<p dir="auto">Somehow that combination isn't working. It is my impression that it should work thanks to the style-loader.</p>
<p dir="auto">My config:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var webpack = require('webpack');

var path = '../server/public/';

module.exports = {
  entry: {
    app: [
      'webpack-dev-server/client?http://localhost:8080',
      './app/main.js'
    ]
  },

  output: {
    filename: 'main.js',
    path: path,
    publicPath: 'http://localhost:8080/assets/'
  },

  module: {
    loaders: [
      { test: /\.js$/,   loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.styl$/, loader: 'style!css!stylus', exclude: /node_modules/ }
    ]
  },

  resolve: {
    extensions: ['', '.js', '.json'] 
  },

  devServer: {
    contentBase: path,
    colors: true,
    progress: true
  },

  plugins: [  
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};"><pre class="notranslate"><code class="notranslate">var webpack = require('webpack');

var path = '../server/public/';

module.exports = {
  entry: {
    app: [
      'webpack-dev-server/client?http://localhost:8080',
      './app/main.js'
    ]
  },

  output: {
    filename: 'main.js',
    path: path,
    publicPath: 'http://localhost:8080/assets/'
  },

  module: {
    loaders: [
      { test: /\.js$/,   loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.styl$/, loader: 'style!css!stylus', exclude: /node_modules/ }
    ]
  },

  resolve: {
    extensions: ['', '.js', '.json'] 
  },

  devServer: {
    contentBase: path,
    colors: true,
    progress: true
  },

  plugins: [  
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};
</code></pre></div>
<p dir="auto">And I call the server like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="webpack-dev-server --hot --inline --config conf/dev.js"><pre class="notranslate"><code class="notranslate">webpack-dev-server --hot --inline --config conf/dev.js
</code></pre></div>
<p dir="auto">I update one .styl file that is required by a javascript one; The patch is downloaded from the server but is then ignored and a full reload ensues.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[HMR] Checking for updates on the server...
main.js:8393 [HMR] Cannot apply update. Need to do a full reload!
main.js:8394 [HMR] Error: Aborted because 235 is not accepted"><pre class="notranslate"><code class="notranslate">[HMR] Checking for updates on the server...
main.js:8393 [HMR] Cannot apply update. Need to do a full reload!
main.js:8394 [HMR] Error: Aborted because 235 is not accepted
</code></pre></div>
<p dir="auto">Strangely enough, the chunk that changed has its parent.hot._acceptedDependencies with an only key of "235235" instead of "235";  Smells like a bug ?</p>