I am developing a google chrome extension, today I tried to upgrade the webpack to verison 3(the legacy was webpack 1.x). Now I am almost plete and the pile works fine, but when I open the google chrome extension popup page, it could not show the UI element. Then I open the popup debbbugger console and shows error log:
Uncaught TypeError: Cannot read properties of undefined (reading 'call')
at __webpack_require__ (bootstrap 9e5832947e0eb0ffd7bf:54:1)
at Object.500 (popup.js:115:1)
at __webpack_require__ (bootstrap 9e5832947e0eb0ffd7bf:54:1)
at webpackJsonpCallback (bootstrap 9e5832947e0eb0ffd7bf:25:1)
at webpackJsonpCallback (bootstrap 9e5832947e0eb0ffd7bf:19:1)
at webpackJsonpCallback (mons1.js:20:36)
at popup.js:1:1
I check the bootstrap "bootstrap-sass": "^3.4.1", version and it was the newest version which last update was 3 years ago. why would this happen? what should I do to fix this problem? this is my project package.json:
{
"private": true,
"scripts": {
"xpostinstall": "node ./build/install-pdf-viewer",
"dev": "webpack --config build/webpack.dev.config.js",
"build": "gulp --cwd . --gulpfile build/gulp-build.js",
"test": "karma start build/karma.config.js"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"chrome-call": "^1.0.2",
"connect.io": "^3.1.3",
"interact.js": "^1.2.6",
"translation.js": "github:jiangxiaoqiang/translation.js",
"vue": "^1.0.24",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"chrome-env": "^0.0.6",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"download": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.8.5",
"fs-extra": "^8.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlmin": "^2.0.0",
"gulp-jsonmin": "^1.2.0",
"gulp-uglify": "^1.5.3",
"gulp-zip": "^3.2.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^6.3.11",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^2.1.0",
"karma-coveralls": "^2.1.0",
"karma-firefox-launcher": "^1.3.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.6",
"raw-loader": "^0.5.1",
"sass-loader": "^7.3.1",
"sass": "^1.22.10",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.2.0",
"webpack": "^3.12.0",
"webpack-cli": "^4.9.1"
},
"license": "GPLv3",
}
and this is my webpack config:
const path = require('path');
const webpack = require( 'webpack' ) ,
CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin ,
ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
module.exports = {
entry : {
bg : './src/background-scripts/' ,
content : ['./src/content-scripts/firefox-fix.js', './src/content-scripts/'] ,
options : './src/options/' ,
popup : './src/popup/' ,
'bs-lite' : './src/public/bootstrap-lite.scss'
} ,
output : {
path : path.resolve(__dirname, '../src/bundle') ,
filename : '[name].js'
} ,
module : {
rules : [
{
test : /\.js$/ ,
exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
loader : 'babel-loader'
} ,
{
test : /\.woff$/ ,
loader : 'file-loader' ,
query : {
name : '[name].[ext]'
}
} ,
{
test : /\.html$/ ,
loader : 'vue-html-loader'
} ,
{
test : /\.(css|scss)$/ ,
use: ExtractTextPlugin.extract({
fallback :'style-loader',
use: [
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}]
})
}
]
} ,
plugins : [
new CommonsChunkPlugin( {
name : 'mons1',
filename : 'mons1.js' ,
allChunks: true,
chunks : [ 'content' , 'popup' ]
}) ,
new CommonsChunkPlugin({
name: 'mons2',
filename :'mons2.js' ,
allChunks: true,
chunks : [ 'mons1.js' , 'options' ]
}) ,
new CommonsChunkPlugin({
name: 'mons3',
filename :'mons3.js' ,
allChunks: true,
chunks : [ 'bg' , 'mons2.js' ]
}) ,
new ExtractTextPlugin( '[name].css' )
]
};
I have no idea about how to fix this problem, anyone facing the same problem? I have tried to add allChunks: true in the CommonsChunkPlugin but did not works. I also tried to move the popup chunk in front of others to control the order like this:
new CommonsChunkPlugin( {
name : 'mons1',
filename : 'mons1.js' ,
allChunks: true,
chunks : [ 'popup','content' ],
chunksSortMode: 'manual',
}) ,
still did not work. Any one facing the same problem?
I am developing a google chrome extension, today I tried to upgrade the webpack to verison 3(the legacy was webpack 1.x). Now I am almost plete and the pile works fine, but when I open the google chrome extension popup page, it could not show the UI element. Then I open the popup debbbugger console and shows error log:
Uncaught TypeError: Cannot read properties of undefined (reading 'call')
at __webpack_require__ (bootstrap 9e5832947e0eb0ffd7bf:54:1)
at Object.500 (popup.js:115:1)
at __webpack_require__ (bootstrap 9e5832947e0eb0ffd7bf:54:1)
at webpackJsonpCallback (bootstrap 9e5832947e0eb0ffd7bf:25:1)
at webpackJsonpCallback (bootstrap 9e5832947e0eb0ffd7bf:19:1)
at webpackJsonpCallback (mons1.js:20:36)
at popup.js:1:1
I check the bootstrap "bootstrap-sass": "^3.4.1", version and it was the newest version which last update was 3 years ago. why would this happen? what should I do to fix this problem? this is my project package.json:
{
"private": true,
"scripts": {
"xpostinstall": "node ./build/install-pdf-viewer",
"dev": "webpack --config build/webpack.dev.config.js",
"build": "gulp --cwd . --gulpfile build/gulp-build.js",
"test": "karma start build/karma.config.js"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"chrome-call": "^1.0.2",
"connect.io": "^3.1.3",
"interact.js": "^1.2.6",
"translation.js": "github:jiangxiaoqiang/translation.js",
"vue": "^1.0.24",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"chrome-env": "^0.0.6",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"download": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.8.5",
"fs-extra": "^8.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlmin": "^2.0.0",
"gulp-jsonmin": "^1.2.0",
"gulp-uglify": "^1.5.3",
"gulp-zip": "^3.2.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^6.3.11",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^2.1.0",
"karma-coveralls": "^2.1.0",
"karma-firefox-launcher": "^1.3.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.6",
"raw-loader": "^0.5.1",
"sass-loader": "^7.3.1",
"sass": "^1.22.10",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.2.0",
"webpack": "^3.12.0",
"webpack-cli": "^4.9.1"
},
"license": "GPLv3",
}
and this is my webpack config:
const path = require('path');
const webpack = require( 'webpack' ) ,
CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin ,
ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
module.exports = {
entry : {
bg : './src/background-scripts/' ,
content : ['./src/content-scripts/firefox-fix.js', './src/content-scripts/'] ,
options : './src/options/' ,
popup : './src/popup/' ,
'bs-lite' : './src/public/bootstrap-lite.scss'
} ,
output : {
path : path.resolve(__dirname, '../src/bundle') ,
filename : '[name].js'
} ,
module : {
rules : [
{
test : /\.js$/ ,
exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
loader : 'babel-loader'
} ,
{
test : /\.woff$/ ,
loader : 'file-loader' ,
query : {
name : '[name].[ext]'
}
} ,
{
test : /\.html$/ ,
loader : 'vue-html-loader'
} ,
{
test : /\.(css|scss)$/ ,
use: ExtractTextPlugin.extract({
fallback :'style-loader',
use: [
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}]
})
}
]
} ,
plugins : [
new CommonsChunkPlugin( {
name : 'mons1',
filename : 'mons1.js' ,
allChunks: true,
chunks : [ 'content' , 'popup' ]
}) ,
new CommonsChunkPlugin({
name: 'mons2',
filename :'mons2.js' ,
allChunks: true,
chunks : [ 'mons1.js' , 'options' ]
}) ,
new CommonsChunkPlugin({
name: 'mons3',
filename :'mons3.js' ,
allChunks: true,
chunks : [ 'bg' , 'mons2.js' ]
}) ,
new ExtractTextPlugin( '[name].css' )
]
};
I have no idea about how to fix this problem, anyone facing the same problem? I have tried to add allChunks: true in the CommonsChunkPlugin but did not works. I also tried to move the popup chunk in front of others to control the order like this:
new CommonsChunkPlugin( {
name : 'mons1',
filename : 'mons1.js' ,
allChunks: true,
chunks : [ 'popup','content' ],
chunksSortMode: 'manual',
}) ,
still did not work. Any one facing the same problem?
Share Improve this question asked Jan 16, 2022 at 8:31 DolphinDolphin 39.5k103 gold badges377 silver badges721 bronze badges1 Answer
Reset to default 1The problem is quite simple. Probably you are using multiple apps builded via weback on same page. Solution: Change output.jsonpFunction