您试图导入位于项目 src/ 目录之外的.../node_modules/console-browserify/index.js

Question

I keep getting the below error when trying to build on AWS Amplify. I don't really understand the error as the node_modules packages should be built by Amplify. (Or course it's outside the src directory - it's a Node package

Is there a solution to this?

2022-07-15T12:18:10.405Z [INFO]: Failed to compile.
2022-07-15T12:18:10.411Z [INFO]: Module not found: Error: You attempted to import /codebuild/output/src341411582/src/react-sol/node_modules/console-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
                                 You can either move it inside src/, or add a symlink to it from project's node_modules/.

This is my webpack.config.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  plugins: {
    add: [
      new webpack.ProvidePlugin({
        process: "process/browser.js",
      }),
      new NodePolyfillPlugin({
        excludeAliases: ['console-browserify'], //have tried with and without this
      }),
    ],
  },
  node: {
    fs: "empty",
  },
};

package.json (I've listed everything)

{
  "name": "mb-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.2.1",
    "@emailjs/browser": "^3.6.2",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@fontsource/akaya-telivigala": "^4.5.6",
    "@fontsource/cabin-sketch": "^4.5.7",
    "@fontsource/sora": "^4.5.8",
    "@metaplex-foundation/js": "^0.11.7",
    "@solana-mobile/wallet-adapter-mobile": "^0.0.1-alpha.1",
    "@solana/pay": "^0.2.0",
    "@solana/spl-token": "^0.2.0",
    "@solana/wallet-adapter-base": "^0.9.8",
    "@solana/wallet-adapter-react": "^0.15.7",
    "@solana/wallet-adapter-react-ui": "^0.9.9",
    "@solana/wallet-adapter-wallets": "^0.16.7",
    "@solana/web3.js": "^1.47.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^14.0.0",
    "@toruslabs/openlogin": "^2.2.0",
    "@walletconnect/web3-provider": "^1.7.8",
    "@web3auth/web3auth": "^1.1.0",
    "antd": "^4.21.0",
    "aws-sdk": "^2.1170.0",
    "bignumber.js": "^9.0.2",
    "bootstrap": "^5.1.3",
    "ethereumjs-abi": "^0.6.8",
    "framer-motion": "4.1.17",
    "fs": "^0.0.1-security",
    "fs-webpack-plugin": "^3.1.3",
    "gsap": "^3.10.4",
    "jquery": "^3.6.0",
    "moralis": "^1.9.0",
    "node-polyfill-webpack-plugin": "^2.0.0",
    "react": "^18.2.0",
    "react-blockies": "^1.4.1",
    "react-bootstrap": "^2.4.0",
    "react-confetti": "^6.1.0",
    "react-dom": "^18.2.0",
    "react-moralis": "^1.4.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.0",
    "react-spinners": "^0.12.0",
    "react-typewriter-effect": "^1.1.0",
    "react-use": "^17.4.0",
    "serve": "^13.0.2",
    "styled-components": "^5.3.5",
    "swiper": "^8.2.5",
    "typescript": "^4.7.3",
    "web-vitals": "^2.1.4",
    "web3uikit": "^0.1.166"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "defaults"
    ]
  },
  "devDependencies": {
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

Answer 1

Alias for console-browserify inside node-polyfill-webpack-plugin is console. Try this:

module.exports = {
  plugins: {
    add: [
      new webpack.ProvidePlugin({
        process: "process/browser.js",
      }),
      new NodePolyfillPlugin({
        excludeAliases: ['console'],
      }),
    ],
  },
  node: {
    fs: "empty",
  },
};