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

webpack 2: Error in ... doesn't export content #282

Closed
fraziermork opened this issue Nov 8, 2016 · 17 comments
Closed

webpack 2: Error in ... doesn't export content #282

fraziermork opened this issue Nov 8, 2016 · 17 comments

Comments

@fraziermork
Copy link

fraziermork commented Nov 8, 2016

I am trying to follow the instructions in the readme in the simplest test-case possible and encountering errors. I am using webpack 2.1.0-beta.25 and extract-text-webpack-plugin 2.0.0-beta.4. Below is webpack config:

'use strict';

const webpack     = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const PATHS = {
  entry: `${__dirname}/app/entry`, 
  build: `${__dirname}/build`,
};

let entry = {
  app: [
    PATHS.entry,
  ],
};

let output = {
  path:     PATHS.build,
  filename: '[name].bundle.js',
};

let plugins = [
  new CleanPlugin('build'),
  new ExtractTextPlugin({
    filename:  '[name].bundle.css', 
    allChunks: true, 
  }),
  new HtmlWebpackPlugin({
    template: `${__dirname}/app/main/index.html`,
  }),
];


let rules = [
  {
    test:    /\.js$/, 
    include: `${__dirname}/app`,
    use: [
      {
        loader: 'babel',
      },
    ],
  },
  {
    test:    /\.css$/, 
    include: `${__dirname}/app`,
    use: ExtractTextPlugin.extract({
      loader:         'css-loader', 
      fallbackLoader: 'style-loader',
    }),
  },
];

let webpackModule = {
  rules,
};

module.exports = {
  plugins,
  entry, 
  output, 
  module: webpackModule, 
  stats: {
    reasons:      true, 
    errorDetails: true, 
  },
};

For reference, my entry.js looks like this:

import './main/main.css';
import './main';

This is the error I'm getting:

clean-webpack-plugin: /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/build has been removed.
Hash: 0b89f46da75eeff003b3
Version: webpack 2.1.0-beta.25
Time: 1022ms
        Asset       Size  Chunks             Chunk Names
app.bundle.js     7.3 kB       0  [emitted]  app
   index.html  186 bytes          [emitted]  
   [3] multi app 28 bytes {0} [built]
    + 3 hidden modules

ERROR in ./app/main/main.css
Module build failed: ModuleParseError: Module parse failed: /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/app/main/main.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| html {
|   background-color: red;
| }
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.finished (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:39:16)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)

ERROR in ./app/main/main.css
Module build failed: ModuleParseError: Module parse failed: /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/app/main/main.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| html {
|   background-color: red;
| }
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.finished (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:39:16)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)

ERROR in ./app/main/main.css
Module build failed: ModuleParseError: Module parse failed: /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/app/main/main.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| html {
|   background-color: red;
| }
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:207:34
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:164:10
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:365:3
    at iterateNormalLoaders (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:206:10)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.provide (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:160:24)
    at processResource (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:194:11)
    at iteratePitchingLoaders (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:153:10)
    at runLoaders (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/loader-runner/lib/LoaderRunner.js:357:2)
    at NormalModule.doBuild (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:131:2)
    at NormalModule.build (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModule.js:179:15)
    at Compilation.buildModule (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/Compilation.js:127:9)
    at Compilation.<anonymous> (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/Compilation.js:404:8)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:726:13
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:52:16
    at async.forEachOf.async.eachOf (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:236:30)
    at _parallel (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:717:9)
    at Object.async.parallel (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:731:9)
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/webpack/lib/NormalModuleFactory.js:154:11
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:726:13
    at /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:52:16
    at async.forEachOf.async.eachOf (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:236:30)
    at _parallel (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:717:9)
    at Object.async.parallel (/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/async/lib/async.js:731:9)

ERROR in /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!style-loader!css-loader!/Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/app/main/main.css doesn't export content
Child extract-text-webpack-plugin:
       [0] ./app/main/main.css 254 bytes {0} [built] [failed] [1 error]
    
    ERROR in ./app/main/main.css
    Module parse failed: /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/app/main/main.css Unexpected token (1:5)
    You may need an appropriate loader to handle this file type.
    | html {
    |   background-color: red;
    | }
Child html-webpack-plugin for "index.html":
        + 4 hidden modules
Child extract-text-webpack-plugin:
       [0] ./app/main/main.css 254 bytes {0} [built] [failed] [1 error]
    
    ERROR in ./app/main/main.css
    Module parse failed: /Users/fraziermork/independent_coding/my-gh-repos/webpack-2-sandbox/app/main/main.css Unexpected token (1:5)
    You may need an appropriate loader to handle this file type.
    | html {
    |   background-color: red;
    | }

I'm not sure what the difference is between my code and the instructions in the readme. Here is the repo with the current code.

@fraziermork
Copy link
Author

It turns out that the problem was that I had my rule set up as:

{
    test:    /\.css$/, 
    include: `${__dirname}/app`,
    use: ExtractTextPlugin.extract({
      loader:         'css-loader', 
      fallbackLoader: 'style-loader',
    }),
  },

instead of

{
    test:    /\.css$/, 
    include: `${__dirname}/app`,
    loader: ExtractTextPlugin.extract({
      loader:         'css-loader', 
      fallbackLoader: 'style-loader',
    }),
  },

Basically, the code breaks for 'use', but not for 'loader'. It's my understanding that they are supposed to be the same thing for webpack 2. If that's the case, this may need to be fixed.

@ilya-git
Copy link

I have used few hours to figure what's going on (and I actually did not, but went into recent issues and found this). Thanks a lot for sharing the solution. I think this is quite a critical issue in fact, since the docs suggest to use "use", but it does not work without any hint that you should use "loader". Hope this is fixed soon

@renarsvilnis
Copy link
Contributor

