Cannot resolve 'env' in .../node_modules/argon2-browser/dist'

[afrancht]

I am following the example you have for node in my React application. I have added const argon2 = require('argon2-browser'); and I am trying to make use of argon2.hash(...). I encounter the following error for some reason.

[1] [ error ] ./node_modules/argon2-browser/dist/argon2.wasm
[1] Module not found: Can't resolve 'env' in '/path/node_modules/argon2-browser/dist'

I am new to using WASM in node so perhaps it's me not configuring things correctly. I have installed the npm module using npm install --save argon2-browser

Thank you for your time in advance!

[antelle]

Hi! Have you copied stuff from webpack.config?

[afrancht]

Yes! It still doesn't work!

Her is my webpack config file:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withImages(
  withCSS({
    target: 'server',
    module: {
      noParse: /\.wasm$/,
      rules: [
        {
          test: /\.wasm$/,
          loaders: ['base64-loader'],
          type: 'javascript/auto',
        },
      ],
    },
    webpack(config) {
      config.module.rules.push({
        test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192,
            publicPath: '/_next/static/',
            outputPath: 'static/',
            name: '[name].[ext]',
          },
        },
      });

      return config;
    },
  }),
);

and I have $ npm install --save argon2-browser

[antelle]

Could you please print the webpack config after all these withCss and such are applied, before it’s exported?

[afrancht]

I changed my config file to be:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

const webpackConfig = withImages(
  withCSS({
    target: 'server',
    module: {
      noParse: /\.wasm$/,
      rules: [
        {
          test: /\.wasm$/,
          loaders: ['base64-loader'],
          type: 'javascript/auto',
        },
      ],
    },
    webpack(config) {
      config.module.rules.push({
        test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192,
            publicPath: '/_next/static/',
            outputPath: 'static/',
            name: '[name].[ext]',
          },
        },
      });

      return config;
    },
  }),
);

console.log('webpack=>', webpackConfig);

module.exports = webpackConfig;

and this was the output:

webpack=> { target: 'server',
  module: { noParse: /\.wasm$/, rules: [ [Object] ] },
  webpack: [Function: webpack] }

[antelle]

Does the example work for you if you build it with this webpack version?

[afrancht]

This is what I've done. I've prefaced the lines in which I use argon2d with ~~~

/*
 * Login container
 */

// Import Modules
import React from 'react';
import styled from 'styled-components';
import Router from 'next/router';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { loginUser } from '../actions';
~~~ const argon2 = require('argon2-browser');

// Import styling
import { BackgroundImage, Absolute, Flex, Image, ButtonCircle } from 'rebass';

//Import Files

const StyledContainer = styled.div`
  height: 100vh;
  overflow-y: hidden;
  background: #005b9a;
`;

const StyledInput = styled.input`
  border: 2px solid #e1e8ee;
  width: 60%;
  border-radius: 4px;
  font-size: 1em;
  padding: 6px;
  margin-top: 5%;
`;

/* eslint-disable react/prefer-stateless-function */
class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  ~~~  console.log(
  ~~~  argon2.hash({
  ~~~      pass: 'p@ssw0rd',
   ~~~     salt: 'somesalt',
      }),
    );
  }

  // Dispatch action Login User
  callLoginUser = (email, password) => {
    console.log('calling login with: ->', email, password);
    this.props.loginUser(email, password, () => {
      Router.push('/dashboard');
    });
  };

  render() {
    const { email, password } = this.state;
    return (
      // a bunch of jsx
    );
  }
}

Login.propTypes = {
  dispatch: PropTypes.func,
};

function mapStateToProps() {
  return {};
}

export default connect(
  mapStateToProps,
  { loginUser },
)(Login);

[antelle]

I mean the example from here: https://github.com/antelle/argon2-browser/tree/master/examples/webpack

[afrancht]

I downloaded the code and ran npm install and then npm start and this is the console output:

I'm not sure how to run it though!

[antelle]

So it worked. Now you need to understand the difference between my config and yours.

[afrancht]

Coolio! I will try, how can I run your app though or how can I make it print stuff?

I ran a console log over you webapack config and I get the same regarding the wasm module

This is all the output:

webpackConfig=> { mode: 'production',
  entry: './argon2-demo-webpack.js',
  output:
   { path: '/Users/afrancht/git/webpack/dist',
     publicPath: 'dist/',
     filename: 'bundle.js' },
  node:
   { __dirname: false, fs: 'empty', Buffer: false, process: false },
  module: { noParse: /\.wasm$/, rules: [ [Object] ] } }

These are the rules:

webpackConfig.module.rules=> [ { test: /\.wasm$/,
    loaders: [ 'base64-loader' ],
    type: 'javascript/auto' } ]

And these are the rules for my project"

webpack.module.rules=> [ { test: /\.wasm$/,
    loaders: [ 'base64-loader' ],
    type: 'javascript/auto' } ]

[afrancht]

I was able to find some other error trace after I imported the module in another way (import * as argon2 from 'argon2-browser')

This is the output

