Can't seem to load browser friendly parser

[Janther]

If trying to load the browser friendly parser I get an empty object.

const parser = require('@solidity-parser/parser');
console.log(parser) // { ParserError: [Getter], parse: [Getter], tokenize: [Getter], visit: [Getter] } 

const parser = require('@solidity-parser/parser/dist/index.iife');
console.log(parser) // {}

[Janther]

If I load it as it's own file I have access to window.SolidityParser but that would mean that I'd have to override the prettier-solidity-plugin behaviour, I made it work but it does look like a hack.

[Janther]

after some battling with this, I was able to make this work in a not too hacky way.

// We tell webpack to use the browser friendly package.
wepackConfig.resolve.alias["@solidity-parser/parser"] = "@solidity-parser/parser/dist/index.iife.js";
wepackConfig.module.rules = [
  {
    // We tell webpack to append "module.exports = SolidityParser;" at the end of the file.
    test: require.resolve("@solidity-parser/parser/dist/index.iife.js"),
    loader: "exports-loader",
    options: {
      type: "commonjs",
      exports: "single SolidityParser",
    },
  },
  ...wepackConfig.module.rules
];
if (isEnvDevelopment) {
  // Had some issues on development server with this strategy but works on production.
  wepackConfig.module.noParse = /@solidity-parser\/parser/;
}

[fvictorio]

Ideally the browser output would be UMD instead of an IIFE, but sadly esbuild doesn't support UMD yet: evanw/esbuild#507 There seems to be an ugly workaround: evanw/esbuild#507 (comment)

[aquiladev]

any updates so far?

[fvictorio]

@aquiladev sorry, no. I think there are some manual shenanigans that I could do; if this is blocking something important for you I can try to do it one of these days.

[aquiladev]

the issue crashed remix sol2uml plugin, I'm thinking to revert it to previous version

[fvictorio]

@aquiladev Oh, that sucks. Are you on telegram? Can you DM me?

[ulasanil]

I am working on a project that runs purely on browser and I wasn't able to load this package. With a little bit of debugging I found the following code was the cause of the problem in src/tokens-string.js:

if (typeof BROWSER !== "undefined") {
  module.exports = require('./antlr/Solidity.tokens')
} else {
  module.exports = require('fs')
    .readFileSync(require('path').join(__dirname, './antlr/Solidity.tokens'))
    .toString()
}

For some reason, BROWSER variable is always undefined and this causes problems on the bundler side because there is no fs module on browser. So what I did was to replace BROWSER with window object to detect if the package is running in the browsers context:

if (typeof window !== "undefined") {
  module.exports = require('./antlr/Solidity.tokens')
} else {
  module.exports = require('fs')
    .readFileSync(require('path').join(__dirname, './antlr/Solidity.tokens'))
    .toString()
}

With this change, everything worked flawlessly. Now I need to mention that I am pretty new to whole Typescript, bundler stuff so maybe what I did was unnecessary or unrelated to the issue raised here. But still, I wanted to share it here in case it might help someone.

[FrozenKiwi]

In webpack (>5?) you can skip the fs check by:

  resolve: {
    fallback: {
      "fs": false,
      "path": false,
    }
  }

You can also get past (typeof BROWSER !== "undefined") without editing the src by using Webpack DefinePlugin

   ...
  plugins: [
    new webpack.DefinePlugin({
      BROWSER: true,
    }),

[tonisives]

I also have this problem in AWS lambda environment

{
  "errorType": "Error",
  "errorMessage": "ENOENT: no such file or directory, open '/var/task/antlr/Solidity.tokens'",
  "trace": [
    "Error: ENOENT: no such file or directory, open '/var/task/antlr/Solidity.tokens'",
    "    at Object.openSync (node:fs:585:3)",
    "    at Object.readFileSync (node:fs:453:35)",
    "    at /var/task/app.js:65:22368",
    "    at /var/task/app.js:34:14107",
    "    at /var/task/app.js:276:98592",
    "    at /var/task/app.js:1:222",
    "    at Object.<anonymous> (/var/task/app.js:277:2424)",
    "    at Module._compile (node:internal/modules/cjs/loader:1105:14)",
    "    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)",
    "    at Module.load (node:internal/modules/cjs/loader:981:32)"
  ]
}

FindingsApi:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: src/finding/
      Handler: app.lambdaHandler
      
      Runtime: nodejs16.x
      Architectures:
        - x86_64
      Events:
        Finding:
          Type: Api
          Properties:
            Path: /finding
            Method: ANY
      Policies:
        - AmazonDynamoDBFullAccess
        - AmazonSESFullAccess
      AutoPublishAlias: live
    Metadata:
      BuildMethod: esbuild
      BuildProperties:
        Minify: true
        Target: "es2020"
        EntryPoints:
          - app.ts

[Janther]

I also have this problem in AWS lambda environment

this is how remix-project loads it.
at some point they load @solidity-parser/parser/dist/index.iife.js and the call the global variable SolidityParser we use a similar strategy in prettier-plugin-solidity but we automated at the webpack configuration.

// use the parser already included in the app
const parser = (window as any).SolidityParser