Instantiate threejs objects with typescript?

Questions
, ,
8

I removed everything, and the error is still the same what I did is:

  • npx create-react-app mylib

added babel + three in package.json, so it looks like:

{
  "name": "mylib",
  "version": "0.1.0",
  "private": true,
  "main": "./lib/index.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "@types/three": "^0.155.0",
    "three": "^0.155.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.21.0",
    "@babel/helper-builder-react-jsx": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-react-jsx": "^7.12.17",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/plugin-transform-typescript": "^7.8.3",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.17.12",
    "@babel/preset-typescript": "^7.22.15",
    "@babel/runtime": "^7.8.4",
    "@testing-library/dom": "^9.3.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "babel-jest": "^29.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "npx babel ./node_modules/.bin/babel ./src -d ./lib --config-file ./babel_override.js --copy-files",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I only have an index.js:

export { default as Cube } from "./Cube";

and the Cube.jsx:

import React from "react";
import * as THREE from "three";

const Cube = () => {
  const vec = new THREE.Vector3(1, 0, 1);  // this line causes the error

  return <div>Hello</div>;
};

export default Cube;

The babel_override:

module.exports = {
	overrides: [
		{
			presets: [
				[
					"@babel/preset-env",
					{ useBuiltIns: "usage", corejs: 3, targets: "defaults" },
				],
				["@babel/preset-react", { runtime: "automatic" }],
			],
			plugins: [
				"@babel/plugin-proposal-class-properties",
				"@babel/plugin-transform-react-jsx",
			],
		},
	],
};

and the .babelrc:

{
	"presets": [
		["@babel/preset-env", { "targets": { "node": "current" } }],
		["@babel/preset-react", { "runtime": "automatic" }],
		"@babel/preset-typescript"
	]
}

If I remove the Vector3 instantiation and rebuild the lib, then no issues and I see the element. We are using webpack