react-three/postprocessing. Module parse failed

Question

As soon as import Effect Composer into an active document, I get this error message. Could there be a possibility of my model/material causing this?? I am not even using the Effect Composer in Script. Or could it be that I need some kind of background??

*./node_modules/screen-space-reflections/dist/index.js 675:33 Module parse failed: Unexpected token (675:33) You may need an appropriate loader to handle this file type. | var boneMatrices = material[boneMatricesName]; |

if (material[boneMatricesName]?.length !== skeleton.boneMatrices.length) { | delete material[boneMatricesName]; | boneMatrices = new Float32Array(skeleton.boneMatrices.length);*

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import './styles.css'
import { EffectComposer } from '@react-three/postprocessing'
//I just inserted it here to see if this causes the failure and it does


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Turns out that my npm and node were outdated, downloading older versions of r3f and such updating npm then reinstalling everything solved it — ben lee, Jul 28 '22 at 18:26

score 0 · Answer 1 · answered Jul 26 '22 at 03:45

Have you tried to install the es2015 preset??

REF: "You may need an appropriate loader to handle this file type" with Webpack and Babel

npm install babel-preset-es2015

You need to install the es2015 preset:

npm install babel-preset-es2015

and then configure babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

Maybe you need to add the file-loader under your modules.

https://www.npmjs.com/package/file-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

react-three/postprocessing. Module parse failed

1 Answers1