Module build failed: No input specified: provide a file name or a source string to process

[xtianus79]

1. Check the version of package you are using. If it's not the newest version, update and try again (see changelog while updating!).
2. If the issue is still there, write a minimal project showing the problem and expected output.
3. Link to the project and mention Node version and OS in your report.
   I am using this version of the plugin...
   "extract-text-webpack-plugin": "^2.0.0-rc.3",

The error message is the following:
RROR in ./src/app/xxxxx/xxxxxx/xxxxx-xxxx.component.scss
Module build failed: No input specified: provide a file name or a source string to process
@ ./src/app/components/global/xxxxx-xxxxx.component.ts 18:17-54
@ ./src/app/components/xxxxxx/index.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:xxxxx webpack/hot/dev-server ./src/xxxxx.ts

Essentially if there is nothing in an scss file it will throw this error... for now i added body {} as a fill in...

I believe a similiar issue is found here on StackOverflow:
http://stackoverflow.com/questions/42151205/webpack-extracttextplugin-extract-module-build-failed-no-input-specified-p

[scottdj92]

can you provide your webpack config?

[xtianus79]

here it is....
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1",
"webpack-merge": "~3.0.0"

[scottdj92]

I mean your configuration file :)

[xtianus79]

@scottdj92 oh sorry :)

module.exports = {
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
},

resolve: {
    extensions: ['*', '.ts', '.js', 'scss', 'sass', '.json']
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.json$/, 
            loader: 'json-loader'
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.(scss|sass)$/,
            include: helpers.root('src/app'),
            exclude: [/\.global\.(scss|sass)$/, 'src'],
            loaders: ['raw-loader?sourceMap', 'sass-loader?sourceMap']
        },
        {
            test: /\.(scss|sass)$/,
            exclude: helpers.root('src/app'),
            loader: ExtractTextPlugin.extract({
                fallbackLoader: 'isomorphic-style-loader',
                loader: 'css-loader?sourceMap!sass-loader?sourceMap'
            })
        },
        {
            test: /\.css$/,
            exclude: helpers.root('src/app'),
            loader: ExtractTextPlugin.extract({ 
                fallbackLoader: 'isomorphic-style-loader', 
                loader: 'css-loader?sourceMap' 
            })
        },
        {
            test: /\.css$/,
            include: helpers.root('src/app'),
            loader: 'raw-loader'
        }
    ]
},

plugins: [
    new CheckerPlugin(),
    
    new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),

    new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('src') // location of your src
    ),

    new webpack.EnvironmentPlugin([
        "NODE_ENV",
        "URL",
        "BASEURL"
    ])

]
};

[scottdj92]

ahh, the syntax changed from webpack 1 to webpack 2. Instead of loaders, switch that to use:

{
  test: /\.(scss|sass)$/,
  include: helpers.root('src/app'),
  exclude: [/\.global\.(scss|sass)$/, 'src'],
  use: ['raw-loader?sourceMap', 'sass-loader?sourceMap']
}

[xtianus79]

so all loaders and loader should be use?

[scottdj92]

It should be, yes. Webpack should have thrown a warning informing you of this, but maybe the sass-loader threw an error before then, and prevented that behavior.

[xtianus79]

ok thanks, i will check this out

and this is as of version?

[scottdj92]

Yup! Webpack 2.2.1.

[xtianus79]

@scottdj92 this still did not do anything. the error still persists

[scottdj92]

Oh, I missed this earlier. You need to add a new ExtractTextPlugin({filename: '[name].css'}); in your plugins array.

[xtianus79]

@scottdj92 what is this option supposed to do... i will read up on it

[xtianus79]

i did what you were saying and it still doesn't work. I didn't even notice anything different with what you were saying.

[scottdj92]

in plugins: [] add new ExtractTextPlugin({filename: '[name].css'});. You need to create the plugin and give it a filename for it to extract text.

Can you post your updated webpack config?

[stephenbaidu]

@xtianus79 Try adding any css to src/index.scss. I had the same error and resolved it with:

// src/index.scss
.a {}

[xtianus79]

@stephenbaidu i know this works but this is not an accurate solution. this should not be happening

[michael-ciniawsky]

#403 should be fixed now

[qasimraza1979]

any reason why leaving scss file empty forces the build to get failed

[alexeycrystal]

The have the same issue.
Thank's to stephenbaidu, problem is now solved. But I also don't think that this is a correct solution... must be another way to fix this.