jmurzy / jmurzy/babel-plugin-transform-assets

Using this plugin prevents webpack from outputting images

Open
#5 3 comments 1 reaction 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
31
Forks
7
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.