I'm trying to import a GeoJSON file on NextJS but it says:
Module parse failed: Unexpected token (2:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
It worked fine when the project was in ReactJS with create-react-app but now that we migrate to NextJS it doesn't.
Maybe I need to configure some loaders on next.config.js but I don't know how to do it
Here is my next.config.js:
const withCSS = require("#zeit/next-css")
const withLess = require('#zeit/next-less');
const withImages = require('next-images')
module.exports = withCSS(withLess({
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
},
lessLoaderOptions: {
javascriptEnabled: true,
},
}));
Can someone help me achieve this?
Okay guys, I managed to do it!
I will try to explain what I wanted to accomplish, what was happening and what do I did.
I wanted to load a geojson data from a file into google maps api to load some layers, so I wanted to use it on map.data.loadGeoJson(imported_file.geojson)
First, I needed to make Nextjs load my file from the source so I installed json-loader
npm i --save-dev json-loader
And then added it to next.config.js
const withCSS = require("#zeit/next-css")
const withLess = require('#zeit/next-less');
const withImages = require('next-images')
module.exports = withCSS(withLess({
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
config.module.rules.push({
test: /\.geojson$/,
use: ["json-loader"]
});
return config;
},
lessLoaderOptions: {
javascriptEnabled: true,
},
}));
And then, no more error message importing the geojson file!
But now, another problem. The layers didn't load! So I read Google Maps API and tried another method to load the geojson.
map.data.addGeoJson(imported_file.geojson)
And it worked! Hope it can help who is in trouble.
Related
I am trying to import multiple GLTF files into my Three.js scene using a LoadingManager, but I am encountering an issue where I can't access the properties of the loaded models. The code seems to be working since I have them loaded correctly. I have stored the loaded models in an object called "loadedModels" but when I try to access them, it gives me an error "Cannot read properties of undefined."
This is my current code. As I said, it loads the files correctly but when I try, for instance, to change each model's coordinates I get the error described before. I tried to put the forEach function inside a setTimeout to check if the problem was that the models were not loading fast enough for me to access it, but that didn't work.
//create the toLoad const where I will type each file url
const toLoad = [
{name: 'monkey', group: new THREE.Group(), url: '3D/monkey.gltf'},
{name: 'plane', group: new THREE.Group(), url: '3D/plane.gltf'}
]
//Create empty object to store the loaded models
const loadedModels = {};
//Create a loadingManager for progress bar
const loadingManager = new THREE.LoadingManager(() => {});
//Create loader loop from multiple local urls
const gltfLoader = new GLTFLoader(loadingManager);
toLoad.forEach(item=>{
gltfLoader.load(item.url, (model)=>{
item.group.add(model.scene);
scene.add(item.group);
loadedModels[item.name] = item.group;
});
});
I am working on a javaScript / react playground (something like very simple codesandbox.io) and I'm trying to figure out how to transpile the code. I was thinking of using Babel transform but the app itself is built using create-react-app so I do not have access to Babel. My question is, if I do something like the following and install Babel, will it also override how create-rect-app currently transpiles the code for the app?
// transpile.js
const babelOptions = {
presets: [ "react", ["es2015", { "modules": false }]]
}
export default function preprocess(str) {
const { code } = Babel.transform(str, babelOptions);
return code;
}
EDIT:
I've since learned that I can use Babel standalone for exactly this use case! Now it's just to figure out how to configure it. I would still appreciate help but if I find a solution first I will post for others :)
Ok so I have figured this out but it is not straight forward. I will try to add some details here in case anyone else finds it helpful.
I first needed to load Babel standalone and so I used this answer to create a custom hook to load a script:
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
console.log(`${url} script loaded`);
return () => {
document.body.removeChild(script);
console.log(`${url} script removed`);
}
}, [url]);
};
export default useScript;
then I used it in my component like this:
import useScript from '../../../hooks/useScript';
useScript("https://unpkg.com/#babel/standalone/babel.min.js");
then I later use the code I wrote in the initial question to transpile my code.
When using the Cameara to take a picture with destinationType: this.camera.DestinationType.FILE_URI, the resulting URL will not work to display the image. For example, when attempting to take a photo like this:
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = url;
}, (err) => {
console.log(err);
});
Attempting to display it as <img [src]="imagePath" > will result in an error (file not found).
The problem here is that the URL is in the file:///storage... path instead of the correct one based on localhost.
In previous versions of Ionic, this would be solved by using normalizeURL. This will not work on Ionic 4 (or at least I could not make it work).
To solve this issue, you will need to use convertFileSrc():
import {WebView} from '#ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = this.webview.convertFileSrc(url);
}, (err) => {
console.log(err);
});
Now the image URL will be in the appropriate http://localhost:8080/_file_/storage... format and will load correctly.
See WKWebView - Ionic Docs for more information.
In my case, the following code works with me
const downloadFileURL = 'file:///...';
// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);
In case some gots here looking for the answer on ionic4, check this out
"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build
and look for the answer from #Alok Singh that's how I got it working on ionic4 and even works with livereload
UPDATE december 2021:
You have to install the new Ionic Webview
RUN:
ionic cordova plugin add cordova-plugin-ionic-webview
npm install #awesome-cordova-plugins/ionic-webview
Import it in app.module and your page where you wanna use it:
import { WebView } from '#awesome-cordova-plugins/ionic-webview/ngx';
image = "";
constructor(private webview: WebView){}
Then this will work:
this.camera.getPicture(options).then((imageData) => {
this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
// Handle error
});
And show it in the HTML page:
<img [src]="image" alt="">
I realize that it is recommended to make a .babelrc file to run tests with Jest according to their docs. But is there any way I could load the babelrc config programmatically and therefore not have to create this file for every React project that I have? Also, I realize I could put something in my package.json file, but I don't want to have to do that either.
You can take advantage of Jest's scriptPreprocessor config setting. I created a file that looked like this and it worked:
const babel = require('babel-core')
const jestPreset = require('babel-preset-jest')
module.exports = {
process: function (src) {
const transformCfg = {
presets: ['es2015', 'react', 'stage-0', jestPreset],
retainLines: true
}
return babel.transform(src, transformCfg).code
}
}
I want to build some sort of offline app with some json data, i want fill my database when app's life cycle is first loading. i used pouchDb in ionic 2, i added PouchDB load plugin and its work fine with this code:
let PouchDB = require('pouchdb');
PouchDB.plugin(require('pouchdb-load'));
initDB() {
this._db = new PouchDB('cities3', { adapter: 'websql' });
this._db.load('../../../assessts/cities.json').then(function () {
console.log("Done loading!");
}).catch(function (err) {
console.log("error while loading!")
});
the output will be Done loading! but when i want to check the data in PouchDB inspector i will get this error:
No PouchDB found
To use the current page with PouchDB-Fauxton, window.PouchDB needs to be set.
i know that i should use window["PouchDB"] = PouchDB; but my question is, where?
You should add it after
this._db = new PouchDB('cities3', { adapter: 'websql' });