You may need an additional loader to handle the result of these loaders. @smithy/smithy-client

EssDevUi commented 1 year ago

Checkboxes for prior research

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

Describe the bug

I've Installed the packages using yarn and when installation is completed . I do yarn start and it's just keep throwing this error

./node_modules/@smithy/smithy-client/dist-es/default-error-handler.js 11:21 Module parse failed: Unexpected token (11:21) File was processed with these loaders:

./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | const statusCode = $metadata.httpStatusCode ? $metadata.httpStatusCode + "" : undefined;
| const response = new exceptionCtor({
```
name: parsedBody?.code || parsedBody?.Code || errorCode || statusCode || "UnknownError",
```
| $fault: "client", | $metadata

SDK version number

"aws-sdk": "^2.1459.0",

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

18.17.1

Reproduction Steps

just add the following packags :

{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@apollo/client": "^3.5.5",
        "@aws-amplify/ui-react": "^1.2.14",
        "@casl/ability": "^5.4.3",
        "@casl/react": "^2.3.0",
        "@craco/craco": "^6.3.0",
        "@date-io/date-fns": "^2.11.0",
        "@date-io/dayjs": "2.x",
        "@date-io/luxon": "^2.11.1",
        "@hookform/resolvers": "^2.7.1",
        "@material-ui/core": "^4.12.3",
        "@material-ui/data-grid": "^4.0.0-alpha.37",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.60",
        "@material-ui/pickers": "^3.3.10",
        "@material-ui/styles": "^4.11.5",
        "@react-aria/visually-hidden": "^3.2.3",
        "@sentry/react": "^6.16.1",
        "@sentry/tracing": "^6.16.1",
        "@storybook/addon-actions": "^6.3.7",
        "@storybook/addon-essentials": "^6.3.9",
        "@storybook/addon-links": "^6.3.8",
        "@storybook/node-logger": "^6.3.12",
        "@storybook/preset-create-react-app": "^3.2.0",
        "@storybook/react": "^6.3.12",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^13.2.1",
        "@types/lodash": "^4.14.175",
        "@types/node": "^16.11.1",
        "@types/react": "^17.0.13",
        "@types/react-dom": "^17.0.9",
        "@types/react-router": "^5.1.16",
        "@types/react-router-dom": "^5.3.0",
        "apollo-link-http": "^1.5.17",
        "aws-amplify": "^4.2.3",
        "aws-appsync": "^4.1.2",
        "aws-sdk": "^2.1459.0",
        "axios": "^0.23.0",
        "chart.js": "^3.7.1",
        "clsx": "^1.1.1",
        "craco-less": "^1.20.0",
        "cypress": "^8.3.1",
        "dayjs": "^1.10.6",
        "dotenv": "^16.0.0",
        "file-saver": "^2.0.5",
        "json2csv": "^5.0.7",
        "lodash": "^4.17.21",
        "notistack": "1.0.10",
        "plop": "^2.7.4",
        "pretty-quick": "^3.1.1",
        "qrcode.react": "^3.1.0",
        "react": "^17.0.1",
        "react-chartjs-2": "^4.1.0",
        "react-dom": "^17.0.1",
        "react-dropzone": "^11.4.2",
        "react-error-boundary": "^3.1.3",
        "react-gtm-module": "^2.0.11",
        "react-hook-form": "^7.15.1",
        "react-map-gl": "^6.1.17",
        "react-masonry-css": "^1.0.16",
        "react-router-dom": "^5.3.4",
        "react-s3-uploader": "^5.0.0",
        "react-scripts": "^4.0.2",
        "react-use": "^17.3.1",
        "sentence-case": "^3.0.4",
        "shortid": "^2.2.16",
        "subscriptions-transport-ws": "^0.9.19",
        "tinycolor2": "^1.4.2",
        "typescript": "^4.3.5",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-scripts --openssl-legacy-provider start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "say-hello": "echo 'Hello World!'",
        "codegen": "cd .. && yarn generate",
        "storybook": "start-storybook -p 6006 -s public",
        "plop": "plop",
        "lint": "prettier --write \"**/**/*.{ts,tsx,json}\"",
        "cypress:open": "yarn cypress open",
        "cypress:run": "yarn cypress run"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "plugin:jsx-a11y/recommended"
        ],
        "plugins": [
            "jsx-a11y"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@craco/craco": "^6.3.0",
        "@storybook/addon-actions": "^6.3.7",
        "@storybook/addon-essentials": "^6.3.9",
        "@storybook/addon-links": "^6.3.8",
        "@storybook/node-logger": "^6.3.12",
        "@storybook/preset-create-react-app": "^3.2.0",
        "@storybook/react": "^6.3.12",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^13.2.1",
        "@types/file-saver": "^2.0.5",
        "@types/json2csv": "^5.0.3",
        "@types/node": "^16.11.1",
        "@types/react": "^17.0.13",
        "@types/react-dom": "^17.0.9",
        "@types/react-gtm-module": "^2.0.1",
        "@types/react-router": "^5.1.16",
        "@types/react-router-dom": "^5.3.0",
        "@types/shortid": "^0.0.29",
        "@types/tinycolor2": "^1.4.3",
        "http-proxy-middleware": "^2.0.1",
        "husky": "^7.0.2",
        "lint-staged": "^11.2.6",
        "plop": "^2.7.4",
        "pretty-quick": "^3.1.1",
        "storybook-addon-apollo-client": "^4.0.9",
        "tsc-files": "^1.1.2",
        "typescript": "^4.3.5"
    },
    "husky": {
        "hooks": {
            "pre-commit": "pretty-quick --staged"
        }
    }
}

Observed Behavior

when all packages are installed it should work properly but it's throwing errors or additional loaders i'm using typscript here is tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts",
    "**/node_modules"
  ]
}

Expected Behavior

everything should work my node version is 18.17.1 and i use nvm so i've another 16.16.0 but package error is same on both versions

Possible Solution

No response

Additional Information/Context

No response

RanVaknin commented 1 year ago

Hi @EssDevUi ,

"aws-sdk": "^2.1459.0" is the JS SDK v2 and is not meant to work with packages from @smithy, for that you need to use the JS SDK v3 imports which should look like @aws-sdk/<package>

So yarn install @aws-sdk/client-s3 or whichever package you need.

Let me know if this helps. Thanks, Ran~

EssDevUi commented 1 year ago

No bro it doesn't work when i Install the package and start the project the issue is same in the console let me post a screenshot so you will get to know what i mean

when i did yarn start it doesn't start the project and throw this error @RanVaknin

EssDevUi commented 1 year ago

and smithy packages are installed by default when we install the aws sdk. it is not getting used anywhere on the frontend but still i'm getting this error @RanVaknin I need your help on priority

EssDevUi commented 1 year ago

Special Note: I must have to work with this sdk version I can't upgrade it to latest so please help me to fix this issue

kubakunc commented 1 year ago

I have exactly the same issue

Failed to compile.

./node_modules/@smithy/smithy-client/dist-es/default-error-handler.js 11:21
Module parse failed: Unexpected token (11:21)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const statusCode = $metadata.httpStatusCode ? $metadata.httpStatusCode + "" : undefined;
|   const response = new exceptionCtor({
>     name: parsedBody?.code || parsedBody?.Code || errorCode || statusCode || "UnknownError",
|     $fault: "client",
|     $metadata

EssDevUi commented 1 year ago

I have exactly the same issue

Failed to compile.

./node_modules/@smithy/smithy-client/dist-es/default-error-handler.js 11:21
Module parse failed: Unexpected token (11:21)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const statusCode = $metadata.httpStatusCode ? $metadata.httpStatusCode + "" : undefined;
|   const response = new exceptionCtor({
>     name: parsedBody?.code || parsedBody?.Code || errorCode || statusCode || "UnknownError",
|     $fault: "client",
|     $metadata

How did you generated this issue did you use my packages ?

kubakunc commented 1 year ago

No, my packages

"dependencies": {
    "@aws-amplify/auth": "^4.3.10",
    "@aws-amplify/ui-react": "^1.2.20",
    "@aws-sdk/client-appsync": "^3.36.1",
    "@awsui/collection-hooks": "^1.0.21",
    "@awsui/components-react": "^3.0.307",
    "@craco/craco": "^6.4.5",
    "@faker-js/faker": "^8.0.2",
    "@tanstack/match-sorter-utils": "^8.8.4",
    "@tanstack/react-table": "^8.9.11",
    "aws-amplify": "^4.3.4",
    "aws-appsync": "^4.1.2",
    "axios": "^0.24.0",
    "formik": "^2.2.9",
    "graphql-tag": "^2.12.5",
    "jest": "26.6.0",
    "md5": "^2.3.0",
    "moment": "^2.29.4",
    "react": "^17.0.2",
    "react-apollo": "^3.1.5",
    "react-csv-reader": "^3.4.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.4.0",
    "react-json-table-v2": "^0.1.9",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "react-toastify": "^8.0.8",
    "redux": "^4.1.1",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "yup": "^0.32.11"
  },

This is an old project and im trying to run it after some time

kubakunc commented 1 year ago

@EssDevUi i updated https://www.npmjs.com/package/react-scripts and now it works

EssDevUi commented 1 year ago

@EssDevUi i updated https://www.npmjs.com/package/react-scripts and now it works

Only one package ?

kubakunc commented 1 year ago

@EssDevUi i updated https://www.npmjs.com/package/react-scripts and now it works

Only one package ?

yes

EssDevUi commented 1 year ago

@EssDevUi i updated https://www.npmjs.com/package/react-scripts and now it works

Only one package ?

yes

which node version you are using ?

kubakunc commented 1 year ago

I tried on 16 and 18 and it works well

EssDevUi commented 1 year ago

I tried on 16 and 18 and it works well

I'm also using both version using NVM but let me update the script i'll let you know in a while

EssDevUi commented 1 year ago

I tried on 16 and 18 and it works well

I tried the issue gone but now

ERROR in ./node_modules/dotenv/lib/main.js 3:11-24
Module not found: Error: Can't resolve 'os' in 'E:\projects\stella\frontend\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

ERROR in ./node_modules/dotenv/lib/main.js 4:15-32
Module not found: Error: Can't resolve 'crypto' in 'E:\projects\stella\frontend\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

webpack compiled with 2 errors and 24 warnings

RanVaknin commented 1 year ago

Hi @EssDevUi ,

Im glad you got the first error to resolve.

The second error is self explanatory and is unrelated to the AWS SDK. Webpack 5 no longer automatically includes polyfills for Node.js core modules like os and crypto. So when you upgraded from Webpack 4 to Webpack 5, these automatic polyfills were removed, causing the error you are seeing.

You need to update your webpack.config with the necessary fallbacks. Please see this stackoverflow thread.

Thanks, Ran~

github-actions[bot] commented 1 year ago

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.

aws / aws-sdk-js-v3