Latest version of NextJS and next-transpile-modules getting this when using ThreeJS.

[robksawyer]

The only way I've managed to get this working is to use next@10 and next-transpile-modules@^4.1.0.

Describe the bug Getting the following error when trying to import these classes.

./src/components/MainScene/MainScene.jsx:36:0
Module not found: Can't resolve 'three/examples/jsm/helpers/FaceNormalsHelper'
  34 | // import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
  35 | import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper";
> 36 | import { FaceNormalsHelper } from "three/examples/jsm/helpers/FaceNormalsHelper";
  37 | import { gsap } from "gsap";
  38 | 
  39 | import styles from "./MainScene.module.css";

To Reproduce Setup your next.config.js like this.

/**
 * @file next.config.js
 */
const path = require("path");
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")(
  [
    "three",
    "three-stdlib",
    "three-mesh-bvh",
    "gsap",
    "@react-three/fiber",
    "@react-three/postprocessing",
    "@react-three/drei",
  ],
  { debug: true }
);

const nextConfig = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
  distDir: "build",
  // Removes the [BABEL] Note: The code generator has deoptimised the styling of
  compact: true,
  webpack: (config, options) => {
    const { dev, isServer } = options;
    if (dev) {
      config.module.rules.push(
        {
          test: /\.(spec,test,stories)\.(js|jsx)$/,
          loader: "ignore-loader",
        },
        {
          test: /\.{js,jsx}$/,
          enforce: "pre",
          include: [path.resolve("components"), path.resolve("pages")],
          exclude: ["/node_modules/", "/_next/", "/build/", "/.next/", "/out/"],
          options: {
            // Compile, but with a warning
            emitWarning: true,
          },
          loader: "eslint-loader",
        }
      );
    }

    // Load GLSL Shaders
    config.module.rules.push({
      test: /\.(glsl|vs|fs|vert|frag)$/,
      exclude: /node_modules/,
      use: ["raw-loader", "glslify-loader"],
    });

    // Load GLTF/GLB files
    config.module.rules.push({
      test: /\.(glb|gltf)$/,
      exclude: /node_modules/,
      use: ["file-loader"],
    });

    return config;
  },
  reactStrictMode: true,
};

module.exports = withPlugins(
  [withTM],
  nextConfig
);

Expected behavior I expect the module to load.

Setup

• Next.js version:
• next-transpile-modules version: 8.0.0
• Node.js version: v15.11.0
• npm/yarn version: yarn 1.22.10
• Operating System: OSX
• Webpack 4 or 5: 5

[robksawyer]

Note: I'm running my components in src/components/ not sure if that matters.

[robksawyer]

Ha, import { FaceNormalsHelper } from "three/examples/jsm/helpers/FaceNormalsHelper"; doesn't exist in the package "three": "^0.130.1", that was the issue.

See https://github.com/mrdoob/three.js/releases/tag/r125