babel-loader doesn't run on symlinked files

[vjpr]

https://github.com/zeit/next.js/blob/1bcd2e0575c40b577380b0bc5ad5104111cbf510/server/build/webpack.js#L181-L186

The include: [dir] means that only files in the current tree can be transpiled.

Say you have a dir like:

/app
  - next.config.js
  - packages
    - foo
    - symlinked-package -> /src/symlinked-package

The symlinked package is resolved to its "realpath" (/src/symlinked-package instead of /app/packages/symlinked-package) by webpack. The include: [dir] prevents symlinked dirs from being transpiled.

I am wondering what is the reason for having the include option?

Your Environment

Tech	Version
next	5
node	8
OS	macOS
browser	Chrome
etc

---

Workaround

function supportSymlinkedFilesInNextBabelLoader(config) {
  const nextBabelLoader = config.module.rules.find(({use, include, test}) => {
    if (!use) return
    return use.loader === 'babel-loader' && test.toString() === '/\\.+(js|jsx)$/'
  })
  if (!nextBabelLoader) return
  nextBabelLoader.include = undefined
}

[jthegedus]

@vjpr The discussions here #3018 and here #3732 seem related and might be useful to you.

[majelbstoat]

@vjpr: having a similar issue with typescript outside of the main root. Managed to solve that part with a modified version of your snippet, thanks! Do any of the modules you're importing themselves import npm packages? I'm having a follow-on issue where, for example, 'immutablejs' cannot be found, because it's looking for it relative to the "real" home of the symlinked code. Trying to figure out whether that's a typescript, ts-loader, or webpack related thing.

For people also having ts issues, here's the modified snippet I'm using:

function supportSymlinkedFilesInNextTypescriptLoader(config) {
  const nextTypescriptLoader = config.module.rules.find(({ use, include, test }) => {
    const isTypescriptLoader = use && use.length && use.find(({ loader }) => loader === 'ts-loader')
    return isTypescriptLoader && test.toString() === '/\\.+(ts|tsx)$/'
  })
  if (!nextTypescriptLoader) return
  nextTypescriptLoader.include = undefined
}

Update: I got this working end-to-end by also setting resolve.symlinks to false. (https://webpack.js.org/configuration/resolve/#resolve-symlinks)

if (!config.resolve) {
  config.resolve = {}
}
config.resolve.symlinks = false

[majelbstoat]

Unfortunately, this no longer seems to work for Next 6 and next-plugin-typescript 1.0.0, which moved to using babel-loader as well.

The files are found, and executed, but if the file is outside the main tree, typescript compilation does not happen:

 error  in ./lib/editor/constants/BlockType.ts

 Syntax Error: enum is a reserved word (1:0)

 > 1 | enum BlockType {
     | ^
   2 |   Image = 'image',
   3 |   Text = 'text',

where most of the code resides under ./app and is compiled correctly. If I put exactly the same file under './app/lib, there's no issues.

The updated function I'm using is:

function supportSymlinkedFilesInNextBabelLoader(config) {
  config.module.rules.forEach(({ use, include, test }, i) => {
    const isBabelLoader = use && use.loader === 'babel-loader'
    const isTSFile = test.toString() === '/\\.(ts|tsx)$/'
    const isJSFile = test.toString() === '/\\.(js|jsx)$/'
    if (isBabelLoader && (isTSFile || isJSFile)) {
      delete config.module.rules[i].include
    }
  })
}

Explicitly setting include to have both paths, rather than deleting it, does not work either. Have tried lots of different approaches to get this to work, but no luck. Will be stuck on Next 5.1 until there's a workaround.

[majelbstoat]

For others struggling with this, in Next 6 the loader is now next-babel-loader not babel-loader. And, you'll need to make sure your .babelrc file is in the root folder so that it is used for both the app-specific code, and the common code (or have one .babelrc in each location.)

With those changes, I have it working for next 6.0.3 and next typescript plugin 1.0.1.

[mstn]

@majelbstoat thanks for digging out. I wonder if you can share your config files. I am using Next 6 with Typescript. I am facing the same problem with symlinks (lerna).

My settings for the Next app

// next.config.js
const withTypescript = require('@zeit/next-typescript'); // v 1.0.1

module.exports = withTypescript();

// .babelrc
{
    "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
    ]
}

I copied .babelrc inside symlinked packages without success.

[majelbstoat]

My babelrc is the same as yours. However, I have a single babelrc file sitting in my root directory. You may need to run with NODE_PRESERVE_SYMLINKS=1. My nodemon looks like this:

  "execMap": {
    "ts": "NODE_PRESERVE_SYMLINKS=1 ts-node --project tsconfig.server.json"
  }

(I'm using a custom server for routing.)

[mstn]

@majelbstoat thanks. However, as far as I can tell, ts-node should not use babel loader.

[majelbstoat]

ts-node runs the custom server. webpack/nextjs use babel loader. But symlinks don't work without that environment variable for me 🤷‍♂️ .

[timneutkens]

Tracking this here: #706