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

TheVaporTrail · 2018-04-18T17:29:41Z

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.

The text was updated successfully, but these errors were encountered:

richardzcode · 2018-04-18T17:47:09Z

Hey @TheVaporTrail what is your webpack config?

TheVaporTrail · 2018-04-18T18:07:53Z

For sampleProj, I did not specify a webpack config; webpack is using its default config. I do have a webpack config for the new project that I created yesterday where I first encountered this problem; in that config I set module.exports.target = web and also tried module.exports.output.libraryTarget = umd

Please let me know if there is a particular webpack config you would like me to test.

glsorre · 2018-04-25T08:53:40Z

I have the same problem.

Ligia-Andreica · 2018-04-27T15:57:34Z

I also have this issue, when upgrading from v0.2.15 to v0.3.0/ v0.3.3.

Uncaught ReferenceError: require is not defined
at eval (instanceOf.mjs:34)
at Object../node_modules/graphql/jsutils/instanceOf.mjs (bundle.049ce279dc9b79fc16ef.js:11109)
at webpack_require (bundle.049ce279dc9b79fc16ef.js:712)
at fn (bundle.049ce279dc9b79fc16ef.js:95)
at eval (definition.mjs?6b12:1)
at Object../node_modules/graphql/type/definition.mjs (bundle.049ce279dc9b79fc16ef.js:11433)
at webpack_require (bundle.049ce279dc9b79fc16ef.js:712)
at fn (bundle.049ce279dc9b79fc16ef.js:95)
at eval (validate.mjs?f778:1)
at Object../node_modules/graphql/type/validate.mjs (bundle.049ce279dc9b79fc16ef.js:11505)

GraphQL is just a peer dependency in project.
├─ aws-amplify@0.3.3
│ ├─ graphql@^0.13.1

roks0n · 2018-05-01T12:01:57Z

I'm having the same issue, also wanted to upgrade from v0.2.15 to v0.3.3. Getting the same error on v0.3.0

roks0n · 2018-05-02T15:07:40Z

Just want to update that I've also bumped GraphQL from 0.13.1 to 0.13.2 but got the same error.

heapwolf · 2018-05-02T15:27:17Z

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).

danielhep · 2018-05-06T18:08:53Z

Just wanted to say I have the exact same problem with the GraphQL module, even if I do not include it in my project.

juliedavila · 2018-05-07T12:21:00Z

Can also confirm this behavior. I agree with @0x00A, not sure why all possible deps like graphql are implicitly included instead of requiring end users to explicitly install these types of things if they require features that leverage them. AFAIK you can use aws-amplify without ever really needing graphql (or react for that mattter).

usamaejaz · 2018-05-08T15:05:52Z

I am also getting the same error.

dreamniker · 2018-05-08T20:13:09Z

I am also getting the same error

usamaejaz · 2018-05-08T20:16:55Z

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

matt-erhart · 2018-05-08T23:41:14Z

Ran into this error as well, but I do want to use the simple graphql API bits.

Stereobit · 2018-05-09T11:07:09Z

Same here :-/ I played with a bunch of webpack config changes but nothing helpt.

Stereobit · 2018-05-09T11:35:57Z

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.

roks0n · 2018-05-09T11:59:14Z

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

daveharding · 2018-06-14T12:25:49Z

Yes! Thanks @Stereobit - this solved the problem for me, too!

jordanranz · 2018-07-03T21:07:29Z

Closing this issue as there seems to be a valid fix. Please reopen this issue if the fix does not work or you have more questions.

juliedavila · 2018-07-05T12:27:56Z

@jordanranz regarding extra/not-needed dependencies (like graphql), should that be a separate issue then?

aws-amplify/amplify-js#686 (comment)

* Fix .mjs issue with GraphQL 0.13.2 graphql/graphql-js#1272 (comment) * Fix .mjs still referencing "require" aws-amplify/amplify-js#686 (comment)

@todo

