Nextjs import external components from parent directory

Question

I have external directory common and I would like to import react components from that directory into web-static. In web-static I am using nextjs.

Currently I having this error:

Module not found: Can't resolve 'react' in '/Users/jakub/Sites/WORK/wilio-web-common/common/src/@vendor/atoms'

I added these lines to next.config.js:

const babeRule = config.module.rules[babelRuleIndex];
if (babeRule && babeRule.test) {
  babeRule.test = /\.(web\.)?(tsx|ts|js|mjs|jsx)$/;
  if (babeRule.include) {
    babeRule.include = [
      ...babeRule.include,
      resolve(__dirname, "../common/src/@vendor"),
    ];
  }
}

config.resolve.alias = {
  ...config.resolve.alias,
  "@vendor": resolve(__dirname, "../common/src/@vendor")
};

My tsconfig.json file:

"paths": {
  "@vendor/*": ["../common/src/@vendor/*"]
}

Webpack can resolve these components but can't resolve installed packages in these components.

../common/src/@vendor/atoms/Test.js
Module not found: Can't resolve 'react' in '/Users/user1/Sites/WORK/web-app/common/src/@vendor/atoms'

Do I need to include this directory also in webpacks config.externals? Current nextjs webpack externals

-----
options.isServer: false
[ 'next' ]
-----
-----
options.isServer: true
[ [Function] ]
-----

How can be this done? Thanks for any help

how do you want to consume those react components? via script tag? Cause then you can add an entry point that compiles all of them and outputs its asset to web-static — Raz Ronen, Aug 17 '20 at 13:16
So why is it important for all output files to be in web-static? Why not just import them from their location? What is the advantages in having web-static folder? — Raz Ronen, Aug 17 '20 at 17:39
What output files? Web-static directory is nextjs app. I want to import react components from external directory `../common` into nextjs directory. — kraizybone, Aug 17 '20 at 18:36
Okay. By output files I mean webpack chunks. Good luck, hope you find your answer. Apparently I lack knowledge in nextJs platform — Raz Ronen, Aug 17 '20 at 19:22

score 19 · Answer 1 · answered Jun 10 '21 at 16:57

19

Starting in Next.js 10.1.2, you can use the currently experimental externalDir option in next.config.js:

module.exports = {
  experimental: {
    externalDir: true,
  },
};

Note that for React components to work, I also had to declare the root package.json as a yarn workspace:

{
  // ...
  "private": true,
  "workspaces": ["next-js-directory"],
  // ...
}

answered Jun 10 '21 at 16:57

Pier-Luc Gendreau

13,553
4
58
69

3

for me this worked without the need to add workspaces to my package.json – Capaj Sep 03 '21 at 12:22
for me too experimental option worked along with dynamic import of parent component inside child component. const Header = dynamic(import('../../home/components/Header.js')); – Swati Singh Aug 24 '22 at 18:02
Using `externalDir` bundles duplicate versions of dependencies. If your next site and your external dependency both `import React`, then you'll get two React libraries bundled which breaks the component. No one uses Yarn anymore so that's not a viable option – Andy Ray May 22 '23 at 01:48
Thank you. My problem was that I was trying to import a typescript interface from outside the /src directory and was getting an error along the lines of `You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file`. Setting `externalDir` to true solved it, didn't need to set any workspaces – empflow Aug 18 '23 at 14:23

Nextjs import external components from parent directory

1 Answers1

Linked