I created a simple React app that has a scene initialized with three.js. Im getting the following error when loading a model with GLTFLoader.
GLTFLoader.js:192 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at GLTFLoader.parse (GLTFLoader.js:317:1)
at Object.onLoad (GLTFLoader.js:212:1)
at three.module.js:40464:1
I imported the following at the top of my App.js component
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
and in my function App() component I did the following:
useEffect(() =>{
const test = new SceneInit('myCanvas');
test.initialize();
test.animate();
// Load model
const glftLoader = new GLTFLoader();
glftLoader.load('./football.glb', (gltfscene) => {
test.scene.add(gltfscene.scene);
})
}, []);
I am positive that the file path to my .glb model is correct and am confused on why the GLTFLoader is not able to read the contents of the file. If I change the file path I get the same exact error. The SceneInit class sets up a basic three.js scene and works correctly with a regular sphere.
Folder Directory
I was able to resolve this by simply putting the model inside the public folder directory. No idea why three.js can't just read the file path directly.
Related
I am trying to integrate the convertapi in my Angular 11 application using the following documentation
https://www.npmjs.com/package/convertapi
I need to convert the pdf's into images,
When I try to upload a file, I get
_path2.default.basename is not a function
Here is how I have implemented this in my component
Import
import ConvertAPI from 'convertapi';
Initiate
const convertapi = new ConvertAPI('my actual api-secret ');
And convert
convertapi.convert('jpg', { File: file }) //'file' is actual file object, also tried pdf url
.then(function(result: any) {
console.log(result)
})
.catch(function(e: any) {
console.log(e.toString()); // this prints out the error message
});
Is there anything I am missing?
This library is a non module, please refer to this question on how to use it with Angular:
Angular 2+ Import a Non Module into TS
This is the documentation: https://github.com/ConvertAPI/convertapi-js
I have the following import statements in my Cloudflare Worker project, to import a html file as a string constant :
import userAgentJsch from './userAgentJsch';
import { parse } from 'cookie';
import test from '.test.html';
It fails with the error:
Module not found: Error: Can't resolve '.test.html' in
I was reading about needing to configure my webpack.config.js file, but I don't have such a file.
Can you please help? I just want to keep my html file separated from the js files, but I can't find a solution I can understand.
View folder structure is used for rendering templates no doubts
to read files in nodejs use this :
const fs = require("fs");
const files = fs.readFileSync("new.html");
and to import
var htmlContent = require('path/to/html/file.html');
Hello I am trying to use yoastseo plugin in NextJS, but when i import it i`m getting some strange errors.
Bellow is my code
import { Researcher, Paper } from 'yoastseo';
const paper = new Paper('Text to analyze', {
keyword: 'analyze',
});
const researcher = new Researcher(paper);
below is what i get in the terminal.
import { AnalysisWebWorker, AnalysisWorkerWrapper, createWorker } from "./src/worker";
^^^^^^
SyntaxError: Cannot use import statement outside a module
And that's what I get in the browser window.
Server Error
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22yoastseo%22 (1:0) # Object.yoastseo
> 1 | module.exports = require("yoastseo");
I used the plugin it with create-react-app without any issues. I guess its related to how NextJS is loading the web worker.
I am on Laravel 8 and am using vue.js v2.6. I am attempting to move all of my Vue.component() declarations out of app.js and declare them in their own file so app.js is less cluttered. So in my project I created a new file js/vueComponents.js and in there I paste all of my vue component declarations. Then in app.js I am attempting to import and Vue.use(require()) but I am getting these errors in the console:
app.js:4301 Uncaught TypeError: $ is not a function
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components...
I am a bit new to importing js files as modules etc...am I not doing this correctly?
vueComponents.js
import * as Vue from 'vue'
export let vueFiles = [
Vue.component('users-page', require('./components/users-page.vue').default),
Vue.component('admin-page', require('./components/admin-page.vue').default),
...20 more components...
];
app.js
import { vueFiles } from './vueComponents.js';
Vue.use(vueFiles);
vueComponents.js
// no need to import Vue.
// Just do this... (no array)
Vue.component('users-page', require('./components/users-page.vue'));
Vue.component('admin-page', require('./components/admin-page.vue'));
app.js
require("./vueComponents.js") // give the correct path.
I am importing .json from .js file: import pca from './pca.js'. Using console.log() outputs correct JSON in the console, but when I am trying to access it in code
pca_json = JSON.parse(pca); (I can remove parsing, not working either)
pca_json["rowname"].forEach(...
webpack fails with an error:
I tried changing extention: .js -> .json but it fails to import the file at all in that case giving me another error:
The pca.js (or pca.json) looks like that:
var pca = {
"rowname" : [
"Ciliated_sensory_neurons",
"Touch_receptor_neurons",
...
...
]
}
export default pca
I tried importing pca.json using fs module but it is not working either. I am getting the error: https://github.com/meteor/meteor/issues/7384
Any suggestions would be greatly appreciated.
Your file is Javascript. Not JSON. JSON is just a string. Anything with var in it is Javascript. The issue is with your javascript code in datumScatterChart.js after you import it. Not with the file you are importing.
You are attempting to do a forEach inside a variable declaration. Change datumScatterChart.js to look like this...
var data = [], shapes = [...];
pca_json["rowname"].forEach(function () { ... });
Notice the semicolon after the variable declartion and before the forEach loop. This is exactly what the error message is telling you Unexpected token , expected ;