search

diego3g / electron-typescript-react

:electron: An Electron boilerplate including TypeScript, React, Jest and ESLint.
1.45k stars 295 forks source link

Issues with Webpack #73

Closed aw1875 closed 2 years ago

aw1875 commented 2 years ago

I'm trying to incorporate either playwright or puppeteer within my app so that I can use the tool for testing websites I create but I'm having issues. This issue I'm created is related to playwright. I installed playwright using npm i --save-dev playwright and have included it inside of my main.ts with:

import playwright, { chromium } from 'playwright';

However, when I try to start the program I get an error message popup and this message:

Error: Cannot find module 'playwright-core'
    at webpackMissingModule (...\.webpack\main\index.js:1232:50)
    at Object../node_modules/playwright/index.mjs (...\.webpack\main\index.js:1232:140)
    at __webpack_require__ (...\.webpack\main\index.js:1275:41)
    at ...\.webpack\main\index.js:1345:68
    at ...\.webpack\main\index.js:1588:3
    at Object.<anonymous> (...\.webpack\main\index.js:1591:12)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)

I'm not entirely sure what I'm doing wrong as I'm a little new to using typescript with electron and react. I've done something similar using just react and electron in the past with no issues so I'm a little confused what I'm doing wrong.

aw1875 commented 2 years ago

I should note, I'm assuming theres something I'm missing within the webpack rules but like I said I'm not super experienced with this route so I'm not sure what exactly I'm missing if that is the case.

timohausmann commented 2 years ago

I tried to import those packages on a fresh clone and interestingly got another error than you.

However, I had issues with importing modules in this codebase before. The dependency @marshallofsound/webpack-asset-relocator-loader is no longer maintained but thankfully @timfish put this together https://github.com/timfish/webpack-asset-relocator-loader.

  1. npm install --save-dev @timfish/webpack-asset-relocator-loader
  2. Open webpack/rules.webpack.js and replace @marshallofsound with @timfish.
  3. Profit. It now builds. Hope for you too!
aw1875 commented 2 years ago

@timohausmann I was actually able to find a solution to pack up the modules properly but I appreciate the heads up about the dependency no longer being maintained! I will definitely switch over the the one you suggested. Thanks!