I am attempting to incorporate a three.js example from the fireship-io YouTube channel to create an animated background on my Python dash application based on user scrolling. The JavaScript script continuously calls a function to update object rotation and camera position.
Although I have successfully run the JavaScript script on its own using node, I encounter an error when trying to call it from my Python scripts, specifically at line 1:
Uncaught SyntaxError: Cannot use import statement outside a module (at main.js?m=1658899110.9005847:1:1)style.css.
How can I resolve this error? Is there a way to specify "type":"module" in Dash when executing JavaScript?
Note: The JavaScript file is automatically called by Dash as it resides in the assets directory. I have added
"type":"module"main.js:
import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
...
app.py:
app = Dash(__name__)
server = app.server
app.layout = html.Div(children=[
...
])
if __name__ == '__main__':
app.run_server(debug=False)
package.json:
{
"name": "three-demo",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"vite": "^2.3.0"
},
"dependencies": {
"three": "^0.128.0"
}
}
Root folder:
app.py
assets/
- main.js
- package.json
- style.css