I have a problem in my three js project, I use parcel as a module bundler. I want to import SVGRenderer from 'three/addons/renderers/SVGRenderer.js'. But it looks like parcel cannot resolve this. Any idea how to fix it ?
The error says:
#parcel/core: Failed to resolve 'three/addons/renderers/SVGRenderer.js' from './app.js'
This is the code:
app.js
import dat from 'dat.gui';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js'; // error is in this line
import { Text } from 'troika-three-text';
Related
Any idea how I can import a module who's name ends with .js?
example of module https://www.npmjs.com/package/bandchain2.js
import React, { useEffect, useState } from 'react';
import { Client } from '#bandprotocol/bandchain.js';
export default App = () =>{
return(
<div></div>
);
}
Failed to compile.
./src/components/app.js
Module not found: Can't resolve '#bandprotocol/bandchain.js' in '/mnt/g/Projects/test-app/src/components'
I reproduced your problem with no compile issues and imported it as:
import { Client } from "bandchain2.js";
You're importing it as bandchain.js when the npmjs you provided is bandchain2.js
import { Client } from "#bandprotocol/bandchain.js";
and you should add the following line to your package.json file.
"browser": { "crypto": false }
discussion of the relevant topic:https://github.com/brix/crypto-js/issues/291
Resolved by using node v16.
Seems that the problem only occurs with node 14 or the react/create-react-app version installed
I want to change the behavior of an ionic4 web component.
I created a stencil component from stencil-component-starter and copied the source of the component (ion-reorder in my case) from '#ionic/core/src/components'.
To make it work, I need to fix this import : import { getIonMode } from '../../global/ionic-global'
I installed #ionic/core as dependence and tried many ways to import :
import { getIonMode } from '#ionic/core/dist/types/global/ionic-global';
returns a TypeError :
TypeError: Failed to resolve module specifier "#ionic/core/dist/types/global/ionic-global". Relative references must start with either "/", "./", or "../".
So I tried to directly import from node_modules
import { getIonMode } from '../../../node_modules/#ionic/core/dist/types/global/ionic-global';
but it returns a rollup import error :
Rollup: Unresolved Import Could not resolve '../../../node_modules/#ionic/core/dist/types/global/ionic-global' from src/components/reorder/lazy_7lathtd3dfwla7hdtr7reg-reorder.js
I also tried to import the Ionic/core module : import * as Ionic from '#ionic/core';
But it doesn't provide the method getIonMode() that I need.
Perhaps I miss something in the import process ?
Any help or hint appreciated 🙏
I am trying to import react-bootstrap on my project like so:
import forwardRef from '#restart/context/forwardRef';
import { Button } from 'react-bootstrap';
but getting compilation error:
Failed to compile.
../node_modules/#restart/context/forwardRef.js
Module not found: Can't resolve 'react' in '/Users/me/Projects/mypr/node_modules/#restart/context'
I am trying to import highcharts-annotations in angular 6 typescript module file app.module.ts. I tried the below code but it is showing an error
"Could not find declaration file for module 'highcharts/module/annotations' "
But the annotations.js file resides in the same path and it is showing error in console
"ERROR TypeError: chart.addAnnotation is not a function".
Has someone tried this before?
Code:
import { ChartModule } from 'angular2-highcharts';
import { AnnotationsModule } from 'highcharts/modules/annotations';
import * as Highcharts from 'highcharts';
Try to import the module in that way:
import * as AnnotationsModule from "highcharts/modules/annotations"
And initialize it:
AnnotationsModule(Highcharts);
Or use require:
require('highcharts/modules/exporting')(Highcharts);
Check the demo with highcharts-angular official wrapper which I recommend you.
Demo:
https://codesandbox.io/s/329llv6wj1
I'm not really sure what I'm screwing up here. I've managed to write my own components in basic A-Frame but since moving to aframe-react I'm getting the error:
Error in ./src/components.js
C:\PATH_TO\src\components.js
1:1 error 'AFRAME' is not defined no-undef
components.js:
AFRAME.registerComponent('pointer_click', {
// ...
});
Am I importing it wrong?
import 'aframe';
import 'aframe-animation-component';
import 'aframe-particle-system-component';
import 'babel-polyfill';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';
import './components.js';
If you are using create-react-app, then you need to follow this create-react-app-global-vars to reference 'AFRAME' as a global variable.
Basically, include this at the top of your AFrame component file.
const AFRAME = window.AFRAME;
Perhaps that's just a lint error or bundler error? What bundler are you using? I wonder if you have to declare AFRAME as a global somewhere (e.g., /* globals AFRAME */ at the top) or define AFRAME as a global in some config.
If you are possibly using semistandard linter, you can put in package.json:
"semistandard": {
"globals": [
"AFRAME",
"THREE"
],
"ignore": [
"build/**"
]
}