Unexpected Token 'export'

[loveheenavasu]

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 am using Electron, and the following error is shown on running the "npm start" command.
Any suggestions or anyone has ever faced a similar issue?

some dependencies

 "webpack": "^4.46.0",
 "webpack-cli": "^3.3.12",
 "webpack-dev-server": "3.11.1",
 "webpack-manifest-plugin": "2.2.0",
 "webpack-node-externals": "^1.7.2",
 "@aws-sdk/client-s3": "^3.292.0",
 "s3-sync-client": "^3.0.3",
 "electron": "^12.2.3",
 "electron-builder": "^23.6.0",
 "electron-devtools-installer": "^2.2.4",
 "electron-notarize": "^1.1.1",
 "electron-rebuild": "^3.2.5",
 "electron-updater": "^4.6.5",

webpack config

module: {
    noParse: [/aws\-sdk/],
}

Added the above code to resolve the following error

[0] ERROR in ./node_modules/@aws-sdk/property-provider/dist-es/chain.js 7:24 [0] Module parse failed: Unexpected token 

(7:24) [0] You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file

SDK version number

3.292.0

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

14.16.0

Reproduction Steps

Error caused by running the "npm start" command

Observed Behavior

Uncaught SyntaxError: Unexpected token 'export'
    at Object../node_modules/@aws-sdk/client-s3/dist-es/index.js (main-bundle.js:3405)
    at __webpack_require__ (main-bundle.js:790)
    at fn (main-bundle.js:101)
    at eval (webpack-internal:///…s3-sync-client.js:1)
    at Object../node_modules/s3-sync-client/lib/s3-sync-client.js (main-bundle.js:91055)
    at __webpack_require__ (main-bundle.js:790)
    at fn (main-bundle.js:101)
    at eval (webpack-internal:///…ient/lib/index.js:1)
    at Object../node_modules/s3-sync-client/lib/index.js (main-bundle.js:91044)
    at __webpack_require__ (main-bundle.js:790)
    at fn (main-bundle.js:101)
    at Module.eval (webpack-internal:///…ploadManagerV2.js:3)
    at eval (webpack-internal:///…oadManagerV2.js:176)
    at Module../app/models/UploadManagerV2.js (main-bundle.js:2908)
    at __webpack_require__ (main-bundle.js:790)
    at fn (main-bundle.js:101)

Expected Behavior

The project should run as normal. But getting the mentioned errors

Possible Solution

No response

Additional Information/Context

No response

[RanVaknin]

Hi @loveheenavasu ,

Can you provide us with some more info? Contents of package json and your actual code?
My assumptions is that you are trying to use ES6 imports but you didn't specify that in your budnler / config.
This doesn't look like an SDK issue, but rather a config problem either with npm or with Electron.

Please check out this stackoverflow thread.

Thanks,
Ran~

[loveheenavasu]

Hi @RanVaknin ,
I tried to replicate the error on a similar repo. I am providing the link here .
You can reach out to the "/app/aws/index.js" file for reference.
I just Imported the two packages(@aws-sdk/client-s3 and s3-sync-client).

[0] Module parse failed: Unexpected token (8:41)
[0] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[0] |         this.maxAttemptsProvider = maxAttemptsProvider;
[0] |         this.mode = RETRY_MODES.ADAPTIVE;
[0] >         const { rateLimiter } = options ?? {};
[0] |         this.rateLimiter = rateLimiter ?? new DefaultRateLimiter();
[0] |         this.standardRetryStrategy = new StandardRetryStrategy(maxAttemptsProvider);
[0]  @ ./node_modules/@aws-sdk/util-retry/dist-es/index.js 1:0-40 1:0-40
[0]  @ ./node_modules/@aws-sdk/middleware-retry/dist-es/delayDecider.js
[0]  @ ./node_modules/@aws-sdk/middleware-retry/dist-es/index.js
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/S3Client.js
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/index.js
[0]  @ ./app/aws/index.js
[0]  @ ./app/App.js
[0]  @ ./app/main.js
[0]  @ multi @babel/polyfill ./app/main.js
[0] 
[0] ERROR in ./node_modules/@aws-sdk/middleware-user-agent/dist-es/user-agent-middleware.js 9:30
[0] Module parse failed: Unexpected token (9:30)
[0] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[0] |         return next(args);
[0] |     const { headers } = request;
[0] >     const userAgent = context?.userAgent?.map(escapeUserAgent) || [];
[0] |     const defaultUserAgent = (await options.defaultUserAgentProvider()).map(escapeUserAgent);
[0] |     const customUserAgent = options?.customUserAgent?.map(escapeUserAgent) || [];
[0]  @ ./node_modules/@aws-sdk/middleware-user-agent/dist-es/index.js 2:0-40 2:0-40
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/S3Client.js
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/index.js
[0]  @ ./app/aws/index.js
[0]  @ ./app/App.js
[0]  @ ./app/main.js
[0]  @ multi @babel/polyfill ./app/main.js

I am getting this error on multiple files.

[yenfryherrerafeliz]

Hi @loveheenavasu, this issue is indeed a transpiling issue. Basically, the errors you see there happens because due to that we use optional chaining, which is a feature introduced as part of ES2020, and probably older browsers will not support it. That is why we need to use a transpiler, which in this case I see you are using babel. I am still working on trying to adjust the configuration you have set in the test repo for reproducing, but still not able to make it work. However, by transpiling the @AWS-SDK folder manually it made the errors to be gone.
For example, I ran the following command from the root directory of the project:

npx babel node_modules/@aws-sdk --out-dir node_modules/@aws-sdk --presets=@babel/preset-env

And the command above did the trick. Nonetheless I will keep trying to find the best way around this and I will update this thread with new details.

Thanks!

[WolfyUK]

I had a similar issue consuming this package from NextJS, which no longer uses Babel by default. I found the specific submodules that were causing me problems and added the following to my next.config.js as per the docs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
  transpilePackages: [
    "@aws-sdk/fetch-http-handler",
    "@aws-sdk/signature-v4",
  ],
};

module.exports = nextConfig;

[juztinlazaro]

@yenfryherrerafeliz any news?

[juztinlazaro]

also having an issue

npx babel node_modules/@aws-sdk --out-dir node_modules/@aws-sdk --presets=@babel/preset-env
npx serverless deploy --stage $stage --verbose

not working