Creating Extra 'public' folders with images inside components

[RDP07]

So the way my app is structured is any component that needs images has a nested /images folder inside each component. I am using the babel-plugin-file-loader to extract the images and move them into the /public/images at the root of the project.

This is my .babelrc config:

  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    [ "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ],
    "transform-class-properties",
    "transform-decorators",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    [ "babel-plugin-webpack-alias", { "config": "./config/build/webpack.config.js" } ],
    [
      "file-loader",
      {
        "name": "[name].[ext]",
        "extensions": ["png", "jpg", "jpeg", "gif", "svg"],
        "publicPath": "/images",
        "outputPath": "/public/images",
        "context": "/"
      }
    ]
  ]
}

My issue is that every time the app builds it creates a /public/images/** directory inside any components that it is pulling the images from. All I want it to do is create the /public/images/** at root not inside each components folder that has an images folder

I have tried messing with the context, publicPath, and outputPath and I can't get it to stop making a new /public folder inside my component folders. I am not sure is this a bug or do I have something configured incorrectly??

[RDP07]

@sheerun Any advice?

[colynb]

I've been struggling with the same issue. It always copies files relative to the folder where the image/asset/file was imported from. No amount of finagling with a combination of outputPath and context makes any difference.

[VictorKolb]

any updates?

[empeje]

any update on this @sheerun ?

[sheerun]

I've updated with-helmet example so it uses nested component but it still puts all assets into single top-level dist/static folder. If you want me to fix this please update this example to reproduce this or create separate repository that reproduces this issue.

[maxsnz]

same here

I made some debug of this, it happens because of line src/index.js:25 const rootPath = state.file.opts.sourceRoot || process.cwd()

and then src/transform.js:121 fs.copySync(filePath, path.join(rootPath, outputPath, url.split('?')[0]))

In runtime state.file.opts.sourceRoot value is the image dir path, that's why image cloning to components folder

If just remove state.file.opts.sourceRoot part – things works as expected

@sheerun can you please take a look? I am not completely understand need of this sourceRoot part

[CristianeMayara]

any updates?

[thenengah]

@sheerun

I've also run into this issue, and it's quite easy to fix in a backwards compatible way. It's a one liner update as well:

https://github.com/sheerun/babel-plugin-file-loader/pull/33

[thenengah]

@yeojz @ahalimkara if you guys have a few extra minutes, could you take a look at my pull request. It's a one line update and everything is backwards compatible.

[jhgeluk]

Also experiencing this