Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Module not found: Error: Can't resolve 'fs' in... - CSS Modules / PostCSS #499

Closed
dace opened this issue May 9, 2017 · 3 comments
Closed

Comments

@dace
Copy link

dace commented May 9, 2017

Hi, I'm getting the following list of fs errors when trying to use ExtractTextWebpackPlugin with CSS Modules and PostCSS.

I'm using Node 6.10.3 and Extract Text Webpack Plugin 2.1.0.

Here is a sampling of my list of errors:

ERROR in ./~/fsevents/~/node-pre-gyp/lib/info.js
Module not found: Error: Can't resolve 'fs' in '/Users/dace/Code/demo/node_modules/fsevents/node_modules/node-pre-gyp/lib'
 @ ./~/fsevents/~/node-pre-gyp/lib/info.js 7:9-22
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/watchpack/lib/DirectoryWatcher.js
 @ ./~/watchpack/lib/watcherManager.js
 @ ./~/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib ^.*$
 @ (webpack)/lib/webpack.js
 @ ./webpack.config.js
 @ multi ./index.js ./webpack.config.js

ERROR in ./~/fsevents/~/node-pre-gyp/lib/reveal.js
Module not found: Error: Can't resolve 'fs' in '/Users/dace/Code/demo/node_modules/fsevents/node_modules/node-pre-gyp/lib'
 @ ./~/fsevents/~/node-pre-gyp/lib/reveal.js 7:9-22
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/watchpack/lib/DirectoryWatcher.js
 @ ./~/watchpack/lib/watcherManager.js
 @ ./~/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib ^.*$
 @ (webpack)/lib/webpack.js
 @ ./webpack.config.js
 @ multi ./index.js ./webpack.config.js

ERROR in ./~/fsevents/~/node-pre-gyp/lib/publish.js
Module not found: Error: Can't resolve 'fs' in '/Users/dace/Code/demo/node_modules/fsevents/node_modules/node-pre-gyp/lib'
 @ ./~/fsevents/~/node-pre-gyp/lib/publish.js 7:9-22
 @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
 @ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
 @ ./~/fsevents/fsevents.js
 @ ./~/chokidar/lib/fsevents-handler.js
 @ ./~/chokidar/index.js
 @ ./~/watchpack/lib/DirectoryWatcher.js
 @ ./~/watchpack/lib/watcherManager.js
 @ ./~/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib ^.*$
 @ (webpack)/lib/webpack.js
 @ ./webpack.config.js
 @ multi ./index.js ./webpack.config.js

...

Here is my setup in my webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssImport = require('postcss-import');
const postcssMixins = require('postcss-mixins');
const postcssNested = require('postcss-nested');
const postcssNext = require('postcss-cssnext');

module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?modules',
            'postcss-loader',
          ],
        }),
      },
      {
        test: /\.svg$/,
        loader: 'svg-url-loader',
        options: {
          noquotes: true,
        }
      },
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          postcssImport,
          postcssMixins,
          postcssNested,
          postcssNext,
        ],
      },
    }),
    new ExtractTextPlugin('bundle.css'),
  ],
};

Any and all help is appreciated. Thanks!

@alexander-akait
Copy link
Member

alexander-akait commented May 9, 2017

@hidace seems bug not in ETWP, try to update node to lts. Also your can add

node: {
  fs: "empty"
}

to webpack config.

@alexander-akait
Copy link
Member

@hidace similar issue webpack-contrib/css-loader#447

@dace
Copy link
Author

dace commented May 9, 2017

Yeah, the more I read into it, the more it looks like a Node issue, rather than related to ETWP. Closing, thanks.

@dace dace closed this as completed May 9, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants