Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

[girls-whocode]

I am receiving this error on the app.config.js file.

It seems every time I start this boilerplate, I am receiving this error until I Ctrl-C and restart it several times over. I was able to fix this error by moving all of the objects into variables in their respective places, although I really like the idea of having a configuration page so I can assign variable.

Is there something I am missing why this seems to only be happening to me since I have not found a solution as to why this is happening.

I have tried to change the module.exports to export default.

I have found this: https://github.com/webpack/webpack/issues/4039

Although I cannot make heads or tails of it.

[chrisvfritz]

Is it possible you're using an old version of Node? This boilerplate requires 8.9 or greater.

[jonathanstiansen]

Any reason not to have that in the package.json under engine? It'll warn you if it's not the right version then.

[chrisvfritz]

@jonathanstiansen It is in package.json, but the warning can be easy to miss, especially since NPM sort of conditions people to ignore warnings.

[jonathanstiansen]

Fair enough! Sorry about that, I should have checked before speaking. :-)

On Tue, Jan 29, 2019 at 11:09 AM Chris Fritz notifications@github.com wrote:

@jonathanstiansen https://github.com/jonathanstiansen It is in package.json, but the warning can be easy to miss, especially since NPM sort of conditions people to ignore warnings.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/chrisvfritz/vue-enterprise-boilerplate/issues/129#issuecomment-458645652, or mute the thread https://github.com/notifications/unsubscribe-auth/ACP56I1rrtCnsvttfcKKRotRUr6f691eks5vII4_gaJpZM4aX50P .

-- Jonathan Stiansen P. 778.999.0534

[girls-whocode]

Thanks, I will check tomorrow morning when I get back into the office.

[girls-whocode]

So I just checked, and I am running 11.6

[duser@localhost] [~/voucher/mpcs2_vuejs_ui] ± MPCS U:3 ✗                         [05:40:34]
> node --version
v11.6.0

[chrisvfritz]

@jessicakennedy1028 Thanks for the info. 🙂 I just tested this version locally, but no luck reproducing the error, unfortunately. Does this happen even on a freshly cloned project?

[girls-whocode]

I am going to try to reproduce this on my end with exact steps... It happens quite often..

I would like to add, here is my app.config.js

module.exports = {
  title: 'Labor Voucher',
  description: 'Add, modify or correct previous vouchers',
  dataURL: process.env.NODE_ENV === 'development' ? 'http://192.168.177.3:8080/api' : 'http://10.0.5.200:3000/api',
  sendErrorTo: 'my@email.com'
}

Here is my vue.config.js

const appConfig = require('./src/app.config')

module.exports = {
  configureWebpack: {
    // We provide the app's title in Webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: appConfig.title,
    // Set up all the aliases we use in our app.
    resolve: {
      alias: require('./aliases.config').webpack,
    },
  },
  css: {
    // Enable CSS source maps.
    sourceMap: true,
  },
  // Configure Webpack's dev server.
  // https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md
  devServer: {
    host: '0.0.0.0',
    public: '0.0.0.0:8080',
    ...(process.env.API_BASE_URL // Proxy API endpoints to the production base URL.
      ? {
          proxy: {
            '/api': {
              pathRewrite: {
                '^/api': '',
              },
              target: process.env.API_BASE_URL,
            },
          },
        } // Proxy API endpoints a local mock API.
      : {
          before: require('./tests/mock-api'),
        }),
  },
}

[chrisvfritz]

Thanks. 🙂 Identifying the minimal code necessary to reproduce the problem will definitely help figure out what causes it.

[girls-whocode]

Ok, I guess I do not understand what you are saying. How I understand your point is, there is a file called app.config.js (A perfect place to put a series of static configuration information that can be called from other locations), but by adding additional configuration information shouldn't be done here? Is there a particular reason for this? I added 2 lines of code:

dataURL: process.env.NODE_ENV === 'development' ? 'http://192.168.177.3:8080/api' : 'http://10.0.5.200:3000/api', sendErrorTo: 'my@email.com'

and for the devServer I added

host: '0.0.0.0', 
public: '0.0.0.0:8080',

This is going to cause a Uncaught TypeError: Cannot assign to read only property 'exports' of object. Which seem to only happen when you are trying to import a read only property. So where is this read only property? Should this be done a different way?

[girls-whocode]

So here is the latest, I have removed all of the custom items from the app.config.js file, and tried running again. Here are the latest errors:

module.exports = {
        title: 'Labor Vouchers',
        description: 'Stuff and Things and Stuff and Things'
}