Related #265

@leggomuhgreggo
Copy link

@fraziermork thanks! changing use to loader did the trick.

@bertho-zero
Copy link

It's only way that works for me:

{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            {
              loader: 'css-loader',
              query: {
                modules: true,
                importLoaders: 2,
                sourceMap: true
              }
            }, {
              loader: 'autoprefixer-loader',
              query: {
                browsers: 'last 2 version'
              }
            }, {
              loader: 'sass-loader',
              query: {
                outputStyle: 'expanded',
                sourceMap: true,
                sourceMapContents: true
              }
            }
          ]
        })
      }

Changing use to loader

@brandonburkett
Copy link

use -> loader worked for me as well. Banged my head for a half a day on this one.

@bebraw bebraw closed this as completed Jan 9, 2017
farcejofre added a commit to farcejofre/react-toolbox-webpack2 that referenced this issue Jan 22, 2017
@ashraffayad
Copy link

I get the same error ".css doesn't export content" after updating the plugin from 2.0.0-beta.4 to 2.0.0-rc.2

my config is as following:

{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style',
            loader: 'css?' + 'minimize&sourceMap&importLoaders=1!postcss'
        })
    },
    {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style',
            loader: 'css?' + 'minimize&sourceMap&importLoaders=2!postcss!resolve-url!sass?&sourceMap'
        })
    }

detailed error:

ERROR in ./src/index.scss
Module build failed: Error
    at /media/ashraf/projects/node_modules/webpack/lib/NormalModule.js:141:35
    at /media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at iterateNormalLoaders (/media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
    at /media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:233:3
    at context.callback (/media/ashraf/projects/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.onRender (/media/ashraf/projects/node_modules/sass-loader/index.js:289:9)
    at Object.<anonymous> (/media/ashraf/projects/node_modules/sass-loader/node_modules/async/dist/async.js:2234:31)
    at apply (/media/ashraf/projects/node_modules/sass-loader/node_modules/async/dist/async.js:20:25)
    at Object.<anonymous> (/media/ashraf/projects/node_modules/sass-loader/node_modules/async/dist/async.js:56:12)
    at Object.callback (/media/ashraf/projects/node_modules/sass-loader/node_modules/async/dist/async.js:840:16)
    at options.success (/media/ashraf/projects/node_modules/node-sass/lib/index.js:303:32)

ERROR in /media/ashraf/projects/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/media/ashraf/projects/node_modules/style-loader/index.js!/media/ashraf/projects/node_modules/css-loader/index.js?minimize&sourceMap&importLoaders=2!/media/ashraf/projects/node_modules/postcss-loader/index.js!/media/ashraf/projects/node_modules/resolve-url-loader/index.js!/media/ashraf/projects/node_modules/sass-loader/index.js?&sourceMap!/media/ashraf/projects/components/Image/src/index.scss doesn't export content

@bebraw
Copy link
Contributor

bebraw commented Jan 30, 2017

@ashraffayad Did you try use: ExtractTextPlugin.extract as instructed in the readme?

@ashraffayad
Copy link

@bebraw Actually yes. I tried the following. I still get the same error

{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: "css-loader"
        })
    },
    {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: ["css-loader?importLoaders=1","resolve-url-loader","sass-loader?sourceMap","postcss-loader"]
        })
    }

@bebraw
Copy link
Contributor

bebraw commented Jan 30, 2017

@ashraffayad Can you open a separate issue with an example (repository)? I can't fix with partial information.

@ashraffayad
Copy link

Thanks. I will do that.

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Jan 30, 2017

{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: "css-loader"
        })
    },
    {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
-            loader: ["css-loader?importLoaders=1","resolve-url-loader","sass-loader?sourceMap","postcss-loader"]
+           loader: [ 
+             { loader: 'css-loader', options: { importLoaders: 3, sourceMap: true } }, 
+             'resolve-url-loader', 
+             'postcss-loader', 
+             { loader: 'sass-loader', options: { sourceMap: true } }
+           ]
        })
    }

@ashraffayad Can you show your postcss.config.js please, are you using postcss-scss+ stylelint ?

IMPORTANT
Source maps required
Note that source maps must be enabled on any preceding loader. In the above example we use sass?sourceMap.

So maybe also

- 'postcss-loader'
+ { loader: 'postcss-loader', options: { sourceMap: true } }

@ashraffayad
Copy link

ashraffayad commented Jan 30, 2017

@michael-ciniawsky Thanks for the effort. I will try the configuration you suggested. The problem appeared after I ran npm update .
So I restored the old package.json and the node_modules folder, deleted the old plugin folder, updated the package.json with the new version manually, then ran npm install
now it works fine.

I configure postcss that way:

new webpack.LoaderOptionsPlugin({
        options: {
            postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
            context: process.cwd(), // Required for the sourceMap of css/sass loader
            debug: false,
            minimize: true
        },
    }),

Don't mind the context: process.cwd(). It has not to do with the error :)

update:
I tried your config. It works. I understand I made a mistake when trying to follow the readme instructions. The old config I used was correct. It is just the short way, as mentioned here: https://webpack.github.io/docs/loaders.html
{
test: /.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: 'css?' + 'minimize&sourceMap&importLoaders=3!postcss!resolve-url!sass?&sourceMap'
})
}

Thanks you all. For me, the problem is solved.

@towry
Copy link

towry commented Mar 15, 2017

loader option has been deprecated - replace with "use"

@hero-guo
Copy link

hero-guo commented Apr 7, 2017

So how to solve?

@towry
Copy link

towry commented Apr 7, 2017

See this solution: towry/n#67

@oodzchen
Copy link

I've got the same error and I just solved it. For me, it's because I didn't use the BannerPlugin in a right way. Just change the input value, remove the extra *, and now it's fine.

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