Next.js: next export does't work with custom webpack loaders

[felquis]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

To work properly and frictionless with all kinds of webpack loaders.

Current Behavior

next dev seems to work with custom loaders, but it is very confusing, like what is the version of babel beeing used, you go to tutoriais on the internet and it uses options from older module versions
next build and next export doest integrate well with custom loaders, it thorwn a error.

Steps to Reproduce (for bugs)

Add the loaders to next.config.js

tip: find and run an example that is easy to hack

config.module.rules.push({ test: /\.(jpg|png))/, use: [{ loader: 'file-loader' }, { loader: 'url-loader', options: { limit: 1 } }]})

npm install -S file-loader url-loader

Context

From a fresh new create-next-app project, add a image to /static, import the image at /page/index.js, and use it as a url string <img src={myImage} />, then add the custom loader, and try to

1 - use development server
2 - build and use static version to production (npm i -g serve can help)
3 - build and use production server

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.2 |
| node | 9.4 |
| OS | Windows 10 |

---

[sergiodxa]

We don't recommend the usage of custom loaders for the moment.
https://github.com/zeit/next.js#customizing-webpack-config

Warning: Adding loaders to support new file types (css, less, svg, etc.) is not recommended because only the client code gets bundled via webpack and thus it won't work on the initial server rendering. Babel plugins are a good alternative because they're applied consistently between server/client rendering (e.g. babel-plugin-inline-react-svg).

[timneutkens]

Next.js v5 is going to support this.

[vic08]

we are on v5 now, is it supported already? I'm still getting exception from ssr when using url-loader for svg - it's rendered ok on the client, when rendered on server - returns an error 'unexpected token <'

[arefaslani]

@timneutkens This is my setup for png and jpg images:

...
conf.module.rules.push(
{
  test: /\.(jpe?g|png)$/,
  use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192
        }
      }
    ]
  }
);
...

And when I import an image in one of my pages, I will get the following error:

GET http://localhost:3000/d46ff27102320adcf5f14c437a32b78c.jpg 404 (Not Found)
main.js:4530 Warning: Prop `src` did not match. Server: "d46ff27102320adcf5f14c437a32b78c.jpg" Client: "/_next/webpack/d46ff27102320adcf5f14c437a32b78c.jpg"

P.S. I'm using Next v5

[timneutkens]

Looks like you'll have to configure fallback to a custom file-loader configuration https://github.com/webpack-contrib/url-loader#options

And then set https://github.com/webpack-contrib/file-loader#options

publicPath: '/_next/static/images' and outputPath: 'static/images'

Something like this should work (haven't tested it):

conf.module.rules.push(
{
  test: /\.(jpe?g|png)$/,
  use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192,
          fallback: {
             loader: 'file-loader',
             options: { publicPath: '/_next/static/images', outputPath: 'static/images' }
          }
        }
      }
    ]
  }
);

[timneutkens]

Also, feel free to create a plugin for this on your own github (not next-plugins), I'm sure a lot of people will like it 👍 🙏

[arefaslani]

This worked for me:

conf.module.rules.push(
{
  test: /\.(jpe?g|png)$/,
  use: [
      {
        test: /\.(jpe?g|png|svg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              fallback: "file-loader",
              publicPath: "/_next/",
              outputPath: "static/images/",
              name: "[name]-[hash].[ext]"
            }
          }
        ]
      }
    ]
  }
);

Also, feel free to create a plugin for this on your own github (not next-plugins), I'm sure a lot of people will like it 👍 🙏

Sure I will if I can do it 👍

[timneutkens]

Feel free to @arefaslani 🙏

[vic08]

So was it a problem with fallback for url-loader? I thought 'file-loader' is a default value for fallback

[timneutkens]

publicPath: "/_next/",
outputPath: "static/images/",

otherwise it ends up in a non-served path.

[felquis]

I'm very happy with next 5 the plugin approach will help us a lot, thanks @timhuff https://github.com/zeit/next.js/issues/3586#issuecomment-365230746

I'm already using it here https://github.com/felquis/static-website

[timhuff]

@felquis I'm guessing you meant @timneutkens?

[timhuff]

@timneutkens I'm thinking I accidentally got mentioned because I'm now a contributor for adding a single line to a README on a sample project. So we're both put first in the mentions and "timh" comes before "timn". Do you know if there's a way to delist myself as a contributor so we can make everyone's life a little easier when it comes to mentions?

[timneutkens]

@timhuff I don't think we can on our side, you might be able to send a support request to github 🤔

[timhuff]

Alright. Support request sent. It sounds silly but I can see this being a pain for a lot of commenters. If I had made an actual contribution, it'd be different but I almost wish I had told a friend to update the README. It seems that the real solution here is to introduce code to the mentions resolver that puts priority on mentions of the owner.

[timneutkens]

👍 Sorry for the inconvenience 🙏

[timhuff]

Hah. I think this is on me. But I guess you did accept the pull request. For shame.