ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Accessing react component assets from rails


#1

The problem I’m having is trying to get Rails to access the images. Rails has its images served from its usual app/assets/images directory which is accessed via the url /assets

If however I have a react component and an image in an image directory:

±-component.js
±-images/image.jpg

If I try to reference the image by its relative path within component.js eg When I load the page in rails the page tries to access the url http://localhost:3000/home/images/image.jpg and not the url that rails expects the assets to be http://localhost:3000/assets/images/image.jpg

Does anyone know how to correct this?

This is my webpack.config

const webpack = require('webpack')
const path = require('path')

const devBuild = process.env.NODE_ENV !== 'production'
const nodeEnv = devBuild ? 'development' : 'production'

const config = {
  entry: [
    'whatwg-fetch',
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/index.js'
  ],

  output: {
    filename: 'webpack-bundle.js',
    path: '../app/assets/webpack'
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')
    }
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv)
      }
    })
  ],

  module: {
    loaders: [
      {
        test: require.resolve('react'),
        loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham'
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/, loader: 'file-loader'
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

module.exports = config

if (devBuild) {
  console.log('Webpack dev build for Rails')  // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map'
} else {
  config.plugins.push(
    new webpack.optimize.DedupePlugin()
  )
  console.log('Webpack production build for Rails')  // eslint-disable-line no-console
}

#2

@r11na Are you still having this issue?

Are you accessing the images from CSS? JavaScript? or Rails?


#3

Hi justin,

yes I am still having this issue.

I’m trying to access the image from javascript within the react component. I’m trying to create self contained components that contain all the js and css and images they need to render, so the image path is a subdirectory within the react component.

I’m just not sure how to get webpack to bundle all my images and make them accessible to the react component after sprockets processes them. I couldn’t find an example of working code that did what I want so I gave up for now and am using a clunky work around of getting the image url in rails and passing it into the react component as a prop. For this particularly use case its not bad as it is just a single image but would be great to get this working properly as if the component has dozens of images it gets messy fast…


#4

If you interested, my team could help you work this and other issues out. We offer a coaching plan. Please contact me if you’re interested.