package.json with `"type": "module"` cause error when `amplify push`

[yaquawa]

Describe the bug package.json with "type": "module" be set cause the following error when I run amplify push

Must use import to load ES Module: /Users/x/Document/www/src/aws-exports.js
require() of ES modules is not supported.
require() of /Users/x/Document/www/src/aws-exports.js from /Users/x/.npm-global/lib/node_modules/@aws-amplify/cli/node_modules/amplify-frontend-javascript/lib/frontend-config-creator.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename aws-exports.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/x/Documents/www/package.json.

An error occurred during the push operation: Must use import to load ES Module: /Users/Document/www/aws-exports.js
require() of ES modules is not supported.
require() of /Users/x/Document/www/aws-exports.js from /Users/x/.npm-global/lib/node_modules/@aws-amplify/cli/node_modules/amplify-frontend-javascript/lib/frontend-config-creator.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename aws-exports.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/x/Documents/www/package.json.

Amplify CLI Version 4.30.0

node.js Version v14.11.0

[jhockett]

Hi @yaquawa, can you please share more details about how this error came about? What does amplify status show?

[yaquawa]

@jhockett I think this is a webpack 5 compatibility problem. I'm using laravel-mix to bundle the js files, which it's utilizing webpack 5. I didn't see errors like this before I upgraded to webpack 5.

[jhockett]

I'm going to close this then @yaquawa. If it turns out that webpack 5 isn't causing the issue, comment below and the issue can be reopened.

[yaquawa]

Hi @jhockett I don't think this is an "issue" of WebPack, some library like graphql-js already supports webpack 5 as of its latest version.

I believe this can be fixed by simply changing aws-exports.js to aws-exports.mjs if the upstream(amplify-cli) is using commonjs.

By the way amplify-cli still depends on the old version of graphql-js so I have to replace the old one with the latest one manually.

[rodgco]

Hi @jhockett just to reinforce that this topic still not solved, and I agree with @yaquawa that this is not related to WebPack. I'm having the same issue trying to use the newly release SvelteKit with static distribution and console deploy.

It seems that as part of the "amplify push" process the aws-exports.js is required by "amplify-frontend-javascript/lib/frontend-config-creator.js", and as the whole project is of type module it should have been imported.

I took a look at the code and found this piece where apparently there is a tentative to circumvent it, but it seems not working. Couldn't deep dive on it to come with a PR.

    if (isPackaged) {
      // if packaged, we can't load an ES6 module because pkg doesn't support it yet
      const es5export = 'module.exports = {default: awsmobile};\n';
      const es6export = 'export default awsmobile;\n';
      const fileContents = fs.readFileSync(targetFilePath, 'utf-8');
      fs.writeFileSync(targetFilePath, fileContents.replace(es6export, es5export));
      awsExports = require(targetFilePath).default;
      fs.writeFileSync(targetFilePath, fileContents);
    } else {
      awsExports = require(targetFilePath).default; 
    }

[jhockett]

Hi @rodgco, thanks for the detailed information. I'll add this to our triaging project so this can get better visibility.

Sorry @yaquawa, I missed your comment somehow and never followed up.

[cjihrig]

I don't think this is a Webpack issue. The error message comes from Node. I think the long term solution is to move to import(), but I don't think we could get away with that yet due to varying ESM support in Node versions.

We might be able to do something similar to the code in https://github.com/aws-amplify/amplify-cli/issues/5691#issuecomment-808574722... read the file, write it back out as CJS to a file with the .cjs extension, require it, and then delete the .cjs file.

[asmajlovicmars]

Same error for me trying to push sveltekit static build with amplify.

Must use import to load ES Module: /Users/a/code/sveltekit/svk5/src/aws-exports.js
An error occurred during the push operation: Must use import to load ES Module: /Users/a/code/sveltekit/svk5/src/aws-exports.js

[EdwinFdoGarcia]

• AWS Amplify 4.46.1
• Node v15.12.0.
• MAC OS big sur 11.2.3

We started some academic exercises to deploy applications with Svelte-Kit in aws amplify, playing with Appi, storage ... etc.

Installation method: mkdir my-app cd my-app npm init svelte @ next npm install npm run dev - --open

• when starting the cloud environment it shows an error: (Error [ERR_REQUIRE_ESM])

• We understand that it could be an Amplify ESM support error so we created the same academic exercise with Svelte-Sapper but now it works! We can deploy our academic project with Svelte-Sapper!

[rodgco]

As far as I understand Sapper is not ESM based, so this test deviates from the original problem that is Amplify Support for ESM based projects like SvelteKit.

[sinedie]

Hey there. Im using svelte kit with amplify. This error happens to me when I have already created aws-exports.js. When I delete it everything goes fine. I can do it manually when doing a change to the backend locally, but when using the hosting CI/CD I can not. Is there a workaround for this?, I just need to update my frontend, should be a simple node app (that build to static) and dont even need to update a single service on my backend. I can handle that by my own, but even if i dont put anything about the backend in the pipeline definition it tries to update the it or at least pull it.

[24jr]

Is there any update on this. Seams like been a while and people have same issue which leads me to suspect its not repairable easily. Supabase works easy and fine. Would like to use aws amplify ui console and sveltekit though. Actually I dont get error when I dont want to edit backend locally (which i dont). So thats good now just need to figure out how to make calls to database and what not

[michaelcuneo]

For me, adding Amplify to my SvelteKit Project where type: is "module" was fairly easy... I did exactly what the error suggested.... I watched it initialise and fail, then I renamed the aws-exports extension from .js to .cjs

Then I ran amplify init again... said 'Yes' to existing environment, selected 'dev' ... and everything is now fine.

After any amplify commands I have to remove the .cjs and rename the .js to .cjs again.

