Module Import Error Within NextJS

[walnutwaldo]

Hi! I'm trying to use the @solidity-parser/parser npm package within a Next JS typescript project. Unfortunately, when I try to import something:

import {parse} from "@solidity-parser/parser"

I get this error

Uncaught TypeError: __webpack_require__(...).join is not a function
    at eval (index.cjs.js?6069:25092:70)
    at eval (index.cjs.js?6069:22:1)
    at eval (index.cjs.js?6069:36856:1)
    at ./node_modules/@solidity-parser/parser/dist/index.cjs.js (index.js?ts=1658252725362:17:1)
    at options.factory (webpack.js?ts=1658252725362:661:31)
    at __webpack_require__ (webpack.js?ts=1658252725362:37:33)
    at fn (webpack.js?ts=1658252725362:316:21)
    at eval (webpack-internal:///./components/analysis/AnalysisTab.tsx:13:81)
    at ./components/analysis/AnalysisTab.tsx (index.js?ts=1658252725362:134:1)
    at options.factory (webpack.js?ts=1658252725362:661:31)
    at __webpack_require__ (webpack.js?ts=1658252725362:37:33)
    at fn (webpack.js?ts=1658252725362:316:21)
    at eval (webpack-internal:///./pages/index.tsx:18:90)
    at ./pages/index.tsx (index.js?ts=1658252725362:266:1)
    at options.factory (webpack.js?ts=1658252725362:661:31)
    at __webpack_require__ (webpack.js?ts=1658252725362:37:33)
    at fn (webpack.js?ts=1658252725362:316:21)
    at eval (?1d0a:5:16)
    at eval (route-loader.js?ea34:215:51)

I haven't been able to find a similar error anywhere else on the web. It looks like it has something to do with the webpack configuration and the way the module is being imported. But the error is being caused by one of the files as a part of the latest package release.

I don't have a lot of experience in module importing so I can't tell if this is me not setting up my project correctly or if it is an issue with the release itself. Any help would be appreciated and if this is an issue with the package, I hope I can help fix it.

More details

I've also included my NextJS and Typescript configuration files which are pretty standard in case they help give insight into this issue.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "custom.d.ts"],
  "exclude": ["node_modules"]
}

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }
}

module.exports = nextConfig

[robinstraub]

Hi, in case you haven't solved your issue, it is not something linked to NestJS but more to a typescript/webpack config. If you don't want to alter their configuration, which can be cumbersome depending on their versions, a simple import * as parser from '@solidity-parser/parser'; does the trick.

Out of interest, what is your use-case for a solidity-parser with NestJS?

[walnutwaldo]

Unfortunately, that didn't seem to fix the issue. In case you misread, I am using it with NextJS, not NestJS. I just want to be able to parse some solidity code for some AST nodes on a frontend application. I got around it by using @solidity-parser on the backend instead of the frontend (for some reason, this no longer threw an error for me even though its within the same project).

[ulasanil]

Hey @walnutwaldo can you try the fix that I mentioned here? It fixed my problem, it might help you as well.

[yiyi-wang-rv]

I encountered the same problem. Any suggestions here? Thank you.