Permítanme comenzar diciendo que tengo muy poca experiencia con HTML, javascript y la creación y alojamiento de sitios web en general, así que lo siento de antemano si falta la información que proporciono. Estoy tratando de crear un sitio web usando un objeto 3d de three.js, sin embargo, no se carga nada en el 'servidor en vivo' (cuando subo todo el sitio web a Cpanel), sin embargo, cuando uso el código de Visual Studio para ejecutarlo a través de mi servidor local (a través del comando npm run dev), el sitio web se muestra según lo previsto. He capturado las páginas:
Cuando abro la inspección del elemento en la página rota, aparece el siguiente error a través de la consola:
Error al cargar la secuencia de comandos del módulo: se esperaba una secuencia de comandos del módulo JavaScript, pero el servidor respondió con un tipo MIME de "texto/css". Se aplica una estricta verificación de tipo MIME para los scripts de módulo según la especificación HTML.
y
SyntaxError no capturado: no se puede usar la declaración de importación fuera de un módulo
tengo el siguiente código en mi script.js:
import './style.css' import * as THREE from '../node_modules/three/build/three.module.js' import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js' import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js' import { HemisphereLight, Sphere, SRGB8_ALPHA8_ASTC_12x12_Format, sRGBEncoding, Texture, TextureEncoding } from '../node_modules/three/build/three.module.js' import gsap from '../node_modules/gsap/all.js' var gltfLoader = new GLTFLoader() let tl = gsap.timeline() var diamond = nullTambién estoy usando esto para llamar al script en index.html, sin embargo, no estoy seguro si esta es la forma correcta de llamar al script.
<script type=module src="script.js"></script>¿Cómo podría arreglar esto? ¡Cualquier ayuda sería apreciada!
No.
Comprenda que la funcionalidad de importación del navegador es muy diferente a la de Node, o el desarrollo con un paquete como Webpack. En las importaciones del navegador, los scripts deben ser de tipo module (lo que provoca el error de no poder usar la declaración de importación fuera del módulo) <script type="module" ... (¡con las comillas!). También debe hacer referencia a un archivo de importación que comience con ./ , ../ o / (lo que ya está haciendo). Finalmente, solo puede importar archivos JavaScript, no CSS.
Tienes dos opciones:
import './style.css' y agregue <link rel="stylesheet" href="./style.css" type="text/css" /> en su HTML <head>