Uncaught TypeError: Cannot set property 'exports' of undefined at renderer.js:1

[samwilcock]

Describe the issue / bug.

Hi, I am having an issue with the following error: Uncaught TypeError: Cannot set property 'exports' of undefined at renderer.js:1,

I have setup a vue/electron app using electron-vue and it is working well for me however, when I import local JavaScript files (admin theme) into my index.ejs file i get the error, however I do not get this issue when using plain electron.

I want to use electron-vue as my application is developed using vue and it is making the whole integration of electron and vue together very easy.

How can I reproduce this problem? The way I have got this error is simply by creating an electron-vue instance using yarn (or npm) and then imported a local JavaScript library into the index.ejs file in the renderer directory.

I wish I could supply more details on how to reproduce the issue however if i knew how to reproduce it then I would know the cause.

Tell me about your development environment.

• Node version: 8.12.0
• NPM version: Using yarn 1.13.0
• vue-cli version: (if necessary) 3.5.2
• Operating System: Windows 10

Any help would be great. Thanks

Sam

[michalzaq12]

Can you paste the code snippet where you import local JS library ? Try to import this library in renderer/main.js

[samwilcock]

@michalzaq12 I have already tried importing the local JS librarys into renderer/main.js but I then get a host of errors to do with jquery.

Here are how they are imported.

<script src="../static/assets/js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../static/assets/js/popper.min.js" type="text/javascript"></script>
<script src="../static/assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../static/assets/js/plugins/metisMenu/jquery.metisMenu.js" type="text/javascript"></script>
<script src="../static/assets/js/plugins/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>

<!--Custom and plugin javascript-->
<script src="../static/assets/js/inspinia.js" type="text/javascript"></script>
<script src="../static/assets/js/plugins/pace/pace.min.js" type="text/javascript"></script>

[michalzaq12]

Hmm. Some of your dependencies use 'ES modules' system and can not be loaded in index.ejs (without webpack).

I tried to load only jquery and it works.

Loading popper.js in index.ejs throw error: Uncaught SyntaxError: Unexpected token export I found a few solutions: (only for popper.js but this probably applies to all dependencies )

1. In main.js window.Popper = require('../../static/popper.min').default;
2. In index.ejs load popper with UMD system <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
3. In renderer.webpack.config plugins: [ // ... new webpack.ProvidePlugin({ Popper: ['popper.js', 'default'] }) // ... ]

Read how to correctly import bootstrap if you use webpack https://getbootstrap.com/docs/4.0/getting-started/webpack/

Generally, I do not recommend using already compiled libraries, if you use some tools like webpack.

[samwilcock]

@michalzaq12 It turned out to be the bootstrap import which was causing the main problem, after following the steps on the link it solved my issue. Thanks For your help.