Module not found: Error: Can't resolve 'fs' in 'node_modules\antlr4' Laravel 6 about lforms

[BrunoGGM]

Solution, go to webpack.mix.js and add

mix.webpackConfig({ node: { fs: 'empty' }});

[plynchnlm]

I'm glad you found a solution to the problem. If you would still like us to look into this, we would need to know:

1. What version of lforms were you using?
2. What command did you run to produce that error?

[BrunoGGM]

1. lforms: "24.1.0"
2. npm run watch

npm run development -- --watch
@ development D:\project
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

10% building 1/1 modules 0 active
webpack is watching the files…

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                                                                                                  8:10:08
This dependency was not found:

* fs in ./node_modules/antlr4/CharStreams.js, ./node_modules/antlr4/FileStream.js

To install it, you can run: npm install --save fs
   Asset       Size   Chunks             Chunk Names
+ /css/app.css    177 KiB  /js/app  [emitted]  /js/app   
+ js/app.js   6.77 MiB  /js/app  [emitted]  /js/app   
+ \css\all.css     39 KiB           [emitted]
+ fonts/vendor/bootstrap/dist/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   19.7 KiB           [emitted]
+ fonts/vendor/bootstrap/dist/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    106 KiB           [emitted]
+ fonts/vendor/bootstrap/dist/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   44.3 KiB           [emitted]
+ fonts/vendor/bootstrap/dist/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb   17.6 KiB           [emitted]
+ fonts/vendor/bootstrap/dist/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   22.9 KiB           [emitted]
+ images/vendor/autocomplete-lhc/source/down_arrow_gray_10_10.png?4132a6bfb0e59f9584040b12d7535a07  119 bytes           [emitted]
+ images/vendor/autocomplete-lhc/source/magnifying_glass.png?763c744f99ee16ac3c99560a9c7fe0b7  292 bytes           [emitted]
+ images/vendor/lforms/app/signal-stop.png?81196e9a93dbdf10e08432093c95194f   5.04 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-bg_glass_75_d0e5f5_1x400.png?eb83aeb42fd8d8f74c93b391951bcf44  394 bytes           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-bg_glass_85_dfeffc_1x400.png?a697d8fd8a5adbdb87faf8d78a90e755  399 bytes           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-bg_glass_95_fef1ec_1x400.png?d699723af8436eba22b885328314bd55  390 bytes           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-bg_gloss-wave_55_5c9ccc_500x100.png?c56ba853727c57c51ab90b9e27f7f2d3   5.74 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-bg_inset-hard_100_f5f8f9_1x100.png?eb961b27be02a26af523a68d5774aa6b  391 bytes           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-bg_inset-hard_100_fcfdfd_1x100.png?63b926c3d199d7774678ec2f1cfeb44a  350 bytes           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_217bc0_256x240.png?33aede1050c87faf490ee203d3d47699   4.57 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_2e83ff_256x240.png?db3b908bd060c6f278fde9e11b3b94e3   4.57 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_469bdd_256x240.png?ed2f2ba37982b5f821d46811a5f79836   4.57 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_6da8d5_256x240.png?72019f22cbcf7555f4bc97aa383f164f   4.57 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_cd0a0a_256x240.png?a6a39c47239fcdbbe6e1d5bfaa7adac3   4.57 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_d8e7f3_256x240.png?06f311c437236b376b247382bf815c71   4.57 KiB           [emitted]
+ images/vendor/lforms/app/styles/redmond-theme/ui-icons_f9bd01_256x240.png?c34e7954fb08d6d72348b49032dc4876   4.57 KiB           [emitted] 


- ERROR in ./node_modules/antlr4/CharStreams.js
- Module not found: Error: Can't resolve 'fs' in 'D:\SIGEME\node_modules\antlr4'
- @ ./node_modules/antlr4/CharStreams.js 11:20-33
- @ ./node_modules/antlr4/index.js
- @ ./node_modules/fhirpath/src/parser/index.js
- @ ./node_modules/fhirpath/src/fhirpath.js
- @ ./node_modules/lforms/app/scripts/fhir/R4/fhirRequire.js
- @ ./resources/js/bootstrap.js
- @ ./resources/js/app.js
- @ multi ./resources/js/app.js ./resources/sass/app.scss

- ERROR in ./node_modules/antlr4/FileStream.js
- Module not found: Error: Can't resolve 'fs' in 'D:\SIGEME\node_modules\antlr4'
- @ ./node_modules/antlr4/FileStream.js 14:20-33
- @ ./node_modules/antlr4/index.js
- @ ./node_modules/fhirpath/src/parser/index.js
- @ ./node_modules/fhirpath/src/fhirpath.js
- @ ./node_modules/lforms/app/scripts/fhir/R4/fhirRequire.js
- @ ./resources/js/bootstrap.js
- @ ./resources/js/app.js
- @ multi ./resources/js/app.js ./resources/sass/app.scss

[Browsersync] Proxying: http://127.0.0.1:8000
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.68:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Watching files...

I did what the console output says "npm install --save fs" and it didn't solve anything, my solution was the one I shared

[BrunoGGM]

Information of my dependencies

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19.2",
        "bootstrap": "^4.1.0",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "eslint": "^6.8.0",
        "eslint-plugin-vue": "^7.0.0-alpha.0",
        "jquery": "3.4.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "fs": "0.0.1-security",
        "lforms": "^24.1.0",
        "moment": "^2.24.0",
        "vue-router": "^3.1.6",
        "vue-sweetalert2": "^3.0.3",
        "vuex": "^3.1.3"
    }
}

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.2",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "^6.0",
        "laravel/helpers": "^1.2",
        "laravel/passport": "7.5.1",
        "laravel/telescope": "^3.2",
        "laravel/tinker": "^1.0"
    },
    "require-dev": {
        "beyondcode/laravel-dump-server": "^1.0",
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^3.0",
        "phpunit/phpunit": "^8.0"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/"
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ]
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

[plynchnlm]

I see in package.json you have: "fs": "0.0.1-security". This is essentially an empty package. It is not the Node.js "fs" package. You should probably remove "fs" from your package.json (though it might not affect the error you are getting).

[BrunoGGM]

Effectively I removed the dependency "fs" the result is the same

[plynchnlm]

I am not sure what to do about it, other that what you did with adding "{ node: { fs: 'empty' }}" to the webpack config. That appears in our webpack configuration for both fhirpath.js and lforms. The instructions for antlr at https://github.com/antlr/antlr4/blob/master/doc/javascript-target.md say to do "require('antlr4')", which as you can see in your stacktrace, eventually pulls in "fs", even though it is not used.

[plynchnlm]

We have made some changes to how we include antlr4, which does not really need "fs" to run, and it now (in 24.1.1) it should not longer be necessary to add "{ node: { fs: 'empty' }}" to your webpack configuration.