Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__

[guillaumeduhan]

Hello @karol-f,

I created 2 projects with CLI-3.

The first is a library of components (Library), the second is an app (Back-Office) trying to import components from Library.

I followed your rules to import main.js from Library to Back-Office but I got this error:

Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:786)

In Network, my 2 app.js are well imported (200 for each).

vue.config.js (Library):

module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].js',
    },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/style.scss";
        `,
      },
    },
  },
  devServer: {
    port: 2600,
    allowedHosts: ['localhost:2800'],
  },
  lintOnSave: true,
}

After research, found that it maybe an error on webpack version but couldn't fix it. Did I miss something?

Thank you,

Guillaume

[karol-f]

Hi, this library of components (Library) is imported from node_modules? If so vue-cli, by default, due to performance reasons do not use babel etc. on node_modules dependencies, so You'll get ton of errors.

Try adding

transpileDependencies: [
    'your-library-npm-package-name',
],

to vue.config.js in Back-Office project, where library is imported.

Let me know if it helped.

[guillaumeduhan]

Hello @karol-f and thank you for your quick answer,

It is not a npm package, Library is an app running on port 2600 supposed to distribute components to Back-Office on port 2800 by importing main.js from Library to Back-Office.

We are doing this at work with your wonderful package VueCustomElements but with webpack not vue.config.js :) I wish to reproduce this configuration !

Thanks for your work by the way!

[karol-f]

It seems like __webpack_require__ is undefined. Are You sure it's not a thing?

[guillaumeduhan]

Honestly I have no idea,

package.json:

{
  "name": "library",
  "version": "1.1.0",
  "author": "Guillaume Duhan",
  "contributors": [
    "kaangokdemir",
    "malinsdd"
  ],
  "description": "Vue-Cli-3, Vuex, Vue-Router, Bootstrap 4, Babel, ESLint, Axios, SCSS and Pug boilerplate.",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "stylelint '**/*.vue' '**/*.scss' --fix scss"
  },
  "dependencies": {
    "@vue/eslint-config-airbnb": "^4.0.1",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.4",
    "core-js": "^3.1.2",
    "node-sass": "^4.13.0",
    "vue": "^2.6.10",
    "vue-custom-element": "^3.2.10",
    "vue-router": "^3.0.6",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-unit-jest": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "babel-preset-airbnb": "^4.1.0",
    "eslint": "^6.5.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-vue": "^5.2.3",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^8.0.0",
    "stylelint": "^11.1.1",
    "stylelint-config-standard": "^19.0.0",
    "stylelint-processor-html": "^1.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

[guillaumeduhan]

This is my boilerplate from start: https://github.com/guillaumeduhan/vue-bootstrap-boilerplate

[karol-f]

Hi, as I can't see in above boilerplate the way You import components from Library app can You give an example?

To be honest it's most interesting as this is probably cause of errors.

Are You importing main.js from Library app as script tag or somehow using import with special loader?

Also are You sure that there is no CORS between apps?

[guillaumeduhan]

In Back-office (port 2800) this is the way I import my app.js from Libary (port 2600) in index.html:

<script type="text/javascript" src="<%= VUE_APP_LIBRARY_URL %>/app.js" async deferred></script>

My env is pointing to port 2600 and in Library my output is good after build, this is app.js.

No CORS error !

[guillaumeduhan]

In Back-office, error is:

app.js:786 Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__

[karol-f]

Hi, maybe the problem is that if You grab app.js - this file is not generated by build. I think Githubissues.

Githubissues is a development platform for aggregating issues.