ModuleNotFoundError: Module not found: Error: Can't resolve 'electron'

[rtscosta]

Hi guys. I am trying to use Amplify with a React / Next / web3 project. When I tried to build the project, I got the following error on the Frontend build part.

Does any have this erro before or know how to solve it?

2022-04-10T03:00:11.543Z [ERROR]: Error: Command failed with exit code 1: node_modules/.bin/next build
warn - No ESLint configuration detected. Run next lint to begin setup
Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve 'electron' in '/codebuild/output/src624730322/src/taskReward/node_modules/swarm-js/node_modules/got'
> Build error occurred
Error: > Build failed because of webpack errors
at /codebuild/output/src624730322/src/taskReward/node_modules/next/dist/build/index.js:397:19
at async Span.traceAsyncFn (/codebuild/output/src624730322/src/taskReward/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (/codebuild/output/src624730322/src/taskReward/node_modules/next/dist/build/index.js:77:25)

[austinpickett]

Running into this issue as well- builds fine on Vercel...

[calavera]

It looks like got doesn't support electron anymore, but somehow your application is using it. You're probably bumping into this issue because you're requiring that library without being present in your node modules.

[austinpickett]

@calavera thx for the reply, below is the log where the issue appears:

2022-04-26T16:58:26.215Z [INFO]: Starting SSR Build...
2022-04-26T16:59:57.758Z [ERROR]: Error: Command failed with exit code 1: node_modules/.bin/next build
                                  warn  - The `target` config is deprecated and will be removed in a future version.
                                  See more info here https://nextjs.org/docs/messages/deprecated-target-config
                                  Failed to compile.
                                  ./node_modules/swarm-js/node_modules/got/index.js
                                  Module not found: Can't resolve 'electron' in '/codebuild/output/src722649380/src/redacted/web/node_modules/swarm-js/node_modules/got'
                                  Import trace for requested module:
                                  ./node_modules/swarm-js/lib/files.js
                                  ./node_modules/swarm-js/lib/api-node.js
                                  ./node_modules/web3-bzz/lib/index.js
                                  ./node_modules/web3/lib/index.js

web3 uses swarm, swarm uses got, got is requiring electron -- a nasty rabbit hole. The curious part of it is it builds locally just fine, and builds on vercel just fine.

The issue is somewhere with how Amplify is building the SSR module.

[austinpickett]

@rtscosta this shows a solution to ignore the deprecated package via webpack/nextjs config: sindresorhus/got#345

[calavera]

yeah, that sounds like a problem with implicit dependencies. Something installs the electron package in your local system, or Vercel, but not in Amplify. Then webpack tries to import the plugin, and it doesn't work because the implicit dependency is not there 🤔

@rtscosta this is the change you need in your webpack configuration to avoid this problem:

module.exports = {
    plugins: [
        new webpack.IgnorePlugin({
            resourceRegExp: /^electron$/
        }),
    ]
}

[en3sis]

Did you manage to solve it? @rtscosta ?
I'm having the same scenario and it's super annoying. I still don't understand why it would compile on one side and not the other.

I tried with next.config.js

module.exports = {
  webpack: (config, { webpack }) => {
    config.plugins.push(new webpack.IgnorePlugin({
      resourceRegExp: /^electron$/
    }));
  }
}

Does not seems to help.

[itseasy21]

@en3sis you need to return config as well then only it'll work.

Update your code to this and it should start working:

webpack: (config, { webpack }) => {
		config.plugins.push(
			new webpack.IgnorePlugin({
				resourceRegExp: /^electron$/,
			})
		);
		return config;
	},

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.

[rtscosta]

Hello Sorin, how are you? I solved the problem changing the App Setting -> Build settings! Next.js version = 12.1.4 Node.js verdion = 16.14.2 Please, let me know of that solve your issu Em dom., 8 de mai. de 2022 às 04:03, Sorin C. ***@***.***> escreveu:

…

Did you manage to solve it? @rtscosta <https://github.com/rtscosta> ? I'm having the same scenario and it's super annoying. I still don't understand why it would compile on one side and not the other. I tried with next.config.js module.exports = { webpack: (config, { webpack }) => { config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^electron$/ })); } } Does not seems to help. — Reply to this email directly, view it on GitHub <#2696 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABNX6JQUL557F7B6RBEYHY3VI5YM5ANCNFSM5TDROWVQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.