CODEWITHSUNDEEP
ruby-on-railswebpack
Dan
Dan

Reputation: 1246

Webpacker can't resolve image paths in CSS

In a Rails project I've added Webpacker and a node module called fancybox.

The fancybox module css file has references to images like so "../img/blank.gif"

After importing the modules CSS file into my pack I now see the error: "Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../img/blank.gif' in ...."

What changes do I need to make to webpacker to resolve these image paths?

config/webpack/environment.js for reference:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    'window.Tether': 'tether',
    Popper: ['popper.js', 'default'],
  })
)
// yarn add expose-loader -D
environment.loaders.append('expose',{
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$',
  },
  {
    loader: 'expose-loader',
    options: 'jquery',
  }],
})

module.exports = environment

Upvotes: 0

Views: 820

Answers (1)

Dan
Dan

Reputation: 1246

The issue was resolved by removing fancybox 2 and adding fancybox 3 (the version I actually wanted)

yarn remove fancybox
yarn add @fancyapps/fancybox

Credit to this anwer: How to use fancybox with webpack?

Upvotes: 1

Related Questions