Let me start out by saying that I have very little experience with HTML, javascript and overall website creation and hosting, so sorry in advance if the information I am providing is lacking. I am trying to make a website by using a 3d object from three.js, however, nothing is loading in the 'live server' (when I upload the entire website to Cpanel), however, when I use visual studio code to run it through my local server (through the mand npm run dev) the website is showing as intended. I have screenshotted the pages:

correct page

incorrect page

When I open the element inspect on the broken page, I get the following error through the console:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

and

Uncaught SyntaxError: Cannot use import statement outside a module

i have the following code in my 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 = null

I am also using this to call the script in the index.html, however, I am uncertain if this is the correct way of calling the script.

  <script type=module src="script.js"></script>

How would I be able to fix this? any help would be appreciated!

Let me start out by saying that I have very little experience with HTML, javascript and overall website creation and hosting, so sorry in advance if the information I am providing is lacking. I am trying to make a website by using a 3d object from three.js, however, nothing is loading in the 'live server' (when I upload the entire website to Cpanel), however, when I use visual studio code to run it through my local server (through the mand npm run dev) the website is showing as intended. I have screenshotted the pages:

correct page

incorrect page

When I open the element inspect on the broken page, I get the following error through the console:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

and

Uncaught SyntaxError: Cannot use import statement outside a module

i have the following code in my 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 = null

I am also using this to call the script in the index.html, however, I am uncertain if this is the correct way of calling the script.

  <script type=module src="script.js"></script>

How would I be able to fix this? any help would be appreciated!

• javascript
• html
• three.js

1 Answer 1

No.

Understand that the browser import functionality is very different than that of Node, or development with a bundler like Webpack. In browser imports, scripts have to be of type module (thus causing the cannot use import statement out of module error) <script type="module" ... (with the quotes!). You also need to reference an import file starting with ./, ../, or / (which you already are doing). Finally, you may only import JavaScript files, not CSS.

You have two options:

1. Use a bundler like Webpack to pile your files into a single one (and remove the import statements)
2. (preferred) Remove import './style.css' and add <link rel="stylesheet" href="./style.css" type="text/css" /> in your HTML <head>