Webpack alias does not work when alias is outside of next root

Bug report

Describe the bug

Let’s say that you have your NextJS root at ./next and your React components in ./client. Now, when you configure a webpack alias to ./client/components with @components and use it in ./next/pages/Page.js - the build will fail with this error:

➜  next-webpack-issue git:(master) yarn build
yarn run v1.15.2
$ next build ./next
Creating an optimized production build ...

Failed to compile.

../app/pages/Index.js 1:21
Module parse failed: Unexpected token (1:21)
You may need an appropriate loader to handle this file type.
> export default () => <div>Hello World!</div>;
|

> Build error occurred
Error: > Build failed because of webpack errors
    at Object.build [as default] (/home/jsarnowski/Workshop/next-webpack-issue/node_modules/next/dist/build/index.js:192:15)
    at process._tickCallback (internal/process/next_tick.js:68:7)
error Command failed with exit code 1.

To Reproduce

Here’s an easy reproduction repo: https://github.com/sarneeh/zeit-next.js-issues-7234

Just run yarn install and yarn build after that.

Expected behavior

I expect the alias to work.

System information

• OS: Ubuntu 18.04
• Version of Next.js: 8.x and also 7.x

[Kielan]

I as a developer still expect the alias to work or a description in documentation of aspects of the next.js framework which break when doing otherwise ‘normal’ Webpack configuration such as module aliasing in combination with workspaces. It should at least be documented where the node ssr or client javascript breaks due to the framework’s implementation.

[tronjs]

ok @sarneeh, I finally got this to work by adding custom rules in webpack config, somethings like this:

// next.config.js
module.exports = withTypescript({
    ...
    distDir: '../../.next',
    webpack(config, options) {
        config.module.rules.push({
           test: /\.(ts|tsx)$/,
           include: [path.join(__dirname, 'src/lib')],
           use: [
             {
               loader: 'next-babel-loader',
               options: {
                  asyncToPromises: false,
                  cwd: path.join(__dirname, 'src/lib'),
                  isServer: false,
               },
             },
           ],
        });
      return config;
    }
    ...
});

I just tried this config pattern for both my own project and your issue repo and it just works fine Thank you for your webpack-merge suggestion, maybe someday i will use it if the config become more complexly