2

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';
JDorman
  • 89
  • 1
  • 12

2 Answers2

3

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;
mutp
  • 2,301
  • 1
  • 17
  • 13
0

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/**"
  ]
}
ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • I have no idea what you mean, I'm totally new to React and working off the aframe-react boilerplate. I assumed I could just import a regular JavaScript file with my components in? That's what was working with vanilla A-Frame? – JDorman Sep 20 '17 at 09:47
  • Only just looking at bundlers etc now, up until now I've been working off localhost using npm – JDorman Sep 21 '17 at 10:00