asset not found: ./~/flexboxgrid/dist/flexboxgrid.css in 0.9.5

[kai23]

Hi all,

I'm using the boilerplate from erikras and I'm having trouble with the version 0.9.5. It worked well with the 0.9.4.

The error is this one :

[webpack-isomorphic-tools] [error] asset not found: ./~/flexboxgrid/dist/flexboxgrid.css

my webpack config looks like this :

require('babel-polyfill');

// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;

// https:/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};

try {
  babelrcObject = JSON.parse(babelrc);
} catch (err) {
  console.error('==>     ERROR: Error parsing your .babelrc.');
  console.error(err);
}


var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};

// merge global and dev-only plugins
var combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);

var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
delete babelLoaderQuery.env;

// Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add
// the babel plugin react-transform-hmr manually here.

// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
var reactTransform = null;
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
  var plugin = babelLoaderQuery.plugins[i];
  if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
    reactTransform = plugin;
  }
}

if (!reactTransform) {
  reactTransform = ['react-transform', {transforms: []}];
  babelLoaderQuery.plugins.push(reactTransform);
}

if (!reactTransform[1] || !reactTransform[1].transforms) {
  reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}

// make sure react-transform-hmr is enabled
reactTransform[1].transforms.push({
  transform: 'react-transform-hmr',
  imports: ['react'],
  locals: ['module']
});

module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, '..'),
  entry: {
    'main': [
      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
      'font-awesome-webpack!./src/theme/font-awesome.config.js',
      './src/client.js'
    ]
  },
  output: {
    path: assetsPath,
    filename: '[name]-[hash].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: 'http://' + host + ':' + port + '/dist/'
  },
  module: {
    loaders: [
      { test: /\.js?$/, exclude: /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: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' },
      { test: /\.css/, loader: "style!css?modules"}
    ]
  },
  progress: true,
  resolve: {
    modulesDirectories: [
      'src',
      'node_modules'
    ],
    extensions: ['', '.json', '.js', '.jsx', '.scss', '.css']
  },
  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()
  ]
};

Do you have any idea where it could come from ?

[Ugarz]

Exact same situation here ! 👍

[roylee0704]

do you have flexboxgrid.css under this path ./~/flexboxgrid/dist/?

Hey @kai23, @Ugarz

Could you possibly add the following entry under resolve.modulesDirectories[]?

path.resolve(__dirname, './node_modules')

and the resultant js after added the entry:

  resolve: {
    modulesDirectories: [
      'src',
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ],
    extensions: ['', '.json', '.js', '.jsx', '.scss', '.css']
  }

And let me know if it works for you? :)

[kai23]

Hey,

I really don't understand why, but I don't have the issue. I didn't change anything. This morning, I just delete my node_modules folder, launched npm install and it works. Il already did that like 10 times last friday…

Hope it will work for @Ugarz too !

[Ugarz]

For now I'm just having trouble with webpack-dev-server.
But according the stack error I don't have any flexbox error : rm -rf node_modules/ && npm installfixed this strangely too.

[kai23]

Yeah I have this too :

[webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/flexboxgrid/dist/flexboxgrid.css" has no source. Maybe Webpack compilation of this module failed. Skipping this asset.

[silvenon]

I'm not familiar with isomorphic tools, but what I do know is that your configuration is trying to apply these loaders to flexboxgrid: css!extract-text-webpack-plugin!style!css, which seems wrong (css-loader is applied twice and none of them has ?modules). Do you have some other loader configuration (with ExtractTextPlugin) which affects flexboxgrid?

I updated webpack configuration docshttps:/roylee0704/react-flexbox-grid#basic-webpack-configuration, so you can try to follow those in your implementation.

[kai23]

Alright.

Adding include: /flexboxgrid/ work for the dev config. It doesn't show the first error anymore.

But still get the error with this webpack.config :

{
  test: /\.css$/, 
  loader: ExtractTextPlugin.extract('style', 'css'),
  include: path.join(__dirname, 'node_modules'), 
  exclude: /flexboxgrid/
}

!./../../style-loader/addStyles.js.webpack-module:15
    return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                               ^
ReferenceError: window is not defined
    at !./../../style-loader/addStyles.js.webpack-module:15:30
    at !./../../style-loader/addStyles.js.webpack-module:10:47
    at module.exports (!./../../style-loader/addStyles.js.webpack-module:32:68)
    at Object.<anonymous> (/path/to/project/~/flexboxgrid/dist/flexboxgrid.css.webpack-module:8:59)
    at Module._compile (module.js:413:34)
    at Object._module3.default._extensions.(anonymous function) [as .webpack-module] (/path/to/project

[kai23]

Ninja Edit :

{ test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css'), include: /flexboxgrid/}

works :)

[roylee0704]

contrib to doc: react-redux-universal-hot-example #26

[silvenon]

@kai23 __dirname returns the current directory, which is webpack (I tripped on that one too). You should navigate outside:

path.join(__dirname, '../node_modules')

Your ninja edit is also fine if you want all of your CSS files (except flexboxgrid) to be processed like that 😉