title: How to import modules from a folder outside node modules in next js
body: <p>I've been struggling with importing example modules from <a href="https://threejs.org/" rel="noreferrer">three.js</a>, I have used <strong>next.js (a server-side react framework)</strong> in my project with a custom server in express. My <strong>server code</strong> looks like this -</p>
  
  <pre><code>const express = require('express');
  const next = require('next');
  
  const favicon = require('serve-favicon');
  var path = require('path');
  let fs = require('fs')
  
  const dev = process.env.NODE_ENV !== 'production';
  const nextApp = next({ dev });
  
  nextApp.prepare()
      .then(() =&gt; {
  
          let server = express(), options = {}, PORT = 3000, app = express()
  
          if (dev) {
              // DEVELOPMENT ///
  
              // DEVELOPMENT ///  
          }
          else {
              // PRODUCTION ///
  
              options = {
                  ...options
              }
              // PRODUCTION ///
          }
  
          server.use(favicon(path.join(__dirname, "/favicon.ico")))
  
  
          server.get('/', (req, res) =&gt; {
              const actualPage = '/';
              nextApp.render(req, res, actualPage);
          });
  
          server.get('*', (req, res) =&gt; {
              const actualPage = '/not-found';
  
              nextApp.render(req, res, actualPage);
              // return handle(req, res)
          });
  
  
          server.listen((PORT), (err) =&gt; {
              if (err) throw err
              console.log('&gt;&gt; Ready on ' + PORT)
          })
  
      })
  
      .catch((ex) =&gt; {
          console.error(ex.stack)
          process.exit(1)
      })
  </code></pre>
  
  <p>I basically ran a npx create-next-app and configured a <a href="https://nextjs.org/docs#custom-server-and-routing" rel="noreferrer">custom express server</a> in my next.js project for dynamic routing as you can see in the code above.</p>
  
  <p>Then, I used three.js to create a scene in a home component which is imported and rendered in my App.js file. My home.js component looks like this -</p>
  
  <pre><code>import React, { useState, useEffect } from 'react'
  import * as THREE from 'three'
  import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
  
  import "../src/assets/sass/home.scss"
  
  const X = () =&gt; {
  
  let parent, renderer, scene, camera, TrackballControls
  
  useEffect(() =&gt; {
  
      // renderer
      renderer = new THREE.WebGLRenderer()
      renderer.setSize( window.innerWidth, window.innerHeight )
      document.body.appendChild( renderer.domElement )
  
      // scene
      scene = new THREE.Scene()
  
      // camera
      camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 )
      camera.position.set( 20, 20, 20 )
  
      // controls
      controls = new TrackballControls( camera )
      controls.minDistance = 5
      controls.maxDistance = 250
      controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
      controls.dampingFactor = 0.05;
  
      // axes
      // scene.add(new THREE.AxisHelper( 20 ))
  
      // geometry
      let geometry = new THREE.SphereGeometry( 2, 8, 6, 0, 6.3, 0, 3.1)
  
      // material
      let material = new THREE.MeshBasicMaterial({
          wireframe: true,
          wireframeLinewidth: 1
      })
  
      let sphere = new THREE.Mesh( geometry, material )
  
      // parent
      parent = new THREE.Object3D()
      scene.add( parent )
      scene.add( sphere )
  
      function animate() {
          requestAnimationFrame( animate )
          parent.rotation.z += 0.01
          controls.update()
          renderer.render( scene, camera )
      }
  
      animate()
  }
  
  ,[])
  
  return &lt;div&gt;&lt;/div&gt;
  }
  
  export default X
  </code></pre>
  
  <p><strong>Now here's the problem I'm facing</strong> - I'm importing an example module from three.js called TrackballControls which is not exactly inside the core three module, but in a folder outside it as you can see from the path - <strong><em>'three/examples/jsm/controls/TrackballControls.js'</em></strong>. You can see more here - <a href="https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules" rel="noreferrer">Importing es6 modules separately</a> . But somehow, it's not working. It's throwing an error like </p>
  
  <p><a href="https://i.stack.imgur.com/ypbRZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ypbRZ.png" alt="this"></a></p>
  
  <p>I tried doing the same thing using a simple create-react-app, the import totally works!! So I know there is a problem with my server side code, and I am assuming it's a webpack related issue. But I don't really have any idea about webpack. Someone please help me, for it will be highly appreciated!</p>
  
  <p>Here's my <strong>next.config.js</strong> file if it helps -</p>
  
  <pre><code>const withSASS = require('@zeit/next-sass')
  
  const { parsed: localEnv } = require('dotenv').config()
  const webpack = require('webpack')
  // const path = require('path')
  
  function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
      'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    )
    config.module.rules.forEach(rule =&gt; {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u =&gt; {
        if (u.loader === 'css-loader' &amp;&amp; u.options) {
            delete u.options.minimize
      }
    })
  }
  })
  }
  
  module.exports = withSASS(
    {
        webpack(config) {
          HACK_removeMinimizeOptionFromCssLoaders(config)
          config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
  
          return config
    }
    })
  </code></pre>