Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ModuleParseError: Module parse failed: Unexpected character '' (1:6) #303

Closed
MetaMemoryT opened this issue Nov 5, 2018 · 6 comments
Closed

Comments

@MetaMemoryT
Copy link

''''
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
Copy link
Member

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

@MetaMemoryT
Copy link
Author

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
Copy link
Member

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

@danwild
Copy link

danwild commented Mar 20, 2019

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'
}

@onetdev
Copy link

onetdev commented Jun 4, 2020

@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
Copy link

@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'
          }
        ]
      }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants