"Unexpected token export" then add and use aws-sdk/client-s3

[AlekseiHead]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

I'm working on an open source project in OHIF (React, Node.js). After installing the aws-sdk/client-s3 package and initializing it in the project, I receive the following error message in the browser:
"Unexpected token 'export' in "export * from "./EventStreamCodec""

// "../../../node_modules/@smithy/eventstream-codec/dist-es/index.js":
/!!
! ../../../node_modules/@smithy/eventstream-codec/dist-es/index.js !
*/
/**/ (function(module, exports) {

export * from "./EventStreamCodec";
export * from "./HeaderMarshaller";
export * from "./Int64";
export * from "./Message";
export * from "./MessageDecoderStream";
export * from "./MessageEncoderStream";
export * from "./SmithyMessageDecoderStream";
export * from "./SmithyMessageEncoderStream";*

I tried type module and various other solutions, such as * yarn add --dev @babel/plugin-transform-export-namespace-from*, but nothing helps!
How to fix this error?

SDK version number

"@aws-sdk/client-s3": "^3.533.0"

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

node: v20.11.1, chrome 122.0.6261.129

Reproduction Steps

Using:
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
const s3Client = new S3Client({ params...});
....
try {
const results = await s3Client.send(new PutObjectCommand(params));
} catch (err) {...}

---

Observed Behavior

And after run yarn run dev i get error in browser:

Uncaught SyntaxError: Unexpected token 'export' (at app.js:207575:1)

Expected Behavior

In my old version of OHIF everything ran fine when I installed the package. But in the new version it doesn’t work!

Possible Solution

I tried type module and various other solutions, such as * yarn add --dev @babel/plugin-transform-export-namespace-from*, but nothing helps!

Additional Information/Context

If you comment out the aws-sdk/client-s3 call, the rest of the application works without problems. But as soon as I divide the call, I immediately get an error in the browser.

[RanVaknin]

hi @AlekseiHead ,

The error you are seeing is related to ES6 code that is not supported on a browser you are running. Since you mentioned React, are you using Webpack to bundle your application?

I tried type module and various other solutions, such as * yarn add --dev @babel/plugin-transform-export-namespace-from*, but nothing helps!

If you do have a Webpack config file, can you please share it with us?

Thanks,
Ran~

[AlekseiHead]

HI @RanVaknin ! I'm glad you responded to my message!

Yes, I'm using Webpack to bundle the application. My application is an OHIF fork from the official repository.

I have webpack.config.babel.js here he is:

import fs from 'fs';
import webpack from 'webpack';

let nodeModules = fs.readdirSync('./node_modules')
    .filter((module) => {
        return module !== '.bin';
    })
    .reduce((prev, module) => {
        return Object.assign(prev, {[module]: 'commonjs ' + module});
    }, {});

export default {
    entry: ['./index.js'],
    output: {
        path: './dist',
        filename: 'index.js',
        library: 'electron-machine-id',
        libraryTarget: 'umd'
    },
    target: 'electron',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true
                }
            },
            {
                test: /\.json$/,
                loader: 'json'
            }
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/node_modules/),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            output: { comments: false },
        })
    ],
    node: {
        //do not include polyfills...
        //http://webpack.github.io/docs/configuration.html#node
        console: false,
        process: false,
        child_process: false,
        global: false,
        buffer: false,
        crypto: false,
        __filename: false,
        __dirname: false
    },
    externals: nodeModules
};