Next.js: Upgrade from next v7.2.0 to next v8.0.6-canary, _app.js conflict with webpack resolve config

Created on 14 Jan 2019 · 5Comments · Source: vercel/next.js

Bug report

Describe the bug

If next.config.js consist of resolve rules, and have a _app.js, it will give error during compling as following.

This dependency was not found:

* private-next-pages/_app.js in ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.js

To install it, you can run: npm install --save private-next-pages/_app.js

To Reproduce

Clone the repo
https://github.com/roytsang/bug-report/tree/master/next-v8-canary-appjs
Ensure there is _app.js under pages forlder
Ensure there is resolve rules in next.config.js
Run npm run dev, it will give the above error in console
With either one will not trigger the error

Expected behavior

The code in the repo should not give error, it is work before upgrade.

Source

roytsang

Most helpful comment

@timneutkens I'm having the same issue, can you advise on the proper solution?

I assume the Next.js aliases already exist by the time our webpack function executes?

So, should we do something like the following:

module.exports = {
  // ... other next.js config
  return {
    webpack: config => {
      config.resolve.alias = {
            ...(config.resolve.alias || {}),
            // custom webpack aliases
      }
      return config
    }
  }
}

NathanielHill on 12 Feb 2019

👍9 ❤1

All 5 comments

Note that this is not a bug, you're overriding the webpack config at your own risk and it can be backwards incompatible if you're not taking into account that values might change. In this case you're not taking into account that Next.js might set aliases in the config, which you also have to add.

timneutkens on 14 Jan 2019

@timneutkens I'm having the same issue, can you advise on the proper solution?

I assume the Next.js aliases already exist by the time our webpack function executes?

So, should we do something like the following:

module.exports = {
  // ... other next.js config
  return {
    webpack: config => {
      config.resolve.alias = {
            ...(config.resolve.alias || {}),
            // custom webpack aliases
      }
      return config
    }
  }
}

NathanielHill on 12 Feb 2019

👍9 ❤1

correct, that's what you should do.

timneutkens on 13 Feb 2019

👍2

https://github.com/zeit/next.js/issues/6051#issuecomment-462934252

This solution worked for me, just had to change Obect to Object.