Module parse Failed

[johnwwk]

I install the library and when I import it I am geting this error

ERROR in ./node_modules/three.interactive/build/three.interactive.js 3005:231723
Module parse failed: Unexpected token (3005:231723)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 	float std_dev = sqrt( squared_mean - mean * mean );
| 	gl_FragColor = pack2HalfToRGBA( vec2( mean, std_dev ) );
> }`;function sc(r,e,t){let n=new Zi,i=new Z,s=new Z,o=new ke,a=new Zs({depthPacking:iu}),l

[markuslerner]

Please try using version v.1.3.0 and let me know, if the problem still persists.

[johnwwk]

I can't install v1.3.0

[markuslerner]

@johnwwk what error message are you getting while installing 1.3.0?

[leosantacruz]

Hi! same problem here even with version 1.3.0. Any suggest? thanks.

[markuslerner]

@leosantacruz, can you please paste the error message you are getting here?

[Christoph-Koehler]

Hi! I have the same problem with versions 1.3.0 and 1.3.1. This is the error message I get:

ERROR in ./node_modules/three.interactive/build/three.interactive.js 1:65
Module parse failed: Unexpected token (1:65)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import{Raycaster as a,Vector2 as h}from"three";var c=class{target;name;intersected;wasIntersected=!1;distance;constructor(e,s){this.target=e,this.name=s,this.intersected=!1,...

[markuslerner]

Hi @Christoph-Koehler, thank you for your comment. What build environment are you using?

[Christoph-Koehler]

Im using webpack and this is my .tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "module": "esnext",
    "strict": false,
    "sourceMap": true,
    "newLine": "LF",
    "importHelpers": true,
    "lib": [
      "dom",
      "es7"
    ]
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "Test",
    "**/*.test.ts"
  ]
}

Do you need anything else?

[markuslerner]

Thank you @Christoph-Koehler, I will look into it.

[markuslerner]

Dear @Christoph-Koehler, sorry for my late reply. I managed to look into it only now. I tested it with my demo code (see readme) and it works fine for me. I also published a new version of three.interactive, but that should not affect this problem.

Here's my package.json:

{
  "name": "webpack-sandbox",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/three": "^0.140.0",
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.2",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "three": "^0.140.2",
    "three.interactive": "^1.3.2"
  }
}

my webpack.config.js:

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

and the same tsconfig.json you are using.

Maybe this helps solving the problem?

[CodyJasonBennett]

Ran into this project via GH recommended. Taking note of "moduleResolution": "node" in their TSConfig, this project's targets aren't correctly configured which will present an issue when using Node resolution (most bundlers employ this).

https://github.com/markuslerner/THREE.Interactive/blob/a88464a4448f82fc729a0f5486d8e74b733ee81e/package.json#L5-L8

The main target must be commonjs which is often preferred in Node environments (SSR, bundlers, react-native to some extent). Note that when using "type": "module", the main target must use the .cjs file extension. In your case, as this library is ESM-only, you can omit the main target so Node will resolve the module target.

[markuslerner]

Hi @CodyJasonBennett, thank you for pointing this out. I added the main target, so that https://unpkg.com/three.interactive automatically resolves to the latest version of the package. Would it work, if I build an additional .cjs version and specify that as the main target?

[markuslerner]

Hi @CodyJasonBennett, it looks like it's a bit more tricky and I should maybe rather go down this path: https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html Would do you think?

[CodyJasonBennett]

@markuslerner, the main target must always be CJS and module target ESM, respectively. You can have one or both targets, but they must point to the right format. I don't understand the concerns of the second link though, tooling will respect Node resolution, and CDNs will resolve your module target.

I'd start by removing the main key in your package.json for a proper ESM-only package, then investigate the need and build options to create a proper CJS target.

[markuslerner]

Thank you, @CodyJasonBennett. I removed the main key for now and published Release 1.4.0. If it turns out a CJS version is necessary, I will try to build that one separately.