app.js:3524 Uncaught ReferenceError: THREE not defined at Object../node_modules/three-bmfont-text/index.js

Question

I am trying to use Three.js with three-bmfont-text to create text in 3D and give it a nice look using shaders.

I install three and three-bmfont-text through npm and import it in JS file:

                import * as THREE from 'three';
                const loadFont = require('load-bmfont');
                const createGeometry = require('three-bmfont-text');

I run npm run dev and npm run watch and everything seems to work fine, but in chrome developer it logs the following error :

app.js:3524 Uncaught ReferenceError: THREE is not defined at Object../node_modules/three-bmfont-text/index.js

I tried to install and uninstall three and three-bmfont-text but nothing changes, what am I missing?

Answer 1

Maybe it helps somebody who finds this question. This one quite popular in google.

You need to add this in webpack ( link ):

plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three'
    })
  ]

If you are using next ( link ):

config.plugins.push(
 new webpack.ProvidePlugin({
  THREE: 'three',
 })
)