stats.min is not exported from three

[anjali14garg]

ERROR in ./node_modules/@zappar/zappar-react-three-fiber/node_modules/@react-three/drei/core/Stats.js 3:0-57
Module not found: Error: Package path ./examples/js/libs/stats.min is not exported from package \node_modules\three (see exports field in \node_modules\three\package.json)

Install the package using npm and then start the project we will get this error.

versions "@zappar/zappar-react-three-fiber": "^1.0.11", "three": "0.137.5", "react": "^17.0.2",

[nyan-left]

Hi @anjali14garg,

Would it be possible to share a minimal repo replicating this issue?

[anjali14garg]

Hi Nyan, Below is the github link where I tried to add zappercanvas and its giving me so many errors. And i think its because package is not updated with the latest versions of three and @react-thre/drei.

https://github.com/anjali14garg/zappertest

[nyan-left]

Thanks for sharing.

There are a few things wrong with the setup above.

1. web-server (webpack) is not serving using HTTPS. This is needed for the camera to work.
2. wasm file-loader rule is not set up.

Both of these issues we solve using react-app-rewired as documented in the README here

I would suggest getting started using one of the bootstrap projects found here or using one of our create-react-app templates documented here.

[anjali14garg]

But what if we already have one project which is already working on 3d and just we want to add AR functionality from zapper in it.

[nyan-left]

So going from the project you linked, here are the steps I took to get it to a functional state:

Install dependencies using npm i

Install react-app-rewired this package lets us change the underling webpack config that react-scripts hide away. npm i --save-dev react-app-rewired

As per react-app-rewired documentation, next change the package.json scripts to the following:

  "scripts": {
    "start": " HTTPS=true react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

At this point, we add config-overrides.js to the root of the project.

Trying to start the project now using npm run start, I get this error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

Upon opening App.js I noticed that you have misspelt ZapparCanvas. We change the following:

import logo from './logo.svg';
import './App.css';
-- import { ZapparCamera, ZapperCanvas } from "@zappar/zappar-react-three-fiber";
++  import { ZapparCamera, ZapparCanvas } from "@zappar/zappar-react-three-fiber";

function App() {
  return (
--    <ZapperCanvas>
++    <ZapparCanvas>
      {/* Setup Zappar Camera*/}
      <ZapparCamera />
      {/* Setup Image Tracker, passing our target file */}

        {/* Create a normal pink sphere to be tracked to the target */}
        <mesh>
          <sphereBufferGeometry />
          <meshStandardMaterial color="hotpink" />
        </mesh>

      {/* Normal directional light */}
      <directionalLight />
--    </ZapperCanvas>
++    </ZapparCanvas>
  );
}

export default App;

Now the error will be gone, but the camera will not be full screen. So we make the canvas fill the whole page. Add the following CSS to index.css

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

Now the experience will be full page-width and height.

I hope this helps :)

[anjali14garg]

Hi Nyan,

After adding HTTPS=true react-app-rewired start in package.json facing issue of 'HTTPS' is not recognized as an internal or external command, . After searching solution for it i got solution on https://stackoverflow.com/questions/60374269/https-is-not-recognized-as-an-internal-or-external-command. But still getting issues. Can you plese check once again. on same url https://github.com/anjali14garg/zappertest

[nyan-left]

Perhaps try without it? Just

"start": "react-app-rewired start",

[anjali14garg]

Tried but getting errors like : ERROR in ./node_modules/three-mesh-bvh/src/index.js 1:0-43 Module not found: Error: Can't resolve 'three' in 'D:\zappertest\node_modules\three-mesh-bvh\src' @ ./node_modules/@zappar/zappar-react-three-fiber/node_modules/@react-three/drei/core/useBVH.js 2:0-90 7:29-47 9:35-52 10:35-52 @ ./node_modules/@zappar/zappar-react-three-fiber/node_modules/@react-three/drei/index.js 44:0-42 44:0-42 @ ./node_modules/@zappar/zappar-react-three-fiber/lib/Components/util/PlacementUI.js 41:15-43 @ ./node_modules/@zappar/zappar-react-three-fiber/lib/Components/trackers/InstantTrackerGroup.js 58:38-68 @ ./node_modules/@zappar/zappar-react-three-fiber/lib/index.js 91:28-80 @ ./src/App.js 6:0-78 10:30-42 11:36-48 @ ./src/index.js 7:0-24 11:33-36

[nyan-left]

Your repo starts up for me as expected.

What node version are you using?

node -v

[anjali14garg]

Its node version v14.17.0 npm -v 6.14.13 yarn -v 1.22.10

[nyan-left]

Perhaps try deleting package-lock.json, yarn.lock and node_modules, followed by a re-install?

[nyan-left]

It also looks like you haven't got @react-three/fiber installed. That would explain the Can't resolve 'three' error message.