Mini-css-extract-plugin: ModuleParseError: Module parse failed: Unexpected character '' (1:6)

[MetaMemoryT]

''''
ERROR in ./node_modules/photoswipe/dist/default-skin/default-skin.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:6)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
at handleParseError (/Users/sean/p/react-utils-lite/node_modules/webpack/lib/NormalModule.js:432:19)
at doBuild.err (/Users/sean/p/react-utils-lite/node_modules/webpack/lib/NormalModule.js:466:5)
at runLoaders (/Users/sean/p/react-utils-lite/node_modules/webpack/lib/NormalModule.js:327:12)
at /Users/sean/p/react-utils-lite/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/Users/sean/p/react-utils-lite/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at Array. (/Users/sean/p/react-utils-lite/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/Users/sean/p/react-utils-lite/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/Users/sean/p/react-utils-lite/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /Users/sean/p/react-utils-lite/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3)
@ ./src/photoswipe-demo.js 3:8-203
@ ./src/index.js
@ multi idempotent-babel-polyfill ./src/index.js
''''

[alexander-akait]

@MetaMemoryT You need setup file-loader, also please describe issue more verbosely

[MetaMemoryT]

Could this be because mini-css-extract-plugin cannot parse a symbol with double "__" underscores?
This is the line where the parser fails I think:

.pswp__button {

[alexander-akait]

@MetaMemoryT Looks you have invalid configuration, we use photoswipe and all works fine

[danwild]

Yep - I think this tends to crop up when people use the mini-css-extract-plugin to processes css which references other resources like png's, svg's etc. which are not otherwise configured to be handled by webpack.

You probably need to add something like:

{
  test: /\.(ttf|eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: 'file-loader'
}

[orosznyet]

@danwild Thank you so much. I was trying to import icomoon style and first I thought there might be some issue with style-loader. It turns out the font imports were the problem (woff, ttf, otf).

This error is pretty misleading and meaningless though, a file path would've been useful:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)

[davewilton]

@orosznyet add --stats-children and it would have reported the file types or at least it did for me. I had the same issue, add to add loads for fonts and images.
I had to add

      {
        test: /\.(ttf|eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      }