Rails 6/Webpacker not serving static assets to React

Viewed 905

I have a React frontend using Rails 6 as an API. Webpacker is configured to package image files in app/javascript/media to app/javascript/packs. As far as I can tell, Webpack is creating the packs correctly; the packs folder contains my bundle.js, bundle.js map, and the .svg file bundled by webpack. Bundle.js is running fine, but when I try and import the image in a component, I'm getting a routing error stating:

ActionController::RoutingError (No route matches [GET] "/img.svg")

All of the questions I've seen about this mention that static assets don't get served by Rails in production mode without further configuration, but I have Rails in development mode and webpack-dev-server running. Here's my webpack.config.js:

const path = require('path');

module.exports = {
  context: __dirname,
  entry: './frontend/app_name.jsx',
  output: {
    path: path.resolve(__dirname, 'app', 'javascript', 'packs'),
    publicPath: path.resolve(__dirname, 'app', 'javascript', 'packs'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '*']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['@babel/env', '@babel/react']
          }
        },
      },
      {
        test: /\.(png|svg)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  },
  devtool: 'source-map'
};

Update: My routes.rb contains:

Rails.application.routes.draw do

  root 'static#index'
  namespace :api, defaults: { format: :json } do
    resources :search, only: [:index]
  end
end

and my static controller is

class StaticController < ApplicationController

  def index
    render :index 
  end 

end

Should requests for static assets compiled by webpacker even be making it to the backend in a one page app?

0 Answers
Related