Using this plugin prevents webpack from outputting images

[Gabri3l]

I have been trying to solve the Unexpected character issue with SSR. This plugin helps in a way but I feel like there's a conflict with webpack file-loader or there's something I am missing. I am using "file-loader": "^0.11.2" and "babel-plugin-transform-assets": "^0.2.0". This is my loader configuration in my webpack.config.js:

   rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'images/',
            name: '[name].[ext]'
          }
        }
      },
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      }
    ]

Now if I simply run this without the plugin, it creates a folder in my public one where all the images are stored, so everything goes as expected. Unfortunately this throws the mentioned error if I try to do SSR.

I then remove everything that webpack generated (bundle and images) in order to simulate a clean slate, I add this plugin to my .babelrc config file as per docs, I run webpack -p to create the bundle for production BUT no image folder is generated at all this time. The Unexpected character error is now gone but I have no images. These are the plugins I am using:

 "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    "dynamic-import-webpack",
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "production": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        ["transform-assets", {
          "extensions": ["jpg"],
          "publicPath": "images/",
          "name": '[name].[ext]'
        }]
      ]
    }
  }

These steps were pretty simple so I am not sure if I am doing something wrong (most likely) or if this plugin doesn't play well with file-loader with this setup. I even tried outputting the images directly into the public folder thus removing publicPath from the transform-assets config.

[zurfluh]

I am facing the same problem. Any update on this?

[nsunga]

hey @Gabri3l did u ever find a solution for SSR-ing webpack assets? Looks like u were trying to do png|jpg|gif assets

Im also facing the same issue

[Gabri3l]

Hey @nsunga it's been quite a while so I don't really recall, do you have a simple way to reproduce this so maybe I can give it a quick look.