Babel support for files outside the root next directory

[chrisdrackett]

Feature request

Is your feature request related to a problem? Please describe.

Right now if you alias code outside of the main next directory fast refresh will not work with that code. Ideally the code could also trigger a fast refresh

Describe the solution you'd like

enable fast refresh on all code

Describe alternatives you've considered

The code in question is shared between multiple projects so I can't easily move it into the next directory. Not sure if there are other potential solutions.

[Timer]

I've removed Fast Refresh from the title because this feature request is not related to that feature directly. The issue is that Next.js only compiles your application's code via Babel.

[Timer]

Closing this as a duplicate of #706, as all code outside of your page root is treated as "external code", including node_modules.

Please note this has probably uncovered another issue in your app: that you're not compiling a portion of your code!

[chrisdrackett]

ah, in that case I'm surprised things are even working at all ;)

[Timer]

Have you customized your webpack configuration in next.config.js?

[chrisdrackett]

we had this all working before with module-resolver in babel config and next-transpile-modules in next.config.js I was hoping I could replace all that with the aliases that already existed in our tsconfig.json but seems like that isn't the case

[chrisdrackett]

I hadn't actually gotten to the build step as I was first trying to get fast refresh working as that is what I was most excited about ;)

[chrisdrackett]

@Timer I'm slightly confused because even with out next-transpile-modules things look to be transpired. Maybe I'm not evaluating that compiled code correctly.. I'll keep digging

[chrisdrackett]

@Timer maybe I'm reading parts of this wrong, but using aliases from my tsconfig.json some of the comments seem to suggest that code will not be transpired? #11293

that would explain what I'm seeing where the build looks correct.

[Timer]

Could you share a full demo? It'll help so we're both on the same page.

[chrisdrackett]

yeah, let me setup a test case

[chrisdrackett]

@Timer here is an example repo: https://github.com/chrisdrackett/next-external-test

Notable here is that fast refresh works with the file in external so I feel like this might be doable now. I just need to figure out how my repo is different from this one

[taylor-lindores-reeves]

Can confirm that this custom babel config stops Fast Refresh from working normally:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "modules": "commonjs",
          "targets": {
            "browsers": ["last 2 versions", "ie >= 11"]
          }
        }
      }
    ]
  ]
}

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.