1

Whenever I use the namor package, I get this error:

ERROR in ./node_modules/crypto-extra/dist/encryption.js 6:31-48
Module not found: Error: Can't resolve 'crypto' in '/Users/user/projects/test/chakra-ui-header-bug/node_modules/crypto-extra/dist'

I've tried all the answers here to no avail.

My index.tsx

import React from "react";
import ReactDOM from "react-dom";

//import App from "./app"

import namor from "namor"
const aa = namor.generate({ words: 1, numbers: 0 })


ReactDOM.render(
    <div>1</div>,
    document.getElementById("root")
);

My package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "namor": "^2.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.3.5"
  },
  "devDependencies": {
    "@types/react-dom": "^17.0.9",
    "html-webpack-plugin": "^5.3.2",
    "ts-loader": "^9.2.3",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

My webpack.config.js:

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
});


module.exports = {
  entry: "./src/index.tsx",
  
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
    ],
  },
  devtool: "source-map",

  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
    symlinks: true
  },

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    htmlPlugin
  ],

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000 ,
  },
};

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "jsx" : "react"
  },
}
ABC
  • 693
  • 1
  • 10
  • 22
  • `crypto` is a NodeJS module (to put it simply, server-side javascript only). There are some alternatives available such as `crypto-js` which can also be used in client-side javascript. – nbokmans Jul 20 '21 at 17:17
  • @nbokmans I'm not directly using `crypto`. I'm simply trying to use the `namor` package. How can I use `namor`? – ABC Jul 20 '21 at 17:18
  • If `namor` has an underlying dependency on `crypto`, then that won't be possible I'm afraid. – nbokmans Jul 20 '21 at 17:19
  • @nbokmans Then how come I can get it to work in codesandbox? It simply doesn't work locally. https://codesandbox.io/s/friendly-breeze-fi8oq?file=/src/index.tsx – ABC Jul 20 '21 at 17:21
  • 1
    Not verified, but probably because CodeSandbox spins up a temporary NodeJS instance to actually run your application (code sandbox) against. – nbokmans Jul 20 '21 at 17:22
  • Because it isn't possible in your setup to use crypto, use Faker instead - https://www.npmjs.com/package/faker. – Bret Oct 27 '21 at 14:16

0 Answers0