Fail to transpile other js files next to src/main/index.js file

[raviSussol]

• Version: 22.9.1

• Target: Windows, Mac

Failed to transpile other js files like preload.js which are also sitting inside src/main folder. Throws an error: Cannot use import statement outside a module

The main src/main/index.js seems fine for transpilation but rest of other files have an issue transpiling it.
Do we need to handle this from a custom webpack file i.e. custom.webpack.additions.js. Or am i missing something?

[shahkeyur]

That's probably because the electron-webpack doesnt transpile preload file. I added something transpile it, i dont remember it right now. You should try writing plain script.

…

On Sat, Mar 6, 2021, 7:14 AM Ravi Shrestha ***@***.***> wrote: - *Version*: 22.9.1 - *Target*: Windows, Mac Failed to transpile other js files like preload.js which are also sitting inside src/main folder. Throws an error: Cannot use import statement outside a module [image: Screen Shot 2021-03-06 at 5 49 58 PM] <https://user-images.githubusercontent.com/13145522/110206195-6dfd8680-7ea4-11eb-87ac-bf60851fde6b.png> The main src/main/index.js seems fine for transpilation but rest of other files have an issue transpiling it. Do we need to handle this from a custom webpack file i.e. custom.webpack.additions.js. Or am i missing something? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#433>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIICLM6VUXC5M25DNGVILCDTCIMEDANCNFSM4YWVQAOQ> .

[raviSussol]

@shahkeyur I tried to deal this with adding a custom webpack script in a custom.webpack.main.js along with babel.config.js file at the root directory. So configurations are:

electron-webpack.json

{
  "title": "<current_datafile_name>",
  "commonSourceDirectory": "src/common",
  "staticSourceDirectory": "src/static",
  "main": {
    "extraEntries": ["@/preload.js"],
    "sourceDirectory": "src/main",
    "webpackConfig": "custom.webpack.main.js"
  },
  "renderer": {
    "sourceDirectory": "src/renderer",
    "template": "src/renderer/index.html"
  }
}

custom.webpack.main.js

const webpackMain = require('electron-webpack/webpack.main.config');

module.exports = env => {
  return new Promise((resolve, reject) => {
    webpackMain(env).then(mainConfig => {
      mainConfig.module.rules.push({
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] } // Presets used for env setup
        }
      });
    });
  });
};

babel.config.js

module.exports = {
  "presets": ['@babel/preset-env']
};

and tried to do yarn dev then the webpack compilation just get stuck somewhere after the renderer process compilation and couldn't see any output from it. And if I add another customization webpack script of the css load for the renderer process:

const webpackRenderer = require('electron-webpack/webpack.renderer.config');

module.exports = env => {
  return new Promise((resolve, reject) => {
    webpackRenderer(env).then(rendererConfig => {
      rendererConfig.module.rules.push({
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      });
    })
  });
}

then doing yarn dev just get stuck from the beginning. I suspect these are cause of the Promises haven't been resolved and further down code executions are not happening. I'm not sure about whats the correct way of configuring/extending webpack feature using electron-webpack apis? Could you please show me how its done correctly? Thanks.

[loopmode]

The preload script is expected to be a static Javascript file, not a module. This is by electron, not electron-webpack.
Electron-webpack has no concept of preload scripts. It has no implementation for it, it leaves this to electron and the user.

You'll be having a hard time teaching electron-webpack how to generate such static script based on complex module, like you're trying.

The way I see it, there are at least three ways for you here:

1. you go ahead and define how to do it correctly with electron-webpack, providing implementation and PRs along the way, teaching electron-webpack a smart behavior for preload scripts.

2. you set up a standalone little webpack build that has nothing to do with electron-webpack. That setup transpiles modules for you and finally creates a single static script that you can use as electron preload. That script, by the way, is best served from the static folder
   supported by electron-webpack. It's your best chance of having no troubles in development and in production. However, it implies that your script is a static one. Which you must ensure.

3. You let off the idea of using a complex preload script, and think about whether that's the best way to achieve what you're trying. Obviously you're trying something that is more complex than normal, making the entire process complicated. Maybe what you need can and should be achieved by actual src code and doesn't even need to be a preload script.

[loopmode]

Personally, I'd take a step back and look at the situation trying 3). It's mostly the right thing to do when there's a next problem whenever you worked around the last one.

If that doesn't work, I'd go 2) - it should be straightforward, however you'll need basic knowledge of webpack and electron-webpack.

Option 3) would be best for everyone including yourself, but it would require you to spend significant time and put some creative engineering skills on the table.