Сценарий
Я работаю над групповым проектом, и один из сопровождающих проекта по понятным причинам хочет использовать 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. - package.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);
