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.

I cannot migrate a simple example from cannon to cannon-es

See original GitHub issue

I have a very simple TypeScript example in cannon that just print a gravity:

import "cannon";

function main()
{
    const physicsWorld = new CANNON.World();
    physicsWorld.gravity.set(0, -9.82, 0);
    console.log("gravity = ", physicsWorld.gravity);
}

main();

You can run it on playground: https://plnkr.co/edit/EoxKFFYZgtXnTTEX?preview

Source code on GitHub with cannon: https://github.com/8Observer8/hello-cannon-ts Source code on GitHub with cannon-es: https://github.com/8Observer8/hello-cannon-es-ts

When I try to change “cannon” to “cannon-es”, for example, this line:

import "cannon"

on this line:

import * as CANNON from "cannon-es";

I get this error: Uncaught ReferenceError: exports is not defined and this error: Uncaught TypeError: Cannot read property 'World' of undefined

Issue Analytics

State:
Created 2 years ago
Comments:13 (3 by maintainers)

Top GitHub Comments

1reaction

marcofugarocommented, Dec 8, 2021

I just need to add type=“module” as a script attribute

Yeah, that’s how es modules work (cannon-es is an es module). Read more about it here

I need to solve the problem with Require.js and AMD.

My advice would be to stop using Require.js, it’s an antiquated library and has been made obsolete with the introduction of es modules.

Closing since this is not related to cannon-es.

0reactions

8Observer8commented, Jun 3, 2022

Maybe this information will help someone. Rollup works fine with TypeScript, Three.js, Cannon-es, and OrbitControls.

Debugging command: rollup -cmw where: -c - create a bundle, -m - debug mode, -w - watch)

Release commands:

rollup -c
uglifyjs public/js/bundle.js -o public/js/bundle.min.js

I edited the rollup.config.js script from cannon-es (cannon-es is written in TypeScript): https://github.com/pmndrs/cannon-es/blob/master/rollup.config.js

rollup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import filesize from "rollup-plugin-filesize";

const extensions = [".ts"];

const babelOptions = {
    babelrc: false,
    extensions,
    exclude: "**/node_modules/**",
    babelHelpers: "bundled",
    presets: [
        [
            "@babel/preset-env",
            {
                loose: true,
                modules: false,
                targets: ">1%, not dead, not ie 11, not op_mini all",
            },
        ],
        "@babel/preset-typescript",
    ],
};

export default {
    input: "./src/main.ts",
    output: { file: "public/js/bundle.js" },
    plugins: [ resolve({ extensions }), babel(babelOptions), filesize() ]
}

src/main.ts

import * as THREE from "three";
import * as CANNON from "cannon-es";
import { ColladaLoader } from "../../../../node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "../../../../node_modules/three/examples/jsm/controls/OrbitControls.js";

console.log(new THREE.Vector3(1, 2, 3));

const world = new CANNON.World( {gravity: new CANNON.Vec3(0, -9.8, 0)} );
console.log("gravity: ", world.gravity);

const loader = new ColladaLoader();
console.log(loader);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderCanvas = document.getElementById("renderCanvas");
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: renderCanvas });
renderer.setSize(window.innerWidth, window.innerHeight);
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.target = new THREE.Vector3(0, 0, 0);
console.log(orbitControls);

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="renderCanvas"></canvas>

    <script src="js/bundle.js"></script>
</body>

</html>

Top Results From Across the Web

Error migrating from cannon.js to cannon-es - Stack Overflow

I have a world with cannon.js physics working fine. When I try to migrate to cannon-es I get an error in the step()...

Bird Banding | Learn Science at Scitable - Nature

Banding was the first scientific method used to track migrating animals. ... the edge of the net with ropes and are fired simultaneously...

What is the 'salmon cannon' and how do the fish feel about it?

A video showing a cannon shooting fish over a dam went viral – but how does it work? CEO and inventor of cannon...

Migrate machines as physical servers to Azure - Microsoft Learn

In this tutorial, you learn how to: Prepare to use Azure with Migration and modernization. Check requirements for machines you want to migrate, ......

Whooshh Innovations' "Salmon Cannon" Gives Fish A Boost ...

The Whooshh Fish Transport System, also known as the "salmon cannon," gives fish a much-needed boost over dams so they can swim upstream...