title: Click to open PDF - You may need an appropriate loader to handle this file type
body: <p>I'm trying to import a PDF into a .js file in order to have a <code>Click to open pdf</code> into my render.</p>
  
  <p><strong>Importing</strong></p>
  
  <pre><code>import myFile from './assets/files/myfile.pdf';
  </code></pre>
  
  <p><strong>Rendering</strong></p>
  
  <pre><code>  render() {
  return (
        ...
              &lt;a href={myFile}&gt;
                &lt;span&gt;Click to open PDF&lt;/span&gt;
              &lt;/a&gt;
        ...
  )}
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>Webpack.config.js</strong></p>
  
  <p>I tried several PDF loader without success, the webpack below uses <code>url-loader</code>.</p>
  
  <pre><code>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;
  </code></pre>
  
  <p><strong>Note:</strong> I'm testing this on localhost if that makes any difference.</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>The problem came from the fact that I wasn't restarting the dev server by running <code>npm run startdev</code> after making some changes.</p>