It's slightly annoying, but easily fixed.

[sinedie]

@michaelcuneo That works locally, but when you are going to use CI/CD, it throws an error in the server and you can't change the extension there.

[seethroughdev]

Not sure if this is helpful to anyone, but after having all the same issues, I was able to get CI/CD working with SvelteKit and Amplify with the following:

• I created the app manually in the amplify console instead of CLI. (big New App button on the top right)
• Added a preBuild command in build settings to upgrade node nvm install 14
• Manually added the aws-exports.cjs file in src of my repo and pushed repo to GitHub.
• Connected the main branch in the amplify console.

It all seems to be working so far. I'm guessing with this process aws-exports.cjs isn't being overwritten. Not ideal, but works and I have access to all the amplify features like access-control etc..!

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 14
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

[laverdet]

The problem here is that Amplify CLI writes out an ES6 module: aws_exports.js.ejs but then attempts to require it as a CommonJS module: frontend-config-creator.js. It's like trying to execute a C++ program with nodejs, these are different file formats. There's documentation here: https://nodejs.org/api/packages.html

My suggestion to the Amplify team is to convert that template file into a CommonJS file and output with a .cjs extension. For the users of Amplify CLI I suggest replacing export default awsmobile; with module.exports = awsmobile; perhaps with an Amplify hook.

[Nxtra]

The problem here is that Amplify CLI writes out an ES6 module: aws_exports.js.ejs but then attempts to require it as a CommonJS module: frontend-config-creator.js. It's like trying to execute a C++ program with nodejs, these are different file formats. There's documentation here: https://nodejs.org/api/packages.html

My suggestion to the Amplify team is to convert that template file into a CommonJS file and output with a .cjs extension. For the users of Amplify CLI I suggest replacing export default awsmobile; with module.exports = awsmobile; perhaps with an Amplify hook.

This hook solutions sounds reasonable. Changing manually all the time would be a headache. Which hooks are we talking about here? post-push.js and post-pull.js maybe?

[Nxtra]

I am trying to set this up with Amplify hooks.

@laverdet , changing export default awsmobile; to with module.exports = awsmobile; gives me an undefined error in my react app on all the exported values. Eg.

  import awsmobile from './aws-exports.cjs';
...
  const env = awsmobile['aws_user_files_s3_bucket'].slice(envStart + 1);

package.json : type: "module" TypeError: awsmobile.aws_user_files_s3_bucket is undefined

Any idea what's going on there?

[jacksonkernion]

Any updates on this? I've tried a bunch of different suggestions in this thread but my SvelteKit app will not build properly on Amplify.

[jetslambda]

What worked for me was changing package.json type: "module" to type: "commonjs" of course that changes babel and nodes interpretation of the code so it won't work for everyone. Leaving this as a suggestion that may help others.

[kriti-eco]

I'm trying to follow steps mentioned here - https://docs.amplify.aws/cli/function/#graphql-from-lambda to call GraphQL API from lambda. As soon as I add "type": "module" to package.json , it starts throwing an error on amplify mock command. As per above link I need to import node-fetch but I'm not able to do it. Lambda code is just a hello-world code as of now, just changing package.json starts creating this problem.

stack: 'Error: Could not load lambda handler function due to Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[laverdet]

@kriti-eco try installing node-fetch@2 instead. Version 3 made a strict cutover to modules. I recommend kicking the can down the road until Amplify can better support modules.

[hanna-becker]

None of the workarounds mentioned here work for our use case. We now have pre/post push/pull hooks to replace the type from module to commonjs before the operation and back to module afterwards to get the CI build working. There were several other places where buggy/non-existing ESM support in Amplify caused trouble after we upgraded to Angular 13/14 that only ships ES modules. I really hope proper ESM support is something the Amplify team will address, soon.

[laverdet]

I really hope proper ESM support is something the Amplify team will address, soon.

I have bad news for you

[vadimmelnicuk]

Any updates on this?

[michaelcuneo]

@vadimmelnicuk I've managed to get this working from the following flow...

1: amplify init or amplify init project then let it fail. 2: rename aws-exports to .cjs extension. 3: copy aws-exports to .js so there is both a .cjs and .js in the project. 4: Remove type: "module" from package.json. 5: All subsequent pushes will be successful.

[vadimmelnicuk]

@michaelcuneo Brilliant, thanks. It worked :)

[Karol-Perec]

Hello everyone, if you want to have ES Modules working with Amplify CI pipeline, you need to change amplifyPush script behaviour. I tweaked it in my own project. It is available in https://github.com/Karol-Perec/wykopX/blob/master/scripts/amplifyPush.sh. So you just need to add this custom script to your repository, for example to scripts/amplifyPush.sh, just like I did. Then you need to update your CI backend build pipeline to execute custom script instead of the built-in one:

backend:
  phases:
    build:
      commands:
        - sh scripts/amplifyPush.sh --simple

TLDR: i just added renaming aws-exports.js to aws-exports.cjs before running amplify init, so every of your CI pipelines will work with ES Modules out of the box.

[armenr]

This bug is killing us on a project we're attempting to deliver.

It's really bad. +1 for needing a non-hacky fix, please!

[armenr]

@Karol-Perec and ALL:

A way to do this without introducing a custom amplifyPull script:

echo "Stashing package.json"
cp package.json package.json.bak

echo "Removing type: module and writing modified package.json"
jq -c 'del(.type)' package.json.bak > package.json

echo "Running Amplify command"
eval $cmd

echo "Restoring package.json"
mv package.json.bak package.json

or

echo "Removing type: module and writing modified package.json"
jq -c 'del(.type)' package.json.bak > package.json

echo "Running Amplify command"
eval $cmd

echo "Restoring package.json"
git checkout package.json