Cannot use import statement outside a module

[jamesdigid]

Looking for any suggestions as to why this keeps failing our pipeline build. We have babel transforms all the other modules work correctly am I missing something basic here?

   SyntaxError: Cannot use import statement outside a module
@ss/extension-ivis:       34 | import { FaMicrophone, FaMicrophoneSlash, FaMinus } from 'react-icons/fa';
@ss/extension-ivis:       35 |
@ss/extension-ivis:     > 36 | import useSpeechToText from 'react-hook-speech-to-text';
@ss/extension-ivis:          | ^
@ss/extension-ivis:       37 | //import { useSpeechToText } from 'react-hook-speech-to-text';
@ss/extension-ivis:       38 | //import * as useSpeechToText from 'react-hook-speech-to-text';
@ss/extension-ivis:       39 | //const useSpeechToText = require('react-hook-speech-to-text');
@ss/extension-ivis:       at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
@ss/extension-ivis:       at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

[javiermanzano]

+1

This is also happening to me

[Riley-Brown]

@javiermanzano @jamesdigid Is this happening with Next.js, create-react-app or something else?

[jamesdigid]

+1

This is also happening to me

I eventually found a work around by adding to our jest.config.js:

transformIgnorePatterns: [ "node_modules/(?!react-hook-speech-to-text/.*)"],

@Riley-Brown
This was happening inside a react mono repo application built off of OHIF.

[k-masashi]

@Riley-Brown
This is also happening to me. (Next.js)

Server Error
SyntaxError: Cannot use import statement outside a module

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

external%20%22react-hook-speech-to-text%22 (1:0) @ eval

> 1 | module.exports = require("react-hook-speech-to-text");

I ran into the above error while trying to call useSpeechToText.

    const {
        error,
        interimResult,
        isRecording,
        results,
        startSpeechToText,
        stopSpeechToText,
    } = useSpeechToText({
        continuous: true,
        useLegacyResults: false
    })

[k-masashi]

This Next.js problem was solved by using next-transpile-modules.
#22 (comment)

next.config.js

const withTM = require('next-transpile-modules')(['react-hook-speech-to-text']);

withTM({.. config ..})

[28development]

You sure this has been fixed?

There is still a bug with this config

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

const withTM = require('next-transpile-modules')(['react-hook-speech-to-text']);

module.exports = withTM({ nextConfig });

Is currently returning:

./node_modules/react-hook-speech-to-text/dist/index.js
Module parse failed: Identifier '_b' has already been declared (696:12)
File was processed with these loaders:
 * ./node_modules/@next/react-refresh-utils/loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
You may need an additional loader to handle the result of these loaders.
| 
| ;
>     var _a, _b;
|     // Legacy CSS implementations will `eval` browser code in a Node.js context
|     // to extract CSS. For backwards compatibility, we need to check we're in a

Any ideas?

[JonathanGallivan]

For NextJS, don't worry about "next-transpile-modules".
Put the code from the example into its own SpeechToText component, then load that component dynamically with SSR turned off:

import dynamic from "next/dynamic";
const SpeechToText = dynamic(() => import("../Library/SpeechToText"), {
  ssr: false,
});

const MyApp = () => {
    return (
         <SpeechToText />
    );
};

export default MyApp;

[abiolapunch]

Still facing this issue with nextjs and nothing seems to work. Can anyone suggest a way forward

[bob-kim1]

For NextJS, don't worry about "next-transpile-modules". Put the code from the example into its own SpeechToText component, then load that component dynamically with SSR turned off:

import dynamic from "next/dynamic";
const SpeechToText = dynamic(() => import("../Library/SpeechToText"), {
  ssr: false,
});

const MyApp = () => {
    return (
         <SpeechToText />
    );
};

export default MyApp;

it works for me thank you :)