WARNING Compiled with 4 warnings 8:19:12 AM warning in ./src/app.vue?vue&type=script&lang=js& "export 'default' (imported as 'appConfig') was not found in '@src/app.config' warning in ./src/app.vue?vue&type=script&lang=js& "export 'default' (imported as 'appConfig') was not found in '@src/app.config' warning in ./src/router/views/laborvoucher.vue?vue&type=script&lang=js& "export 'default' (imported as 'appConfig') was not found in '@src/app.config' warning in ./src/router/views/laborvoucher.vue?vue&type=script&lang=js& "export 'default' (imported as 'appConfig') was not found in '@src/app.config'

--- To correct this error, it is just stopping and starting the server by running yarn dev multiple times until it is cleared. I just cannot make heads or tails of this.

[chrisvfritz]

Ok, I guess I do not understand what you are saying.

I'm talking about controlling variables. 🙂 It seems that adding the 2 properties to app.config.js and 2 others to vue.config.js that you mentioned doesn't seem to create the problem for me, so there must be an element we're missing. Could you:

1. Clone a fresh copy of this boilerplate.
2. Add your custom code little by little until you see the problem.
3. Keep removing code that you added until removing/reverting any line of code makes the problem disappear.
4. Either post a diff of these minimum code changes to reproduce the problem or commit the changes and push them to a public repo I can look at.

Once we've identified what reliably reproduces the problem, I should be in a much better place to investigate why it's happening for you. 🙂 Does that make sense?

[girls-whocode]

I found out another little bit of information... I don't know if this will lead us to a rabbit hole or not, but I tried an experiment...

I normally start the dev with 'yarn dev'

I decided to throw a wrench into this little test, I tried 'npm install' -- it did the full install of the node modules, then running 'npm run dev' -- everything worked like expected (even with the additional lines of code) -- I even placed a console.log (appConfig) and it showed the object correctly.

I stopped the server and 'rm -rf node_modules && rm *.lock'

Then ran 'yarn' -- waiting for the install Then ran 'yarn dev' -- Once again, everything ran successful even with the extra lines of code. So that leads me to another question, did something get (let's say) 'stuck' in the lock file or a half version upgrade or some weird situation like that?

I am scratching the head on this one.

[chrisvfritz]

did something get (let's say) 'stuck' in the lock file or a half version upgrade or some weird situation like that?

It's definitely possible. I've seen strange errors in the past when a network issue causes a dependency to be only partially installed, or a post-install script for a dependency fails to run for some reason. The errors don't always point to the offending dependency either. 😔 I probably should have first checked to make sure you had tried the recommended troubleshooting steps, because it sounds like the issue really was a dependency installation problem.

At least it's fixed now! 🙂 Sorry you had to deal with that.

[girls-whocode]

New update: I have a clean node_modules, and fully updated... This error has come back when adding

version: '0.0.0.2',

[girls-whocode]

How I resolved it, was I converted the app.config.js to app.config.json, make my changes to a json file:

{
  "title": "Jessica's Projects Public Page",
  "description": "Fun and easy to use cut and paste scripts!",
  "gitlabCollection": {
    "gitlabApiToken": "REMOVED",
    "groupID": "REMOVED"
  },
  "pipeLineUrl": "https://gitlab.com/public_scope/projects_by_j/badges/master/pipeline.svg",
  "weatherData": {
    "apiKey": "REMOVED",
    "units": "us",
    "language": "en",
    "defaultLocation": {
      "lat": "40.4295012",
      "long": "-83.4552021"
    }
  },
  "environment": {
    "mode": "dev",
    "baseUrl": "https://jbrowns.com",
    "dev": {
      "prodTip": true
    },
    "prod": {
      "prodTip": false
    }
  }
}

Then on each file I need it, call it like this: import appConfig from '@src/app.config'

Now throughout the page I can use it just like a json variable:

titleTemplate(title) {
  title = typeof title === 'function' ? title(this.$store) : title
  return title ? `${title} | ${appConfig.title}` : appConfig.title
},

[chrisvfritz]

@jessicakennedy1028 I think 0.0.0.2 isn't a valid semantic version (0.0.2 should work though), but I still have no idea how it could cause this issue. 😅 For anyone who might encounter the same issue though, I think making app.config.js a JSON file isn't a bad compromise, so I just updated the boilerplate. Thanks for following up with this! 🙂

[girls-whocode]

I tried to explain to the other developers here that 0.0.0.2 was not a valid version, but they have a development policy that states

1. Major (Indicates full production release.)
2. Minor
3. Revision (Only used for BA testing and SQA.)
4. Build Release (Use for developers)

So, unfortunately I have to follow that policy, nevertheless, I am glad I was able to give some type of contribution and idea to this project. I have tried about 10 others and not one is near the simplistic to setup, use, and understand. In fact when I do my Vue training to the other employees I only use this boilerplate.

If you have any other places that need testing or dev work done, please let me know, I would love to assist.