Related
I am developing a google chrome extension, today when I tried to run the google chrome extension, shows error like this in popup.js:
popup.js:21888 Uncaught TypeError: Cannot read properties of undefined (reading 'locals')
at Object../node_modules/element-ui/lib/theme-chalk/message.css (popup.js:21888:12)
at __webpack_require__ (popup.js:20:30)
at Module../src/js/popup/index.js (popup.js:38789:96)
at __webpack_require__ (popup.js:20:30)
at popup.js:84:18
at popup.js:87:10
the npm build was success, but failed in the runtime, I have no idea where is going wrong. this is my package.json:
{
"name": "cruise-radar",
"version": "0.0.1",
"description": "Browser extension to detect available RSS and RSSHub for current page",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -w --mode=development --progress --display-error-details --colors",
"build": "webpack --mode=development --progress --display-error-details --colors",
"release": "npm run build && zip -r release/radar.zip dist",
"format": "eslint \"**/*.js\" --fix && prettier \"**/*.{js,scss,less}\" --write",
"format:staged": "eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,scss,less}\"",
"format:check": "eslint \"**/*.js\" && prettier-check \"**/*.{js,scss,less}\""
},
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/Cruise-Radar.git"
},
"keywords": [
"rsshub",
"rss"
],
"gitHooks": {
"pre-commit": "npm run format:staged"
},
"author": "DIYgod",
"license": "MIT",
"bugs": {
"url": "https://github.com/DIYgod/RSSHub-Radar/issues"
},
"homepage": "https://github.com/DIYgod/RSSHub-Radar#readme",
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "7.12.1",
"#fingerprintjs/fingerprintjs": "3.1.2",
"autoprefixer": "9.8.6",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-plugin-component": "1.1.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "6.3.0",
"css-loader": "5.0.1",
"cssnano": "4.1.10",
"eslint": "7.13.0",
"eslint-config-prettier": "6.15.0",
"eslint-loader": "4.0.2",
"eslint-plugin-prettier": "3.1.4",
"file-loader": "6.2.0",
"js-wheel": "jiangxiaoqiang/js-wheel",
"less": "3.12.2",
"less-loader": "7.0.2",
"mini-css-extract-plugin": "1.3.0",
"postcss-loader": "3.0.0",
"prettier": "2.1.2",
"prettier-check": "2.0.0",
"pretty-quick": "3.1.0",
"sass-loader": "^10",
"svg-inline-loader": "0.8.2",
"template-string-optimize-loader": "3.0.0",
"url-loader": "4.1.1",
"vue": "2.6.12",
"vue-loader": "15.9.5",
"vue-template-compiler": "2.6.12",
"webpack": "4.44.2",
"webpack-cli": "3.3.12",
"yorkie": "2.0.0"
},
"dependencies": {
"#babel/runtime": "^7.17.2",
"clipboard": "2.0.6",
"core-js": "^3.21.1",
"element-ui": "2.14.0",
"md5.js": "^1.3.5",
"psl": "1.8.0",
"regenerator-runtime": "^0.13.9",
"route-recognizer": "0.3.4",
"rss-parser": "3.9.0",
"sass": "^1.44.0",
"vue-router": "3.4.9",
"yarn": "^1.22.17"
}
}
and this is the project webpack config:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
bail: true,
devtool: false,
performance: {
maxEntrypointSize: 1000000,
},
entry: {
'popup': './src/js/popup/index.js',
'content': './src/js/content/index.js',
'background': './src/js/background/index.js',
'options': './src/js/options/index.js',
'sandbox': './src/js/sandbox/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.less'],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
include: path.resolve(__dirname, '../src/js'),
},
{
test: /\.js$/,
use: [
'template-string-optimize-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['#babel/preset-env'],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
],
],
}
}
]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
],
},
{
test: /\.less$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
'less-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
'sass-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
'limit': 40000
}
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(ttf|woff)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new CopyPlugin({
patterns: [
{
from: 'src/assets',
to: '',
},
],
}),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
VERSION: JSON.stringify(require('./src/assets/manifest.json').version)
}),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
what should I do to fix this problem? I tried to debbuging with breakpoint, but it did not going into the breakpoint when I using the extension, only show this error when I open the popup page(did not trigger the error again). If I tried to reproduce the error, I have to close the popup window and reopen it.
For hours search and tried to debugging, finally from the error message I guess that my mac book pro system language was en, but the element-ui did not support the en right now(the other computer language set zh works fine). I just did not know how to make the element-ui support the en in the google chrome extension popup page, I only using the Message from element ui like this in the popup.js:
import { Message } from 'element-ui';
and there is no Vue or other framework that could let me set the multi language support, there is only one js file in the context, what should I do to fix it?
After building my project it gives me this error but in the console of chrome it gives me the following error. Could someone help me? I have no idea what causes this. It feels like im using export and class in a wrong way.
Node version: v11.6.0
Npm version: 4.6.1
webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
module.exports = {
entry:
{
widget: ['./src/js/widget/v1/widget.js', './src/sass/widget/widget.scss'],
website: ['./src/sass/website/website.scss', './src/js/website/website.js']
},
output: {
path: path.resolve(__dirname, 'static'),
filename: '[name]/[name].js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
},
{
test: /\.(css|scss)$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?minimize!sass-loader'],
}),
},
{
test: /\.(scss)$/,
loader: "sass-loader", // compiles Sass to CSS
options: {
data: "$HOST-URL: '" + "localhost:8000" + "';"
}
},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
HOST_URL: "localhost:8000"
}),
new CopyWebpackPlugin([
{ from: './node_modules/font-awesome/fonts/', to: './assets/fonts/' },
{ from: './src/widget/', to: './widget/' },
{ from: './src/website/', to: './website/' },
]),
new StyleLintPlugin(),
new ExtractTextPlugin({
filename: '[name]/css/[name].css',
allChunks: true,
}),
new UglifyJSPlugin(),
],
};
package.json
{
"name": "name",
"version": "0.0.1",
"main": "index.js",
"author": "author",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.26.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"css-loader": "^0.26.4",
"eslint": "^3.17.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.0",
"file-loader": "^0.10.1",
"http-server": "^0.11.1",
"node-sass": "^4.9.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"stylelint-config-standard": "^16.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"uglifyjs-webpack-plugin": "^0.3.0",
"webpack": "^2.7.0",
"webpack-shell-plugin": "^0.5.0"
},
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"webpack": "webpack",
"watch": "webpack --watch"
},
"dependencies": {
"bootstrap": "^4.0.0",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-sass": "^3.3.7",
"copy-webpack-plugin": "^4.5.2",
"extract-text-webpack-plugin": "^2.1.0",
"font-awesome": "^4.7.0",
"formdata-polyfill": "^3.0.9",
"jquery": "^3.2.1",
"popper.js": "^1.12.9"
}
}
widget.js
import Video from './video';
import Overlay from './overlay';
class Widget {
...
}
export {Widget as default}
window.Widget = Widget;
Video and Overlay are also classes and exported the same way as the Widget class. Before this, it was declares as
export default class Widget{}
The code where I am trying to access Widget is in the index.html, where I create a new Widget inside the script tag.
index.html
<script type="text/javascript">
var widget = new Widget({
});
widget.render();
</script>
Version
2.5.11
Reproduction link
https://jsfiddle.net/ranjs/eh10wju7/
Steps to reproduce:
In Google Chrome this works fine but in Firefox I get the error:
'TypeError: undefined is not a constructor[Learn More]
and nothing is displayed on the screen.
[Show/hide message details.] TypeError: undefined is not a constructor[Learn More] build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:181955
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:4377
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:247068
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:457
<anonymous>
http://localhost:25555/static/dist/build.js:1:2
What is expected?
App shows normaly
What is actually happening? Getting the error and nothing is displayed.
I upload my main.js and this is my package.json:
'{
"name": "chatbotmariana",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Ranieri Abreu Silva Junior <rabreu#indracompany.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"prod": "cross-env NODE_ENV=development webpack-dev-server --port 80 --hot --host 0.0.0.0"
},
"dependencies": {
"axios": "^0.18.0",
"compression": "^1.7.3",
"express-minify": "^1.0.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"vue": "^2.5.17",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.11.3"
}
}
I'm using JavaScript and I dont have tsconfig.
.bablrc :
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
},{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
],
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ] // <= Order is very important
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
i found.
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "pt-BR";
recognition.interimResults = false;
recognition.maxAlternatives = 1;
This code don't works in firefox
I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano (because I can still see whitespace characters). What am I doing wrong?
Some relevant configuration files:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var postCompileScript = require('./postCompile');
module.exports = {
entry: './src/popup.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({})
],
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
resolve: {
alias: {
"react": "preact-compat",
"react-dom": "preact-compat"
},
extensions: ['.js', '.jsx']
}
};
postcss.config.js:
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
package.json
{
"name": "REDACTED",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"deploy": "node ftp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ftp": "^0.3.10",
"post-compile-webpack-plugin": "^0.1.2",
"postcss-loader": "^3.0.0",
"prepend-file": "^1.3.1",
"style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"iframe-resizer": "^3.6.1",
"js-cookie": "^2.2.0",
"npm": "^6.4.0",
"preact": "^8.3.1",
"preact-compat": "^3.18.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-iframe-resizer-super": "^0.2.0"
}
}
Thanks in advance.
For any future readers: I solved my problem by just adding the cssnano plugin to the postcss-loader in the config. Thus the css rule is as follows (webpack.config.js):
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({}),
require('cssnano')({ preset: 'default' })
],
minimize: true
}
}
]
}
Following is my folder structure & Files for React project which is working fine but I am unable to add CSS through SCSS via Webpack using extract-text-webpack-plugin. Let me know what I am doing wrong with the configuration.
Folder Structure -
Webpack.config.js File -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{
allChunks: true
});
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
Package.json -
{
"name": "reactyarn",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
FYI -
I am not getting any JS error in console, so I believe its only the configuration which is not working.
You appear to be missing one of the loaders (sass-loader) and setting them up in your modules incorrectly.
Try the example below:
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, 'relative/path/to/scss')]
}, // <--- this is new
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
By using ExtractPlugin.extract you're referencing the means to do this in Webpack 2 (using rules and use) but your Webpack config file appears to be geared toward Webpack 1.