[1] ModuleNotFoundError: Module not found: Error: Can't resolve 'env' in '/Users/afrancht/git/webapp_ps/node_modules/argon2-browser/dist'
[1]     at factory.create (/Users/afrancht/git/webapp_ps/front-end/node_modules/next/node_modules/webpack/lib/Compilation.js:823:10)
[1]     at factory (/Users/afrancht/git/webapp_ps/front-end/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
[1]     at resolver (/Users/afrancht/git/webapp_ps/front-end/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
[1]     at asyncLib.parallel (/Users/afrancht/git/webapp_ps/front-end/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
[1]     at /Users/afrancht/git/webapp_ps/front-end/node_modules/neo-async/async.js:2830:7
[1]     at /Users/afrancht/git/webapp_ps/front-end/node_modules/neo-async/async.js:6877:13
[1]     at normalResolver.resolve (/Users/afrancht/git/webapp_ps/front-end/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
[1]     at doResolve (/Users/afrancht/git/webapp_ps/front-end/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
[1]     at hook.callAsync (/Users/afrancht/git/webapp_ps/front-end/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
[1]     at _fn0 (eval at create (/Users/afrancht/git/webapp_ps/front-end/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[1]     at resolver.doResolve (/Users/afrancht/git/webapp_ps/front-end/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
[1]     at hook.callAsync (/Users/afrancht/git/webapp_ps/front-end/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
[1]     at _fn0 (eval at create (/Users/afrancht/git/webapp_ps/front-end/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[1]     at hook.callAsync (/Users/afrancht/git/webapp_ps/front-end/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
[1]     at _fn0 (eval at create (/Users/afrancht/git/webapp_ps/front-end/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
[1]     at resolver.doResolve (/Users/afrancht/git/webapp_ps/front-end/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)

[antelle]

how can I run your app though or how can I make it print stuff

There's an html file there, just open it :relaxed: but if it builds, it should work.

Which webpack version are you running? Do you maybe have a minimal example without other dependencies so that I can try it?

[afrancht]

I have tried opening the HTML and it works perfectly but it doesn't in my repo for some reason. I am using Webpack Version 4.39.2 and I am currently creating a minimal example so that I can show it to you!

Thank you so much with your help by the way!!! :)

[afrancht]

Hey @antelle,

I have created a minimal reproduction of my whole repo for you to see how it fails, all the information is on the readme file.

https://github.com/afrancht/wasm-reproduction

Thank you so much!

[ms140569]

Hi - this might be of help for guys wanting to integrate argon2-browser into Vue.js. All i had to do was:

• drop an additional webpack config into the root of the project. This will get merged with Vue's basic webpack setup:

vue.config.js:

module.exports = {
  configureWebpack: {
    module: {
      noParse: /\.wasm$/,
      rules: [
          {
              test: /\.wasm$/,
              loaders: ['base64-loader'],
              type: 'javascript/auto'
          }
      ]
  }
  }
}

• Adding the base64 encoder as a dependency:

package.json:

-    "argon2-browser": "^1.6.0"
+    "base64-loader": "^1.0.0",
+    "argon2-browser": "^1.9.0"
   },

[afrancht]

@ms140569 I've tried changing the version and adding the loader in the package.json but it still doesn't fix it. I am using React though.

[ms140569]

@afrancht : in the package.json file of your example there is:

"argon2-browser": "^1.8.0",

I'm using 1.9.0

HTH,

Matthias

[afrancht]

I have tried it locally and it doesn't work!

You can check out this branch and try! Perhaps I am missing something!

https://github.com/afrancht/wasm-reproduction/tree/argonbrowser1.9

[ms140569]

Nope - i have the very same problem ...

[ms140569]

@afrancht : why do you have this script include, although stuff ought to get packed by webpack:

https://github.com/afrancht/wasm-reproduction/blob/f2a8725895c46d5191d72b2adb287c2d492d22a8/pages/_app.js#L19

[afrancht]

@ms140569 Oh sorry, that has slipped in when I was trying literally everything to make it work. I've removed it and re-run it and it still doesn't work. I've pushed the change to the branch too.

[antelle]

@afrancht looks like you're writing webpack configuration not where it should be. Try this patch:

diff --git a/components/LandingPage.js b/components/LandingPage.js
index b3cbe7d..7ffec14 100644
--- a/components/LandingPage.js
+++ b/components/LandingPage.js
@@ -6,7 +6,7 @@ import { Flex, Box } from 'rebass';
 import { APPLICATION_NAME } from '../constants/Strings';

 // If you comment out the line below everything works, if not then you get the error.
-// const argon2 = require('argon2-browser');
+const argon2 = require('argon2-browser');

 class LandingPage extends React.PureComponent {
   render() {
diff --git a/next.config.js b/next.config.js
index 63a3095..c5b84ec 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,14 +5,7 @@ const webpackConfig = withImages(
   withCSS({
     target: 'server',
     module: {
-      noParse: /\.wasm$/,
-      rules: [
-        {
-          test: /\.wasm$/,
-          loaders: ['base64-loader'],
-          type: 'javascript/auto',
-        },
-      ],
+      rules: []
     },
     webpack(config) {
       config.module.rules.push({
@@ -27,6 +20,18 @@ const webpackConfig = withImages(
           },
         },
       });
+      config.module.rules.push({
+        test: /\.wasm$/,
+        loaders: ['base64-loader'],
+        type: 'javascript/auto',
+      });
+      config.module.noParse = /\.wasm$/;
+      config.node = {
+        __dirname: false,
+        fs: 'empty',
+        Buffer: false,
+        process: false
+      };

       return config;
     },
diff --git a/package.json b/package.json
index b6cfe6b..79eeda4 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "argon2-browser": "^1.8.0",
     "axios": "^0.19.0",
+    "base64-loader": "^1.0.0",
     "cross-env": "^5.0.1",
     "dotenv": "^6.2.0",
     "express": "^4.15.3",
diff --git a/pages/_app.js b/pages/_app.js
index f276f64..1e82f15 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -16,7 +16,6 @@ class MyApp extends App {
         <Helmet>
           <title>Privasee</title>
           <meta name="description" content="Dashboard Page" />
-          <script src="node_modules/argon2-browser/lib/argon2.js"></script>
           <link
             rel="stylesheet"
             href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"

[afrancht]

That worked! Fantastic! How did you figure it out?

[antelle]

Cool! It was a bit surprising that there are two configs, I thought, maybe one of them doesn’t work at all?