webpack - Next.js 看似错误的消息“SyntaxError: Cannot use import statement outside a module”

问题描述

设想

我正在从事一个小组项目，可以理解的是，其中一位项目维护者想要使用 Next.js。我们在项目中使用了 three.js，在利用 GLTFLoader 的同时，我遇到了一些意想不到的事情。

SyntaxError: Cannot use import statement outside a module

这似乎是由于进口了GLTFLoader类似的东西

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

我有点理解为什么会发生这种情况，但请检查一下：如果我注释掉该import行并刷新浏览器，那么我会看到一个没有预期错误的页面。现在页面正在热重新加载，如果我取消注释GLTFLoader导入以及GLTFLoader代码，那么一切都会按预期工作！

但

如果我手动刷新页面，我会收到初始SyntaxError消息和描述，并且必须相应地注释掉和取消注释代码。

问题

为什么会这样？这是 Next.js 问题而不是 Webpack 问题吗？最终，我该如何解决这个问题？

尝试

import { GLTFLoader } from 'three-full'; // material.customProgramCacheKey is not a function

import { GLTFLoader } from 'three'; TypeError: three__WEBPACK_IMPORTED_MODULE_3__.GLTFLoader is not a constructor

new THREE.GLTFLoader(); TypeError: three__WEBPACK_IMPORTED_MODULE_3__.GLTFLoader is not a constructor

import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js'; // Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "https:" URIs.

包.json{ "type": "module }
等等等等

next.config.js 这似乎很合适，因为这里可能需要添加一些东西

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push(
      // ...

      // Shaders
      {
        test: /\.(glsl|vs|fs|vert|frag)$/,
        exclude: /node_modules/,
        use: ['raw-loader'],
      }
    );
    return config;
  },
};

** 编辑 **

我想我找到了解决方法 https://onion2k.hashnode.dev/loading-a-gltf-model-in-react-three-fiber

** 临时解决方案 **

import { useGLTF } from '@react-three/drei'

const assetURL = "/asset/scene.gltf";
const Asset = useGLTF(assetURL);

scene.add(Asset.scene)

useGLTF.preload(assetURL);

标签： webpackimportthree.jsnext.js

webpack - Next.js 看似错误的消息“SyntaxError: Cannot use import statement outside a module”

问题描述

解决方案

推荐阅读