javascript - Click to open PDF - You may need an appropriate loader to handle this file type - Stack Overflow

admin管理员组

文章数量:1334342

I'm trying to import a PDF into a .js file in order to have a Click to open pdf into my render.

Importing

import myFile from './assets/files/myfile.pdf';

Rendering

  render() {
return (
      ...
            <a href={myFile}>
              <span>Click to open PDF</span>
            </a>
      ...
)}

Error

myProject.bundle.js:88481 ./assets/files/myfile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Webpack.config.js

I tried several PDF loader without success, the webpack below uses url-loader.

const path = require('path'),
      webpack = require('webpack'),
      CleanWebpackPlugin = require('clean-webpack-plugin'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' });

const config = {
   mode: 'production',

  // absolute path for project root with the 'src' folder
  context: path.resolve(__dirname, 'src'),
  entry: ['babel-polyfill', './main.js'],
  // entry: {
  //   // relative path declaration
  //   app: './main.js'
  // },

  output: {
    // absolute path declaration
    path: path.resolve(__dirname, 'dist'),
    filename: 'myProject.bundle.js',
    publicPath: '/'
  },

  module: {
    rules: [
      // ************
      // * SEE HERE * 
      // ************
      { test: /\.pdf$/, use: 'url-loader' },
      // babel-loader with 'env' preset
      { test: /\.jsx?$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env', 'es2015', 'react', 'stage-0'] } } },
      // html-loader
      { test: /\.html$/, use: ['html-loader'] },
      // sass-loader with sourceMap activated
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ],
          fallback: 'style-loader'
        })
      },
      // file-loader(for images)
      { test: /\.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },
      // file-loader(for fonts)
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] },
    ]
  },

  plugins: [
    // cleaning up only 'dist' folder
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // extract-text-webpack-plugin instance
    extractPlugin
  ],

};

module.exports = config;

Note: I'm testing this on localhost if that makes any difference.

SOLUTION

The problem came from the fact that I wasn't restarting the dev server by running npm run startdev after making some changes.

I'm trying to import a PDF into a .js file in order to have a Click to open pdf into my render.

Importing

import myFile from './assets/files/myfile.pdf';

Rendering

  render() {
return (
      ...
            <a href={myFile}>
              <span>Click to open PDF</span>
            </a>
      ...
)}

Error

myProject.bundle.js:88481 ./assets/files/myfile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Webpack.config.js

I tried several PDF loader without success, the webpack below uses url-loader.

const path = require('path'),
      webpack = require('webpack'),
      CleanWebpackPlugin = require('clean-webpack-plugin'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' });

const config = {
   mode: 'production',

  // absolute path for project root with the 'src' folder
  context: path.resolve(__dirname, 'src'),
  entry: ['babel-polyfill', './main.js'],
  // entry: {
  //   // relative path declaration
  //   app: './main.js'
  // },

  output: {
    // absolute path declaration
    path: path.resolve(__dirname, 'dist'),
    filename: 'myProject.bundle.js',
    publicPath: '/'
  },

  module: {
    rules: [
      // ************
      // * SEE HERE * 
      // ************
      { test: /\.pdf$/, use: 'url-loader' },
      // babel-loader with 'env' preset
      { test: /\.jsx?$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env', 'es2015', 'react', 'stage-0'] } } },
      // html-loader
      { test: /\.html$/, use: ['html-loader'] },
      // sass-loader with sourceMap activated
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ],
          fallback: 'style-loader'
        })
      },
      // file-loader(for images)
      { test: /\.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },
      // file-loader(for fonts)
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] },
    ]
  },

  plugins: [
    // cleaning up only 'dist' folder
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // extract-text-webpack-plugin instance
    extractPlugin
  ],

};

module.exports = config;

Note: I'm testing this on localhost if that makes any difference.

SOLUTION

The problem came from the fact that I wasn't restarting the dev server by running npm run startdev after making some changes.

• javascript
• html
• reactjs
• pdf
• webpack

Share Improve this question Follow edited Sep 6, 2018 at 14:27 gowithefloww asked Sep 5, 2018 at 18:16 gowitheflowwgowithefloww 2,25122 gold badges2222 silver badges3131 bronze badges 1

• have you tried file-loader? – PlayMa256 Commented Sep 5, 2018 at 18:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Include it in the file loader, as you do with images:

{ test: /\.(jpg|png|gif|svg|pdf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },

Note that I have added |pdf after the SVG declaration. Webpack should then process the file as it does with images.

config.module.rules.push({
    test: /\.pdf$/,
    use: {
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]',
        },
    },
});

// vue.config.js configureWebpack 
config.module
    .rule('pdf')
    .test(/\.pdf$/)
    .use('pdf')
    .loader('file-loader')
    .end();

config.module
    .rule('pdf')
    .test(/\.pdf$/)
    .use('file-loader?name=[path][name].[ext]')
    .loader('file-loader')
    .end();

本文标签： javascriptClick to open PDFYou may need an appropriate loader to handle this file typeStack Overflow