CODEWITHSUNDEEP
reactjspdfwebpackimportpreact
RomanistHere
RomanistHere

Reputation: 892

Webpack pdf file loader

This is the error:

"Build failed!

× ERROR ./media/fonts/handFont3.otf 1:4.

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./index.js 3:0-37 @ ../node_modules/preact-cli/lib/lib/entry.js @ multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server"

I'm trying to import pdf into preact component to make it build so I can get the link to the page with pdf file. Here is how:

import pdfFile from '../../media/images/pdfFile.pdf'

<a href={pdfFile} target="_blank"...

It didn't work, so I Googled this two solutions to add in wepback.config.js:

module.exports = {
module: {
    rules: [
        {
            test: /\.(png|svg|jpg|gif|pdf)$/,
            use: ['file-loader']
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: ['file-loader']
        },
    ]
},

};

and

{
  test: /\.(pdf)$/,
  use: ['url-loader']
},

I do manually make webpack.config work by this string:

--config webpack.config.js

And file is working, but result is the same. I'm still getting the error. And the same with otf fonts.

Thank you.

Upvotes: 0

Views: 3315

Answers (1)

RomanistHere
RomanistHere

Reputation: 892

I figured out the solution. You can't use webpack config with preact config together.

So I removed webpack config and changed preact one to this:

export default (config, env, helpers, options) => {
    const rule = {
        test: /\.(otf|pdf)$/,
        loader: 'file-loader'
    }
    config.module.rules.push(rule);
}

Upvotes: 0

Related Questions