ChiefOfGxBxL / WC3MapTranslator

Translate war3map ⇄ json formats for WarCraft III .w3x maps
https://www.npmjs.com/package/wc3maptranslator
MIT License
73 stars 31 forks source link

How to use v4 of this package? #66

Closed lukassemmler closed 10 months ago

lukassemmler commented 2 years ago

Hello 👋 sorry if this is trivial, but I could not get the v4.0.0 of this package working.

I tried multiple ways to run the example in the readme, but i'm not sure what the right setup is. I compiled the example with Typescript and then ran it with Node. Here is the error stack:

Error: Cannot find module './lib/translators'
Require stack:
- C:\Users\Lukas\Documents\Webentwicklung\warcraft3-map-analyzer-install-test\node_modules\wc3maptranslator\index.js
- C:\Users\Lukas\Documents\Webentwicklung\warcraft3-map-analyzer-install-test\dist\index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\Lukas\Documents\Webentwicklung\warcraft3-map-analyzer-install-test\node_modules\wc3maptranslator\index.js:4:23)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Lukas\\Documents\\Webentwicklung\\warcraft3-map-analyzer-install-test\\node_modules\\wc3maptranslator\\index.js',
    'C:\\Users\\Lukas\\Documents\\Webentwicklung\\warcraft3-map-analyzer-install-test\\dist\\index.js'
  ]
}

Here is my project setup:

dist/
node_modules/
src/
  index.ts
package-lock.json
package.json
tsconfig.json

index.ts:

import { CamerasTranslator } from 'wc3maptranslator';
import { writeFileSync } from 'fs';

const cameras = [
  {
    "target": {
      "x": -319.01,
      "y": -90.18
    },
    "offsetZ": 0,
    "rotation": 90,
    "aoa": 304,
    "distance": 2657.34,
    "roll": 5,
    "fov": 70,
    "farClipping": 5000,
    "name": "MyCamera1"
  }
]

const translatedResult = CamerasTranslator.jsonToWar(cameras);
writeFileSync('war3map.w3c', translatedResult.buffer);

package.json:

{
  "name": "warcraft3-map-analyzer-install-test",
  "version": "0.0.1",
  "description": "Install test for wc3maptranslator",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^17.0.24",
    "wc3maptranslator": "^4.0.0"
  },
  "devDependencies": {
    "typescript": "^4.6.3"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*",
        "src/types/*"
      ]
    }
  },
  "include": [
    "src/**/*"
  ]
}

Then I ran tsc to compile the src/index.ts into dist/index.js and ran node .\dist\index.js. The before mentioned error gets thrown.

The versions I used:

I thought the problem was that my Node version is outdated and the line const translators_1 = require("./lib/translators"); in w3maptranslator/index.js does not get handled properly. But the readme says at least "Node >= 14" and I used Node v16.

If I understand correctly, the import syntax of JavaScript is from ES6 and the require syntax from CommonJS. Besides 1) transpiling with Typescript, I also tried using 2) bundling a index.js file with Webpack and 3) adding type: module to the package.json. None worked so far.

Any help would be very appreciated!

Best regards, Lukas

ChiefOfGxBxL commented 2 years ago

Hi @lukassemmler,

I'd be happy to help. Do you mind attaching a .zip file of all this setup (minus the node_modules directory, don't need to blow up the file size 😉) so I can make sure I have the exact same set up that's causing this issue? Thanks!

lukassemmler commented 2 years ago

Hey @ChiefOfGxBxL, thanks for your help! Here is the setup (without the node_modules/ directory): warcraft3-map-analyzer-install-test.zip

ChiefOfGxBxL commented 2 years ago

@lukassemmler Thanks, I am able to recreate the same issue you are seeing.

It appears that wc3maptranslator is only building the index.js file (from the index.ts file in this repository), but TypeScript is not building the .js files for all of the .ts translator files under lib/ and lib/translators, hence the module not found error.

I have some fixing to do on this repository to resolve why those files aren't building except the index.js file.

In the meantime, you can perform the following hotfix for your project:

  1. cd into node_modules/wc3maptranslator
  2. Run npm install to install all the wc3maptranslator dependencies
  3. Run npm run build (still under the node_modules/wc3maptranslator directory)
    • Verify there are corresponding .js files for each .ts file under lib/ and lib/translators

You should now be able to use your code. I can see that this hotfix allows me to write the camera file as expected.

lukassemmler commented 2 years ago

@ChiefOfGxBxL Thank you for your help, the hotfix worked!

I did get a lot of warnings when running npm build in the node_modules/wc3maptranslator directory about module resolution, but I guess thats not a problem for now.

wbget commented 2 years ago

@ChiefOfGxBxL Same question, this is a tool maybe useful. [semantic-release] (https://github.com/semantic-release/semantic-release)

Grimgrents2 commented 2 years ago

@ChiefOfGxBxL Hey man great tool, when can we expect an .exe version? the modding community would greatly appreciate it!

ChiefOfGxBxL commented 2 years ago

@Grimgrents2 Can you clarify - do you mean building a GUI so people can open maps and translate the files they want without having to write the code? Would a web-based interface also work?

ChiefOfGxBxL commented 10 months ago

Related to #69 and resolved in v4.0.4, published to npm.