"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.base.js here he is:

// ~~ ENV
const dotenv = require('dotenv');
//
const path = require('path');
const fs = require('fs');

const webpack = require('webpack');

// ~~ PLUGINS
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserJSPlugin = require('terser-webpack-plugin');

// ~~ PackageJSON
// const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core
//   .rules;
// ~~ RULES
const loadShadersRule = require('./rules/loadShaders.js');
const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
const cssToJavaScript = require('./rules/cssToJavaScript.js');
const stylusToJavaScript = require('./rules/stylusToJavaScript.js');

// ~~ ENV VARS
const NODE_ENV = process.env.NODE_ENV;
const QUICK_BUILD = process.env.QUICK_BUILD;
const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';

// read from ../version.txt
const VERSION_NUMBER = fs.readFileSync(path.join(__dirname, '../version.txt'), 'utf8') || '';

const COMMIT_HASH = fs.readFileSync(path.join(__dirname, '../commit.txt'), 'utf8') || '';

//
dotenv.config();

const defineValues = {
  /* Application */
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
  'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
  'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM),
  'process.env.VERSION_NUMBER': JSON.stringify(VERSION_NUMBER),
  'process.env.COMMIT_HASH': JSON.stringify(COMMIT_HASH),
  /* i18n */
  'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''),
  'process.env.LOCIZE_PROJECTID': JSON.stringify(process.env.LOCIZE_PROJECTID || ''),
  'process.env.LOCIZE_API_KEY': JSON.stringify(process.env.LOCIZE_API_KEY || ''),
  'process.env.REACT_APP_I18N_DEBUG': JSON.stringify(process.env.REACT_APP_I18N_DEBUG || ''),
};

// Only redefine updated values.  This avoids warning messages in the logs
if (!process.env.APP_CONFIG) {
  defineValues['process.env.APP_CONFIG'] = '';
}

module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
  if (!process.env.NODE_ENV) {
    throw new Error('process.env.NODE_ENV not set');
  }

  const mode = NODE_ENV === 'production' ? 'production' : 'development';
  const isProdBuild = NODE_ENV === 'production';
  const isQuickBuild = QUICK_BUILD === 'true';

  const config = {
    mode: isProdBuild ? 'production' : 'development',
    devtool: isProdBuild ? 'source-map' : 'cheap-module-source-map',
    entry: ENTRY,
    optimization: {
      // splitChunks: {
      //   // include all types of chunks
      //   chunks: 'all',
      // },
      //runtimeChunk: 'single',
      minimize: isProdBuild,
      sideEffects: false,
    },
    output: {
      // clean: true,
      publicPath: '/',
    },
    context: SRC_DIR,
    stats: {
      colors: true,
      hash: true,
      timings: true,
      assets: true,
      chunks: false,
      chunkModules: false,
      modules: false,
      children: false,
      warnings: true,
    },
    cache: {
      type: 'filesystem',
    },
    module: {
      noParse: [/(codec)/, /(dicomicc)/],
      rules: [
        {
          test: /\.js$/,
          enforce: 'pre',
          use: 'source-map-loader',
        },
        transpileJavaScriptRule(mode),
        loadWebWorkersRule,
        // loadShadersRule,
        {
          test: /\.m?js/,
          resolve: {
            fullySpecified: false,
          },
        },
        cssToJavaScript,
        // Note: Only uncomment the following if you are using the old style of stylus in v2
        // Also you need to uncomment this platform/app/.webpack/rules/extractStyleChunks.js
        // stylusToJavaScript,
        {
          test: /\.wasm/,
          type: 'asset/resource',
        },
      ], //.concat(vtkRules),
    },
    resolve: {
      mainFields: ['module', 'browser', 'main'],
      alias: {
        // Viewer project
        '@': path.resolve(__dirname, '../platform/app/src'),
        '@components': path.resolve(__dirname, '../platform/app/src/components'),
        '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
        '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
        '@state': path.resolve(__dirname, '../platform/app/src/state'),
        'dicom-microscopy-viewer':
          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
        '@cornerstonejs/dicom-image-loader':
          '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
      },
      // Which directories to search when resolving modules
      modules: [
        // Modules specific to this package
        path.resolve(__dirname, '../node_modules'),
        // Hoisted Yarn Workspace Modules
        path.resolve(__dirname, '../../../node_modules'),
        path.resolve(__dirname, '../platform/app/node_modules'),
        path.resolve(__dirname, '../platform/ui/node_modules'),
        SRC_DIR,
      ],
      // Attempt to resolve these extensions in order.
      extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '*'],
      // symlinked resources are resolved to their real path, not their symlinked location
      symlinks: true,
      fallback: {
        fs: false,
        path: false,
        zlib: false,
        buffer: require.resolve('buffer'),
      },
    },
    plugins: [
      new webpack.DefinePlugin(defineValues),
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
      // Uncomment to generate bundle analyzer
      // new BundleAnalyzerPlugin(),
    ],
  };

  if (isProdBuild) {
    config.optimization.minimizer = [
      new TerserJSPlugin({
        parallel: true,
        terserOptions: {},
      }),
    ];
  }

  if (isQuickBuild) {
    config.optimization.minimize = false;
    config.devtool = false;
  }

  return config;
};

[RanVaknin]

Hi @AlekseiHead,

I'm not able to see something obvious in your setup that is wrong. The next step would be for you to provide a minimal github repository that I can clone and see if I can debug on my own.
Ideally the github repository should have the bare minimal amount of code needed to raise this behavior, so that it would be easier for us to investigate and isolate the problem.

Thanks,
Ran~

[github-actions]

This issue has not received a response in 1 week. If you still think there is a problem, please leave a comment to avoid the issue from automatically closing.

[AlekseiHead]

Hi @RanVaknin,
Thanks for your reply. Sorry for the long reply. It will take me a bit more time to prepare a minimal github repository that will contain a minimal amount of code. This is because I will need to lighten up most of my component (where the error occurs) and the OHIF application too. I will try to do it as soon as possible.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.