Как импортировать модули из папки вне узловых модулей в следующем js

Question

Я пытался импортировать примеры модулей из three.js , я использовал next.js (инфраструктура реагирования на стороне сервера) в моем проекте с пользовательским серверомв экспресс. Мой код сервера выглядит следующим образом -

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(() => {

        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) => {
            const actualPage = '/';
            nextApp.render(req, res, actualPage);
        });

        server.get('*', (req, res) => {
            const actualPage = '/not-found';

            nextApp.render(req, res, actualPage);
            // return handle(req, res)
        });


        server.listen((PORT), (err) => {
            if (err) throw err
            console.log('>> Ready on ' + PORT)
        })

    })

    .catch((ex) => {
        console.error(ex.stack)
        process.exit(1)
    })

Я в основном запустил npx create-next-app и настроил пользовательский экспресс-сервер в своем проекте next.jsдля динамической маршрутизации, как вы можете видеть в приведенном выше коде.

Затем я использовал three.js для создания сцены в домашнем компоненте, который импортируется и отображается в моем файле App.js. Мой компонент home.js выглядит следующим образом -

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 = () => {

let parent, renderer, scene, camera, TrackballControls

useEffect(() => {

    // 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 <div></div>
}

export default X

Теперь вот проблема, с которой я сталкиваюсь - я импортирую пример модуля из three.js под названием TrackballControls, который не совсемвнутри основного модуля три, но в папке вне его, как вы можете видеть по пути - 'three / examples / jsm / controls / TrackballControls.js' . Вы можете увидеть больше здесь - Импорт модулей es6 отдельно . Но почему-то это не работает. Выдает ошибку вроде

Я пытался сделать то же самое с помощью простого приложения create-реагировать, импорт полностью работает !! Итак, я знаю, что есть проблема с моим кодом на стороне сервера, и я предполагаю, что это проблема, связанная с веб-пакетом. Но я не имею никакого представления о веб-пакете. Кто-то, пожалуйста, помогите мне, потому что это будет высоко оценено!

Вот мой файл next.config.js , если это поможет -

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 => {
      if (Array.isArray(rule.use)) {
          rule.use.forEach(u => {
      if (u.loader === 'css-loader' && u.options) {
          delete u.options.minimize
    }
  })
}
})
}

module.exports = withSASS(
  {
      webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config)
        config.plugins.push(new webpack.EnvironmentPlugin(localEnv))

        return config
  }
  })

Answer 1

Я знаю, что здесь никого нет, чтобы увидеть это, но я публикую свое решение, если кто-то столкнется с этой проблемой в будущем. Итак, вот что я понял -

Я не упомянул в своем вопросе, что я использую интегрированную среду SSR (рендеринга на стороне сервера), называемую next.js. Импорт прекрасно работает с приложением чистого реагирования. Но в инфраструктуре на стороне сервера вещи, связанные с импортом, должны выполняться внутри useEffect (или componentDidMount) вместе с остальными вещами Threejs. Таким образом, я динамически импортировал его так -

let dynamicallyImportPackage = async () => {
let TrackballControls

await import('three/examples/jsm/controls/TrackballControls')
// you can now use the package in here
.then(module => {
    TrackballControls = module.TrackballControls
})
.catch(e => console.log(e))

return TrackballControls
}

, затем я использовал его в моем использованииЭффект, например, -

let TrackbackControls = await dynamicallyImportPackage()

// controls
controls = new TrackbackControls(camera, container)
controls.minDistance = 5
controls.maxDistance = 250

Аригато Госаймасу!