Webpack browser entrypoint broke Electron with Webpack

[timoschwarzer]

Issue type:

[ ] question
[x] bug report
[ ] feature request
[ ] documentation issue

Database system/driver:

[ ] cordova
[ ] mongodb
[ ] mssql
[ ] mysql / mariadb
[ ] oracle
[ ] postgres
[ ] cockroachdb
[x] sqlite
[ ] sqljs
[ ] react-native
[ ] expo

TypeORM version:

[x] latest
[ ] @next
[ ] 0.x.x (or put your version here)

Steps to reproduce or a small repository showing the problem:

Try to use latest TypeORM in Electron + Webpack.

Cause
PR #3623 (comment) introduced a separate browser entrypoint for Webpack. As we cannot use target = 'node' in Electron, I haven't found a way to tell Webpack to not use the browser version of TypeORM when just doing import {whatever} from 'typeorm'} (which worked in 0.2.13 and earlier).

[chriswep]

I guess you should be able to import via the direct path typeorm/lib/index (or whatever the path is in the package)

I wonder though why setting the target innwebpack does not work? In any case, you can specify an alias for typeorm in webpack to the version you want.

[chriswep]

There might be a way to have a seperate entry point for electron in package.json - webpack seems to support this (just did a quick research, haven’t looked super deep into this)

[timoschwarzer]

I wonder though why setting the target innwebpack does not work?

With target=node the renderer process does no longer start. (Electron failed to install correctly, please delete node_modules/electron and try installing again)
I don't exactly know why that error is thrown.

[dominic-simplan]

For electron there are explicit targets available in webpack: electron-renderer and electron-main.

However, the electron-renderer target seems to use the browser field.

In theory, it should be possible to override this by specifying the resolve.mainFields option in the webpack config, but unfortunately this doesn't work for me either.

resolve: {
   mainFields: ['main']
},

[zeevl]

Webpack 4 resolve.mainFields isn't working: https://github.com/webpack/webpack/issues/6796

What worked for me was to use target: 'node' instead of electron-renderer, and include electron in externals:

{
  target: 'node',
  externals: ['electron']
  // ....
}

[jjhbw]

Thanks for identifying this! This is an issue for me too... It ends up breaking SQLite support for me (using create-react-app + electron).
None of the workarounds mentioned in this thread work for me.
The only thing that worked was downgrading to typeorm 0.2.13. I'll be monitoring this issue and all cited issues. 👀

[jjhbw]

Confirmed this by removing the browser entrypoint (see jjhbw@f685f01), repackaging typeorm, and moving the resulting package into my project's node_modules tree manually.

This solves the problem in my webpack electron-renderer setup.

[Chris533]

Confirmed this by removing the browser entrypoint (see jjhbw@f685f01), repackaging typeorm, and moving the resulting package into my project's node_modules tree manually.

This solves the problem in my webpack electron-renderer setup.

Thanks, the other way, use .js entity

Post.js

const EntitySchema = require('typeorm').EntitySchema

module.exports = new EntitySchema({
  name: 'Post',
  columns: {
    id: {
      type: Number,
      primary: true,
      generated: true
    },
    title: {
      type: String
    },
    text: {
      type: String
    }
  }
})

const Post = require('./Post')
...
entities: [Post],
...

[dominic-simplan]

Webpack 4 resolve.mainFields isn't working: webpack/webpack#6796

What worked for me was to use target: 'node' instead of electron-renderer, and include electron in externals:

{
  target: 'node',
  externals: ['electron']
  // ....
}

Unfotunately this doesn't work for me. This leads to error Uncaught ReferenceError: exports is not defined in my environment.

Are there any other workarounds or suggestions how a PR could solve this issue?

[haroldo-ok]

I'm having the exact same problem; is there any prediction for supporting actual Electron + Webpack compatibility?

-- update --

Based on @jjhbw's response, managed to work around the bug by creating a fork of the TypeORM repo, deleting the "browser" section from package.json generating the package and installing that.

Still, it's a pretty ugly solution.

-- update --

I also had to add a few more package to Webbpack's externals, but, having done that, it worked.

[ccbeango]

Hi, there. I tried to revert the version of typeorm to typeorm@0.2.7 or 0.2.3. That could fix the problem with running on my processer render properly. There was no problem by some of previous versions.
Unfortunately, other bugs came out from cli-highlight when I built the app was running in production, like this issues #5757 I couldnt fix it by his way would cause other incompatible problems from chalk.
Thanks a lot, I will try you guys solution later.

[jjhbw]

Take a look at my fork for a quick workaround for users of sqlite in Electron renderer. Be sure to diff it against origin to see what i did and make sure you agree with it. It is not a long term solution that is worth upstreaming. I have decided to use my typeorm fork in my electron project using its git commit url in my package.json, as this isnt going to get fixed any time soon.

[Al00X]

I have this problem too and i confirm that changing package.json will fix the problem

[imnotjames]

Is this still an issue with the latest release?

[jjhbw]

@imnotjames no, it seems fixed! 🙏

Thanks a lot!

I'm tracking another webpack-electron-sqlite related issue that i'll probably post once i've investigated, but that seems unrelated. It seems likely that my project will be able to use mainline TypeORM releases again.

[imnotjames]

Huzzah!

[jjhbw]

@imnotjames i made #6854

This should be the last thing holding back sqlite + webpack users