import { registerPlugin } from '@capacitor/core'; SyntaxError: Cannot use import statement outside a module

[rrdesignweb]

Describe the bug
SyntaxError: Cannot use import statement outside a module when testing web platform.

`import { registerPlugin } from '@capacitor/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Error is pointing to - .../client/node_modules/@capacitor-community/camera-preview/dist/esm/index.js:1

import { registerPlugin } from '@capacitor/core'; //<-- ?
const CameraPreview = registerPlugin('CameraPreview', {
    web: () => import('./web').then((m) => new m.CameraPreviewWeb()),
});
export * from './definitions';
export { CameraPreview };
//# sourceMappingURL=index.js.map

Steps to reproduce

After navigating to my Next "Camera" page:
...

import { CameraPreview, CameraPreviewOptions, CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
import '@capacitor-community/camera-preview';

const Camera: NextPage = (): JSX.Element => {
    //State
    const [itemImage, setItemImage] = useState("");

    useEffect(() => {
        const cameraPreviewOptions: CameraPreviewOptions = {
            position: 'rear',
            toBack: true,
            enableZoom: true
        };
        CameraPreview.start(cameraPreviewOptions);
    }, []);

    const handleCameraCapture = async () => {
        const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
            quality: 50,
        };
       const result = await CameraPreview.capture(cameraPreviewPictureOptions);
       setItemImage(result.value);
    }

    return (
           --> handleCameraCapture button onClick
             
    );
}

export default Camera;

MainActitiy.java

Expected behavior
Error to not be thrown and work as expected..

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Node 16.13.0
• NextJS 13 with some Ionic/react components
• "@capacitor/core": "^4.6.1",
• "@capacitor-community/camera-preview": "^4.0.0",
• "@capacitor/android": "^4.6.1",
• "@capacitor/ios": "^4.6.1",

Additional context
I attempted to update the package.json to add type: "module" but this screwed things up and threw errors with files like my next.config.js which uses commonjs (Require statements)

Also side note in my project I attempted to use "@capacitor/camera": "^4.1.4" but that didn't seem to fit my needs as needed more fine grain control over preview, start/stop/capture, button controls overlayed etc hence I am trying this plugin.

Any help would be appreciated! thanks

[rrdesignweb]

I think i fixed this issue by adding the camera preview to transpile modules array in next.config.js

const withTM = require('next-transpile-modules')(['@codetrix-studio/capacitor-google-auth', '@capgo/camera-preview', '@ionic/react', '@ionic/core', '@stencil/core', 'ionicons']); 

const nextConfig = {
    ...
};

module.exports = withTM(nextConfig);