nrwl nx support

[kiliancabrera]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

Describe the bug

I have installed the aws-amplify library in my nx project and when I use the configure I get all these errors

NX version: 15.8.6

Expected behavior

that the library works as it should in my nx project

Reproduction steps

1. install library

2. user configure function

3. see error

Code Snippet

import { Amplify } from 'aws-amplify'

Amplify.configure({
  Auth: {
    userPoolId: 'xxxxxxxx',
    region: 'xxxxxx',
    userPoolWebClientId: 'xxxxxx',
  },
})

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[tannerabread]

Hi @kiliancabrera, thanks for opening this issue.

I was able to reproduce your errors with minimal setup as a standalone react project with webpack as the bundler. I do not believe we currently support Nx OOTB so I will mark this as a feature-request for now and discuss it further with the team this week.

[mattcat10]

I also ran into this problem when attempting to update NX recently.

[tannerabread]

@mattcat10 you had this working before recently?

[mattcat10]

@mattcat10 you had this working before recently?

Yeah, it was working fine with NX v15.4.4 and
"@aws-amplify/ui-react": "^4.3.6",
"aws-amplify": "^5.0.11"

I ran into the same errors as stated above when updating to NX 15.8.5. I tried adding pollyfills for most all the missing libraries and still get a bunch of build/runtime errors.

Here is a repo to reproduce https://github.com/mattcat10/nx-amplify-error

[kiliancabrera]

Hi! many thanks for the answers! Unfortunately I have had install the latest version that work in my app, the version is

"aws-amplify": "4.3.8"

I will be attentive to your comments. Thanks!

[tannerabread]

I have it reproduced on Nx v15.9.2, using a Webpack config/bundler.

I noticed when trying to make a project with 15.4.4 it doesn't ask if I want to use Webpack or Vite and just chooses Vite by default, @mattcat10 can you confirm if your project was on webpack before the upgrade?

I was able to get the amplify library working with the Nx v15.4.4 project using Vite by adding in the following to my vite.config.ts:

...(process.env.NODE_ENV === 'development'
    ? {
      define: {
        global: {},
      },
    }
    : {}),
  resolve: {
    alias: {
      ...(process.env.NODE_ENV !== 'development'
        ? {
          './runtimeConfig': './runtimeConfig.browser', //fix production build
        }
        : {}),
    },
  },

This led me to try new versions of Nx with Vite config rather than webpack and that works as well. This seems to be a common problem with upgrading Nx, and I found the workaround here by updating the webpack.config.js
This gives me a webpack.config.js like the following:

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.resolve.mainFields = ['browser', 'module', 'main'];
  return config;
});

This seems to work for me with the versions of the amplify library that I checked, can one of you test this and see if it fixes your errors as well?

[kiliancabrera]

Hi @tannerabread I installed the latest version with the config that you passed and works perfectly, many thanks for the quickly solution. I believe that we could close the issue if you want!
you're the best!

[tannerabread]

Glad that worked for you @kiliancabrera!

I will leave it open until @mattcat10 can confirm as well

[mattcat10]

@tannerabread Adding config.resolve.mainFields = ['browser', 'module', 'main']; to the webpack config worked. Thanks!

[tannerabread]

glad to hear it! I will close this issue and try to find a place in the docs to include the config steps

[orlaqp]

I know this is closed but maybe you can help me understand my issue which is pretty close. The only difference in my environment is that I am using micro frontend architecture with Nx / React / AWS Amplify. I did create a small repo with a standard React app and indeed your suggestion fixed the issue @tannerabread but in my MFE architecture it does not seem to have the same effect which to be honest does not make sense to me. This is how my webpack.config.json looks like:

const { composePlugins, withNx } = require("@nrwl/webpack");
const { withReact } = require("@nrwl/react");
const { withModuleFederation } = require("@nrwl/react/module-federation");

const baseConfig = require("./module-federation.config");

const config = {
  ...baseConfig,
    resolve: {
        mainFields: ['browser', 'module', 'main']
    }
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config)
);

Any idea what I would be missing here?

[orlaqp]

I found my own answer right after posting this :-). I updated my config file to look like this instead:

const { composePlugins, withNx } = require("@nrwl/webpack");
const { withReact } = require("@nrwl/react");
const { withModuleFederation } = require("@nrwl/react/module-federation");

const baseConfig = require("./module-federation.config");

const config = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config),
  (config) => {
    config.resolve.mainFields = ['browser', 'module', 'main'];
    return config;
  }
);

[tannerabread]

Sorry I was slow to respond @orlaqp but glad you found the answer and thanks for leaving it here in case anyone else has the same issue!