* v2 (#630) * Webpack v4 (#525) * (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin * (feat) Upgrades eslint-loader and replaces setup for before (devServer) * (feat) Updates some loaders to work with webpack v4 * Add thread-loader, extract-text-webpack-plugin@beta.0 Adds thread-loader and extract-text-webpack-plugin beta. * Remove automatic vendor bundling, add @todo * Remove lock * (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor * Fix TS HMR * Bump to latest webpack * Update README.md * Move to Yarn Workspaces, fix tests * Remove unused scripts for bootstrap and clean * v2.0.0-alpha.1 * v2.0.0-alpha.2 * v2.0.0-alpha.3 * Drop extract-text for mini-css. Bump start-server (no more refreshes) * Update docs with new hot restart behavior * Make `rs` an h3 in docs * v2.0.0-alpha.4 * Update package descriptions * Bump mini-css-extract-plugin to 0.3.0 (#559) * Add Multistep true so webpack 4 HMR can work (#558) * Bump deps, fix TS example * v2.0.0-alpha.5 * Changed name of the about page component: Home -> About (#561) * chore(package): update lerna to version 2.9.1 (#560) * including polyfills in production build (#562) * Fix logic on polyfill inclusion * v2.0.0-alpha.6 * Fix boolean * v2.0.0-alpha.7 * s/your/you (#566) * Replace clientCompiler before serverCompiler (#569) * Update README.md (#564) Fixed links to Node Inspector docs * Add an example with Hyperapp (#549) * Setup Hyperapp example Enable HMR Don't touch the yarn lock Cleanup Keep naming convention Don't touch preact Reverse formatting on the preact example * Undo formatting something in the preact example Fix formatting Fix formatting Fix formatting Fix format * 2.0.0-alpha.7 * Bump hyperapp version * Add Koa usage example (#533) * Add Koa usage example * Extend Koa example documentation * Make app use default koa styles and logo * Correct Koa URL on doc * Add webpack bar (#563) * Remove yarn.lock from Koa example * Bump deps * v2.0.0-alpha.8 * add emitFile in url-loader options (#576) * Add elm-package post on circleci * Move elm install to dependencies.pre * Use npm to install elm globally * Install elm not elm-package. lol. * Bump deps * v2.0.0-y.0 * Update readme * v2.0.0-alpha.9 * Limiting HMR to App (#577) * #fix starting server code after compile assets (sync) (#575) * Use webpack-dev-server-speedy for perf boost! * v2.0.0-alpha.10 * Bump Webpack to 4.6.0 * v2.0.0-alpha.11 * Fix uglify options * v2.0.0-alpha.12 * Update ESLint (#588) * Upgrade typescript example (#589) * ♻️ Cleanup random keystrokes in Home component * ✨ Upgrade deps and TypeScript. Now supports the new fragment syntax<></> * 👨🏼‍🎨 Add myself to the contributers list * 📏 Prietier linting fixes * Update README.md * Update README.md * Better defaults for Typescript example (#593) * Better defaults for Typescript example After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking. Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments. * Update razzle.config.js * Remove raf from examples (#601) * Remove raf from all examples * Add package-lock and yarn-lock to .gitignore in examples. * Change env stringify so it doesn't overwrite process.env (#611) * Razzle plugins + razzle-typescript-plugin (#605) * Add a plugin system * Add razzle-typescript-plugin * Change TypeScript example to use razzle-typescript-plugin * Small refactor to helpers * Add myself to contributors * Use fork-ts-checker-webpack-plugin instead of tslint-loader * Make useBabel false by default * Add esModuleInterop, remove console tslint rules * Improve README * Moved loaderFinder to razzle-dev-utils * Remove -- from circle.yml * Fix start test now that logger has changed * Fix shell output * Don't silence razzle build test * Teardown beforeAll * Remove 'use strict' from build fixtures * Update README for v2 * v2.0.0 * Fix #632. Pass webpack to config in build.js * v2.0.1 * 👨🏻‍💻 Include all contributors (#631) * Removing thread-loader (#634) * v2.0.2 * Include the crossorigin attribute link updated (#635) reason: It seems that the content is moved since to this new URL. * Adding server source map support (#516) * Bump deps * Boost perf of TS plugin during dev with suggested Outlook optimizations * v2.0.3 * Fix useBabel use option in razzzle-plugin-typescript (#639) * Add useEslint option to razzle-plugin-typescript (#640) Useful if you wish to use babel, without eslint * Update readme's * v2.0.4 * Upgrade razzle package - jest ^22.4.3 (#648) * Upgrade razzle package - jest ^22.4.3 * Revert version no change * Close #653. Use correct Snyk badges * Update babel-eslint to 8.x so that decorators will work using babel-plugin-transform-decorators-legacy. See: babel/babel-eslint#275 (#649) * Add carrot to babel-eslint * Remove consola (redundant) * v2.1.0 * Add WebpackConfigHelpers + Vue, Elm plugins (#655) * Add WebpackConfigHelpers + Vue, Elm plugins * Fix elm plugin * Add razzle-plugin-php * Add disclaimer about php plugin * More patches * fix elm plugin * Update elm * Add info about razzle-plugin-elm * Update docs * v2.1.1 * Fix package names * Fix 'server' typo (#658) * latest jest (#656) * Bump deps * Squat on more potential plugins * v2.2.0 * Bump babel-loader to remove incompatibility warning with Webpack 4. (#659) * Fix Elm example (#661) * preserve the full --inspect= flag as passed to yarn start (#660) * preserve the full --inspect= flag as passed to yarn start instead of treating it as a boolean * update --inspect docs & comments * added example razzle + react router 3 (#539) * added example razzle + react router 3 * Remove yarn.lock * Fix pkg.json * Add polka example (#520) * Add polka example Serves as a generic express middleware-compatible server example. (related to jaredpalmer/after.js#77) * Remove with-polka/setupTests.js * Remove yarn.lock * Adding testEnvironmentOptions to supportedKeys for Jest (#678) * fix koa hmr (#693) * Add pretty node errors (#691) * Ignore column from source map and only use pretty errors if file is read (#696) * Add documentation for CSS Modules (#694) * Erik Engi added to the contributors section (#700) * Update README.md * Introduce config.modifyBabelOptions (#702) I’ve found that the babel configuration is important to modify in my environment. Specifically in my env, I’d like to set `babelrc: false` so that the .babelrc file is ignored, and a custom babel configuration could be provided in the `razzle.config.js`. * add support for function as plugin (#704) * add mdx loader (#711) * Mdx improve (#712) * add peer dependency, ipdate install instruction * update readme * Fix .mjs issue with GraphQL 0.13.2 (#715) * Fix .mjs issue with GraphQL 0.13.2 graphql/graphql-js#1272 (comment) * Fix .mjs still referencing "require" aws-amplify/amplify-js#686 (comment) * remove package-lock.json * Make readme's match * v2.3.0 * Revert "v2.3.0" This reverts commit 361bb0c. * v2.4.0 * Fix production sourcemaps (#717) * Create stale.yml * Add loadable-components example (#598) * Update createJestConfig.js (#719) Add globals to the allowable jest config overrides * Use the correct port when PORT is not set (#723) * Add Now deployment example (#728) * Duplicated basic example * Renamed package name * Updated readme for Now * Added post Now build process hook * Tweaked README format and content * Add Heroku deployment example (#727) * Duplicated basic exmaple * Updated readme with Heroku instructions * Renamed package name * added Heroku post-build command in Procfile * Updated package.json: - added post pre-start hook to trigger build on Heroku - moved razzle to main deps for Heroku build process * Consistent reference to Heroku app name * Update README.md * Update package.json * Update README.md * Fix for '[HMR] You need to restart the application!' on server sided err * Mdx plugin improvements (#732) * resolving path to @mdx-js/tag, fix loader options * del peerDep, improve readme * add example * Change import to require * cleanup: remove .js extensions from require * React Loadable example: add css chunks (#746) * point people looking at CHANGELOG.md to the release notes page (#747) * Update css chunks: use [name] instead of [id] (#750) * Fix HMR : client was not working + mismatch between server/client (#749) * remove mention of extract text plugin from react native web example (#752) * Update examples to recover from HMR error (#763) * add CLIENT_PUBLIC_PATH env var for local dev environments that don't use localhost (e.g. VMs, Docker) (#761) * Set template package version back to 0.1.0 (#760) * CLIENT_PUBLIC_PATH default was being set in two places that computed different values. Remove the erroneous one. (#779) * Correct example name in curl (#772) * Feature/scss plugin (#786) * add scss plugin and fixes to makeLoaderFinder * add readme for scss plugin * fix test regex for including .css * remove jest forceExit * add contributors * refactor tests * add plugin options * edit readme for better options knowledge * change node-sass to node-sass-chokidar * Use npx (#783)

github-actions · 2021-06-13T16:08:52Z

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

mlabieniec added question General question Build Related to build issues labels Apr 21, 2018

roks0n mentioned this issue May 2, 2018

Google login not creating entries in User pool (not using Hosted UI) #778

Closed

elorzafe assigned manueliglesias May 7, 2018

jordanranz closed this as completed Jul 3, 2018

hyandell unassigned manueliglesias Jul 13, 2018

ericclemmons added a commit to ericclemmons/razzle that referenced this issue Jul 29, 2018

Fix .mjs still referencing "require"

261e8e9

aws-amplify/amplify-js#686 (comment)

jaredpalmer pushed a commit to jaredpalmer/razzle that referenced this issue Jul 29, 2018

Fix .mjs issue with GraphQL 0.13.2 (#715)

39ea3a6

* Fix .mjs issue with GraphQL 0.13.2 graphql/graphql-js#1272 (comment) * Fix .mjs still referencing "require" aws-amplify/amplify-js#686 (comment)

aldarund mentioned this issue Sep 17, 2018

load mjs files as javascript/auto nuxt/nuxt#3906

Closed

7 tasks

corydeppen mentioned this issue Sep 30, 2018

Runtime error when loading mjs files gatsbyjs/gatsby#8655

Closed

airandfingers mentioned this issue Feb 8, 2019

Runtime Error "require is not defined" when bundling with webpack graphql/graphiql#721

Closed

github-actions bot locked as resolved and limited conversation to collaborators Jun 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

TheVaporTrail commented Apr 18, 2018 •

edited

Loading

richardzcode commented Apr 18, 2018

TheVaporTrail commented Apr 18, 2018

glsorre commented Apr 25, 2018

Ligia-Andreica commented Apr 27, 2018

roks0n commented May 1, 2018 •

edited

Loading

roks0n commented May 2, 2018

heapwolf commented May 2, 2018 •

edited

Loading

danielhep commented May 6, 2018

juliedavila commented May 7, 2018

usamaejaz commented May 8, 2018

dreamniker commented May 8, 2018

usamaejaz commented May 8, 2018

matt-erhart commented May 8, 2018

Stereobit commented May 9, 2018

Stereobit commented May 9, 2018 •

edited

Loading

roks0n commented May 9, 2018 •

edited

Loading

daveharding commented Jun 14, 2018

jordanranz commented Jul 3, 2018

juliedavila commented Jul 5, 2018

github-actions bot commented Jun 13, 2021

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

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

Comments

TheVaporTrail commented Apr 18, 2018 • edited Loading

richardzcode commented Apr 18, 2018

TheVaporTrail commented Apr 18, 2018

glsorre commented Apr 25, 2018

Ligia-Andreica commented Apr 27, 2018

roks0n commented May 1, 2018 • edited Loading

roks0n commented May 2, 2018

heapwolf commented May 2, 2018 • edited Loading

danielhep commented May 6, 2018

juliedavila commented May 7, 2018

usamaejaz commented May 8, 2018

dreamniker commented May 8, 2018

usamaejaz commented May 8, 2018

matt-erhart commented May 8, 2018

Stereobit commented May 9, 2018

Stereobit commented May 9, 2018 • edited Loading

roks0n commented May 9, 2018 • edited Loading

daveharding commented Jun 14, 2018

jordanranz commented Jul 3, 2018

juliedavila commented Jul 5, 2018

github-actions bot commented Jun 13, 2021

TheVaporTrail commented Apr 18, 2018 •

edited

Loading

roks0n commented May 1, 2018 •

edited

Loading

heapwolf commented May 2, 2018 •

edited

Loading

Stereobit commented May 9, 2018 •

edited

Loading

roks0n commented May 9, 2018 •

edited

Loading