amplify-js: aws-amplify 0.3.0: "Uncaught ReferenceError: require is not defined" when packaged with webpack

Do you want to request a feature or report a bug? Bug

What is the current behavior? Absolutely minimal app (only uses ‘import Amplify’) results in browser [MacOS Chrome v65] ‘Uncaught ReferenceError: require is not defined’ error when loading page

Chrome reports that the error is on the “require” line:

, function(e, t, n) {
    "use strict";
    (function(e) {
        t.a = function(e, t) {
            return e instanceof t
        }
    }
    ).call(this, require("./../../process/browser.js"))
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than AWS Amplify.

package.json:

{
  "name": "sampleProj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "aws-amplify": "^0.3.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack && cp -r ./dist/* ~/Sites/localhost/sampleProj/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.js:

import Amplify, { Analytics, Logger, Storage, Auth }  from 'aws-amplify';
import aws_exports from "./aws-exports";

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>sampleProj</title>
	<script src="main.js"></script>
</head>
<body>
sampleProj
</body>
</html>

Steps

mkdir sampleProj && cd sampleProj
npm init -y
npm install webpack webpack-cli --save-dev
awsmobile init xxxxx
mkdir -p ~/Sites/localhost/sampleProj/
npm run build

What is the expected behavior? Successful start-up of Amplify code

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions? Occurs with version 0.3.0. Does not occcur with 0.2.11 Tested only with MacOS Chrome v65

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 20 (2 by maintainers)

Commits related to this issue

Fix .mjs still referencing "require" https://github.com/aws-amplify/amplify-js/issues/686#issuecomment-387710340 — committed to ericclemmons/razzle by ericclemmons 6 years ago
Fix .mjs issue with GraphQL 0.13.2 (#715) * Fix .mjs issue with GraphQL 0.13.2 https://github.com/graphql/graphql-js/issues/1272#issuecomment-377384574 * Fix .mjs still referencing "require" ... — committed to jaredpalmer/razzle by ericclemmons 6 years ago
Sync the next branch with master (#794) * v2 (#630) * Webpack v4 (#525) * (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModule... — committed to jaredpalmer/razzle by nimaa77 6 years ago

Most upvoted comments

Ok, I found something that helped. Graphql-js uses .mjs as file extension which caused issues with the webpack build. Adding

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

to my webpack rules helped.

+52

Stereobit on May 9, 2018

I can confirm that what @Stereobit wrote also fixed my issue. Thanks!

roks0n on May 9, 2018

Just tried to upgrade from 0.2.15 to 0.3.0 (also tried 0.3.3) and everything breaks. The problem appears to be in the graphql module. EDIT: I’m also not using graphql (not sure why it’s in here, it makes amplify feel kitchen-sink-ish).

heapwolf on May 2, 2018

I downgraded to 0.2.x for now and 0.2.x worked for me without this error.

usamaejaz on May 8, 2018