Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Importing a pdf file in nextJs 13

I am building a portfolio site and want to add a button to download my resume. The pdf file is in the /public/resume.pdf . I want to import the file to a react component where I can the traditional <a href=ResumePDF download>Download the resume</a>. I’m having this error:

./public/resume.pdf
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)

I assume I’ve to change the next config file, but don’t know that. Please advice…

Edit:
This is my current next config file (next.config.mjs since I’ve mdx config )-

import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
}
 
const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
})
 
// Merge MDX config with Next.js config
export default withMDX(nextConfig)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Downloaded the file loader npm package and changed the config file as shown...

    import remarkGfm from 'remark-gfm';
import createMDX from '@next/mdx';

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  webpack: (config, { isServer }) => {
    // Add a rule to handle PDF files
    config.module.rules.push({
      test: /.(pdf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            publicPath: '/_next/',
            name: 'static/media/[name].[hash].[ext]',
          },
        },
      ],
    });

    if (!isServer) {
      // Ensure that the file-loader is applied to the client as well
      config.resolve.fallback.fileSystem = false;
    }

    return config;
  },
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
});

// Merge MDX config with Next.js config
export default withMDX(nextConfig);

  2. 0

    Let me know if this helps

    next.config.js
module.exports = {
    webpack: (config, { isServer }) => {
        config.module.rules.unshift({
            test: /pdf.worker.(min.)?js/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[contenthash].[ext]",
                        publicPath: "_next/static/worker",
                        outputPath: "static/worker"
                    }
                }
            ]
        });
        return config;
    }
};

    This works for me, you need add some loaders to the next.config.js

    Daniel

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search