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/**"
]
}
Related
I am testing some React-Native components. For context, my components are stored in the following manner:
project
-components
--componentA
---ComponentA.js
---__test__
----ComponentA.test.js
--componentB
---ComponentB.js
---__test__
----ComponentB.test.js
--componentC
---ComponentC.js
---__test__
----ComponentC.test.js
The components have import statements, like the following:
import React from 'react';
import { Text, TouchableOpacity, View, StyleSheet} from 'react-native';
Components A and Components B rendered successfully and passed their respective tests. Component C is unable to have its test suite start due to the error SyntaxError: Cannot use import statement outside a module. The imports for Component C are as follows:
import React from 'react';
import Constants from 'expo-constants';
import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView } from 'react-native';
import { COLORS } from '../../styles/COLORS';
import BackButton from '../widgets/BackButton';
import backImage from '../../../assets/navigation/leftArrow.png';
import { SECTIONS } from './consts';
import setStatusBarColor from '../utils/StatusBarColorFunctions';
The error pointed at line 2, where Constants is imported. I commented out the line and ran the test again, and then pointed out the import statement for View, Text, etc., particularly at TouchableOpacity. I read some other posts that adding "type":"module" to the package.json file could resolve the issue, but I did not have issues with the two other components undergoing similar tests. If I change the file to require statements instead of import statements, it resolves the issue, but import statements are used for the other files and my tests run successfully. Is there a reason why this file in particular would have issues compared to the others, when they are are in the same directories?
Also I am fairly new to this site so if other information is needed from me please let me know. Thanks in advance!
Update: I am experiencing this with other files as well. If anyone has suggestions, please let me know!
all you need is a propterty at yow package.json
{
"name": "project",
"version": "1.0.0",
....
"type": "module",
....
}
add the type module property into your package or if you are using babel make sure the first line of code read is
request("#babel/register");
In relation to a previous question - How can Enzyme check for component visibility? I tried using jest-dom to specifically use their toBeVisible function.
Despite following the documentation I cannot get it to work in my test and get the error
"TypeError: expect(...).not.toBeVisible is not a function"
Fully reproduced in CodeSandbox here
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import MyCheckbox from "./MyCheckbox";
import MyCheckboxesInUse from "./MyCheckboxesInUse";
Enzyme.configure({ adapter: new Adapter() });
test("Check that one checkbox is hidden and the other is visible", () => {
const wrapper = mount(<MyCheckboxesInUse />);
const checkboxes = wrapper.find(MyCheckbox);
expect(checkboxes).toHaveLength(2);
//HOW DO I CHECK THAT ONE IS VISIBLE AND THE OTHER IS NOT ?
expect(checkboxes.get(0)).not.toBeVisible();
expect(checkboxes.get(1)).toBeVisible();
});
I was facing a similar issue. In my case, it was resolved by the following steps:-
Adding the #testing-library/jest-dom package to the devDependencies instead of dependencies in the package.json file.
Next add one of the following:
Adding import '#testing-library/jest-dom'; to the setupTests.js
Or adding in jest configuration (package.json): "setupFilesAfterEnv": [ "#testing-library/jest-dom/extend-expect" ]
The expect().not.toBeVisible method comes from the #testing-library/jest-dom library, since there is no setup or reference to that library the default jest expect is used (thus the function is not found). A quick fix would be to add this import to the top of your test file (assuming you have already imported the library into your project via npm or yarn):
import '#testing-library/jest-dom';
For scalability you may want to add a setupTest.js file (reference here: https://create-react-app.dev/docs/running-tests/)
importing '#testing-library/jest-dom' doesn't help me but
importing #testing-library/jest-dom/extend-expect' help me resolve the error.
import '#testing-library/jest-dom/extend-expect'
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 breaking my project into different repos. I have 3 different repos: base, utils and my project.
Base contains: CustomText
Utils contains: Wrapper & StyleHelper
My project contains: the app I'm working with.
The error occurs when I import Wrapper in my project like so:
import { Wrapper } from 'utils';
in Wrapper.js I import a CustomText Component
import { CustomText } from 'base';
in CustomText.js I import a StyleHelper
import { StyleHelper } from 'utils';
The error I get refers to the StyleHelper. The error says "cannot read 'create' of undefined" - create is a method on the StyleHelper component. So when I import Wrapper in my project StyleHelper is undefined. When I don't import Wrapper in my project StyleHelper is defined and no error occurs.
If they are not in separate repos the app works. Also, if I remove the CustomText import in Wrapper it works.
How do I get these to work if I want to break up the project into different repos? I'd assume some sort of circular dependency, but why is this happening? If it is some sort of circular dependency, what's the best practice to avoid this when breaking up a large project into many repos?
I am trying to figure out why TypeScript is not picking up the "default export" of react. E.g. in my JavScript files I was using:
import React from 'react';
import ReactDOM from 'react-dom';
But in typescript I have to use (after some googling):
import * as React from "react"
import * as ReactDOM from "react-dom"
I am just starting out with a fresh project after being unable to import my existing project and g et VS2k15 to compile it.
What is the difference, if any? Is there a way to specify a "Module 'react' has no default export".
I can see in the React file there is
declare module "react" {
export = __React;
}
Is that not considered a default export
I also tried
import __React from "react"
but get the same error.
A default export is just giving one of the exports the alias "default". You can do this using the following syntax:
export default function __React {
//do work
}
You can also use the following syntax:
function __React {
//do work
}
export {__React as default};