title: Monorepo with Lerna & Next.JS not working : Module not found
body: <p>Not sure what I am doing wrong. I am trying to setup a monorepo with <code>lerna</code> &amp; <code>nextjs</code> and have been following a tutorial but <a href="https://buttercms.com/blog/nextjs-storybook-and-lerna-build-a-monorepo-structure#connectingfrontandcomponents" rel="nofollow noreferrer">get stuck at this point.</a></p>
  <p>My file structure looks exactly as specified in the tutorial:</p>
  <pre><code>lerna.json
  package.json
  packages
    --- components (React Components)
      --- package.json
      --- ...
    --- frontend (NEXTJS APP)
      --- package.json
      --- ... 
  </code></pre>
  <p>It worked fine so far, but now when I try to import <code>components</code> in my frontend nextjs application, it gives me a <code>Module not found</code> Error:</p>
  <blockquote>
  <p>./pages/index.js:4:0</p>
  <p>Module not found: Can't resolve 'components'</p>
  </blockquote>
  <p>My package.json in the <code>/</code> (root) folder:</p>
  <pre><code>{
    &quot;name&quot;: &quot;root&quot;,
    &quot;private&quot;: true,
    &quot;devDependencies&quot;: {
      &quot;lerna&quot;: &quot;^4.0.0&quot;
    }
  }
  </code></pre>
  <p>package.json in <code>packages/frontend</code> (NextJS App) :</p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;,
      &quot;lint&quot;: &quot;next lint&quot;
    },
    &quot;dependencies&quot;: {
      &quot;components&quot;: &quot;0.0.0&quot;,
      &quot;next&quot;: &quot;11.1.2&quot;,
      &quot;next-transpile-modules&quot;: &quot;^8.0.0&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-dom&quot;: &quot;17.0.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;eslint&quot;: &quot;7.32.0&quot;,
      &quot;eslint-config-next&quot;: &quot;11.1.2&quot;
    }
  }
  </code></pre>
  <p>package.json in the <code>/packages/components</code> folder:</p>
  <pre><code>{
    &quot;name&quot;: &quot;components&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;description&quot;: &quot;&gt; TODO: description&quot;,
    &quot;author&quot;: &quot;Anton&quot;,
    &quot;homepage&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;main&quot;: &quot;dist/index.js&quot;,
    &quot;directories&quot;: {
      &quot;lib&quot;: &quot;lib&quot;,
      &quot;test&quot;: &quot;__tests__&quot;
    },
    &quot;files&quot;: [
      &quot;lib&quot;
    ],
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: run tests from root\&quot; &amp;&amp; exit 1&quot;,
      &quot;dev&quot;: &quot;microbundle watch --jsx React.createElement&quot;
    },
    &quot;source&quot;: &quot;lib/index.js&quot;,
    &quot;devDependencies&quot;: {
      &quot;microbundle&quot;: &quot;^0.13.3&quot;
    }
  }
  </code></pre>
  <p>I have been following the linked tutorial pretty much to the dot, I'm really not sure what's going on here, but then again, I am a beginner/low intermediate and would appreciate some help!</p>