I'm trying to add angular 2 google maps to my existing angular 2 project.
I have almost succeeded. Now the only error I get is
Uncaught TypeError: require is not a function
Apparently the offending line is line 1 in my main google maps third party library file: google-map.ts.
The line is:
import {Component, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChange} from '#angular/core';
Which is weird because it doesn't say require in the line. How do I make sure require is defined as a function?
When I had this error, it was because Angular couldn't find a component. If you check the network tab in the browser development tools of the offending page and look at the response tab for each file. Make sure the response is the actual file you expect (at present angular will not 404 if it can't find a component file)
Related
I built my Vue 3 project with Vite. I was in need of some plugins for my app. I have tried importing both of them. I have installed both with npm i vue-i18n vue-flag-icon and tried importing both of them independently.
// In main.js
import VueI18n from 'vue-i18n' // error
This gives the following error:
main.js:4 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-i18n.js?v=4951897a' does not provide an export named 'default' (at main.js:4:8)
// In main.js
import FlagIcon from 'vue-flag-icon' // error
This crashes the app with the following error:
[[ERROR] Could not resolve "./icon/Flag"
node_modules/vue-flag-icon/components/index.js:1:17:
1 │ import Flag from './icon/Flag'
╵ ~~~~~~~~~~~~~
I have tried both of these in a non-Vite project with the standard vue-cli and it works flawlessly. Is there something I need to do for it to work with Vite?
I fixed the first import by using this line:
// In main.js
...
import {createI18n} from 'vue-i18n' // no error
// Whereafter I can use the function I need to set the plugin.
const i18n = createI18n({
locale: 'en', // set locale
fallbackLocale: 'nl', // set fallback locale
messages, // set locale messages
}
createApp(App).use(i18n)
...
I understand that I imported the function to make an instance of I18n instead of importing the whole object. But I do not understand why that works or why I would need to do that.
I also have no idea the second plugin doesn't work, I have heard that Vue 2 plugins don't work on Vue 3 and that plugin is 5 years old, so I assume it's made for Vue 2. Anyways, that doesn't explain why it works with vue-cli.
I have strange problem possibly bug with importing JSON file as object into my application. I do have:
"compilerOptions": {
"resolveJsonModule": true,
"esModuleInterop": true,
}
Looking at the s̶o̶u̶r̶c̶e̶ ̶a̶n̶d̶ source maps JSON is being imported and even when I look at debugger:
But as you see debugger is able to see contents of this var/JSON while app claims it's undefined. Can it be building cache problem?
I import JSON file like:
import * as eventsDB from './events.json';
and for debugging purpose I export it like this:
export const jsonDB = eventsDB;
EDIT: After checking carefuly build whole reducer where I import and export JSON was ommited but for some reason everything was in Source-Maps, I'm currently searching for possible reason.
Guys I've located the problem. I think this might be helpful, so I want to share the solution. As I said in reducer named events (file name events.ts) I've imported the JSON:
import * as eventsDB from './events.json';
And some of you might already noticed the problem. Even when I included the extension, for some reason there was name conflict so under events reducer
import events from '../reducers/events';
I actually had the JSON. And under JSON I had undefined. Still the mistery is why debugger saw the contents of the variable correctly.
I do my development using modern JS (ES6) which means modules.
Although Three.js is available as an ES6 module. The line library - LineSegmentsGeometry, LineGeometry, LineSegments2, etc. - is not.
What are my options here?
You have a couple options.
First and foremost, edit the code.
You're welcome to modify the code, and so you could manually turn it into an ES6 module. You would want to remove any references of THREE, and export anything that was normally attached to that object. You'll also need to import any required core THREE.js components, like Mesh, Vector3, etc.
The way I prefer to do this is to copy the file I'm updating locally, and change references to it. For example:
// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"
let LineSegments2 = function ( geometry, material ) {
// ...
}
export default LineSegments2
// app.js
import { Mesh, Vector3, etc. } from "three"
import LineSegments2 from "./local_three_overrides/LineSegments2.js"
// and so on...
Your other option is to use a bundler with an export loader.
Webpack (and other bundlers, I'm just more familiar with Webpack) provides a exports-loader which can be used against specific files that don't export anything. For example, you can tell the exports-loader to export THREE from LineSegments2.js. To get webpack involved in this process, you need to tell it to use the loader on the file. You can do this through the webpack configuration, or inline in the code like this:
import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"
This is the app component. It gives an error that it can't find module pages/question/pages/question1/question1
This is the app module where I declared the question1. still the same error.
Your import path is wrong, it should be as,
import {question1} from './pages/questions/pages/question1'
I've previously used the following code
import { clone } from '../../utilities/javascript';
and in the javaccript.ts
export function clone(source: any) {...}
In my module i made the call using the following syntax:
this.x=clone(y);
And all was working.
However, since I am using Angular-cli, the following exception comes up in Chrome:
error_handler.js:47 EXCEPTION: Cannot read property 'clone' of undefined
Is there something in my syntax that is wrong, which surfaced just as I switched to Angular-cli?
I currently copy this function into every module in which i use it, which solves the problem, but that is not something I am comfortable with.
try to import it in the following way:
import * as javascriptUtils from '../../utilities/javascript';
then call it with:
this.x=javascriptUtils.clone(y);
taken from https://github.com/angular/angular-cli#3rd-party-library-installation