Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using AMI as a module (in webpack) no longer works.

See original GitHub issue


#110 ensured that AMI was build as a CJS module by babel before being published to NPM. This ensured that an import properly resolved all dependencies as well.

#195 Migrated to Webpack which removed this from the build system.

Currently AMI only outputs a browser ready bundle which requires a global THREE variable to be present. When using Webpack to bundle the application this means that ThreeJS is not automatically added as dependency and a shim is required. It would be great if we could reinstate the changes made in #110 that were removed in #195 so that THREE is properly imported and detected by webpack.

Live Demo

I do not currently have a live demo of this unfortunately.

Steps to Reproduce

  1. Set up a basic webpack project (Webpack 4 with no configuration should work).
  2. In your main source file use `import * as AMI from ‘ami.js’
  3. Call new AMI.OrthographicCamera

Note that with the build steps that were introduced in #110 I believe there was no need to use import * as.

Expected Results

The code works without errors.

Actual Results

The console shows an error “THREE not defined”.

Browsers Affected

  • All
  • Chrome
  • Firefox
  • Edge
  • Safari 9
  • Safari 8
  • IE 11


  • AMI: v0.0.22
  • THREEJS: v0.94.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

Kingdutchcommented, Aug 7, 2018

Aah I see : )

Is there a way to add ‘next’ as a dist-tag? Currently I can only install 0.0.22 through Yarn (which doesn’t have the factories yet) and I can’t say yarn add ami.js@next because Yarn has no knowledge of the dev or 0.0.23-dev version.

I can install from the git repo itself but that’s a lot slower and more cumbersome to keep up to date 😃

NicolasRannoucommented, Aug 6, 2018

@Kingdutch, you should now use the factories to use AMI in you Qebpack project (I currently use AMI in an application based on create-react-app).

import * as THREE from 'three';
import {stackHelperFactory} from 'ami.js';

const StackHelper = stackHelperFactory(THREE);
const sh = StackHelper();
Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack resolve.alias does not work with typescript?
I am using Babel 7 with babel-plugin-module-resolver to resolve aliases. No ... When you write custom webpack It works with typescript but not...
Read more >
Resolve | webpack
Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look...
Read more >
Module Methods - webpack
This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a...
Read more >
Asset Modules - webpack
assetModuleFilename and works only with asset and asset/resource module types. Inlining assets. webpack.config.js const path = require('path'); module.exports = ...
Read more >
Migrating your Elastic Beanstalk Linux application to Amazon ...
For more information, see Amazon Linux AMI (AL1) platform retirement FAQ. ... in .ebextensions configuration files, but they aren't as easy to work...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found