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
– Raz Ronen, Commented Aug 17, 2020 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
– Raz Ronen, Commented Aug 17, 2020 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
– kraizybone, Commented Aug 17, 2020 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
– Raz Ronen, Commented Aug 17, 2020 at 19:22

Pier-Luc Gendreau · Accepted Answer · 2021-06-10 16:57:42Z

20

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, 2021 at 16:57

Pier-Luc Gendreau

13.8k4 gold badges63 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Capaj Over a year ago

for me this worked without the need to add workspaces to my package.json

Swati Singh Over a year ago

for me too experimental option worked along with dynamic import of parent component inside child component. const Header = dynamic(import('../../home/components/Header.js'));

Andy Ray Over a year ago

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

netrolite Over a year ago

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

Collectives™ on Stack Overflow

Nextjs import external components from parent directory

1 Answer 1

4 Comments

Hot Network Questions