I have created HeaderImage component which contains header image and in that component I import png file. I want to add HeaderImage component to header.js . This may not be Frontity related problem and I guess it just that I don’t know how the whole React system works.
import Background from ‘…/img/metsa.png’;
I got below error and it says “you may need appropriate loader to handle this file type.” I have read that I need either url-loader or file-loader and for it I need to install it or both with npm, which I did.
Then I need to create webpack.config.js file with correct input. But my problem is, that where should I put webpack.config.js file in Frontity directory structure? I guess the correct place is a root, but is it below “Frontity dir” or is it below the theme dir => “mars-theme”? Or am I doing this totally wrong way?
I have tried many things, but I am doing something wrong, because the error just stays there.
ModuleParseError: Module parse failed: Unexpected character ‘�’ (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
at handleParseError (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/webpack/lib/NormalModule.js:447:19)
at doBuild.err (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/webpack/lib/NormalModule.js:481:5)
at runLoaders (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/webpack/lib/NormalModule.js:342:12)
at iterateNormalLoaders (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/Users/marikakononen/Koodaus/KoodausProjektit/GitHub/Frontity-first-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)