I have the site in a staging server and it's working fine. It has been working fine in my dev environment for months but when I fired up the project today I get errors. In the browser (Chrome) I get this: "Uncaught ReferenceError: undefinedLoadScript is not defined at Module../node_modules/vue-plugin-load-script/index.js"
I'm building with webpack and get this in VS Code:
module "...node_modules/vue-plugin-load-script/index"
Could not find a declaration file for module 'vue-plugin-load-script'. '.../node_modules/vue-plugin-load-script/index.js' implicitly has an 'any' type.
Try npm install @types/vue-plugin-load-script
if it exists or add a new declaration (.d.ts) file containing declare module 'vue-plugin-load-script';
ts(7016)
I've been trying to figure this out for a while now. I can't find anyone else reporting a solution. I'm totally baffled, especially since it's been fine before today.
My webpack file, package.json, and the js file are below. Thanks for taking a look at this!
webpack.config.js:
const path = require('path');
const publicPath = 'http://localhost:3000/';
const config = {
'domain': 'urphysiciangroup.cwdev',
};
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// Configuration for the ExtractTextPlugin — DRY rule.
const extractConfig = {
use: [
// "postcss" loader applies autoprefixer to our CSS.
{
loader: 'raw-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
autoprefixer({
flexbox: 'no-2009',
}),
],
},
},
// "sass" loader converts SCSS to CSS.
{
loader: 'sass-loader',
options: {
outputStyle: 'production' === process.env.MODE ? 'compressed' : 'nested',
},
},
],
};
module.exports = {
mode: process.env.MODE,
entry: {
main: './src/index',
admin: './src/admin/index',
},
resolve: {
alias: {
'node_modules': path.join(__dirname, 'node_modules'),
'SRC': path.join(__dirname, 'src'),
vue: 'vue/dist/vue.min.js'
}
},
output: {
pathinfo: true,
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
devtool: 'source-map',
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
plugins: ['lodash'],
presets: [
['@babel/preset-env', {
'targets': {
'node': 6
}
}]
]
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/react']
}
}
},
{
test: /\.(s)css$/,
exclude: /(node_modules|bower_components)/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: true,
sourcemap: true,
publicPath: '/'
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
})
},
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../'
}
}
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../'
}
}]
}
]
},
plugins: [
new BundleAnalyzerPlugin(),
new HardSourceWebpackPlugin(),
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/[name].css').replace('css/js', 'css');
},
allChunks: true
}),
new BrowserSyncPlugin({
proxy: config.domain,
files: [
'**/*.php'
],
reloadDelay: 0
}),
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ie8: false,
ecma: 8,
mangle: true,
output: {
comments: false,
beautify: false
},
warnings: false
}
}),
new ManifestPlugin({
fileName: 'asset-manifest.json',
writeToFileEmit: true
})
]
};
package.json:
{
"name": "cw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"browserslist": [
"> 1%",
"ie > 9",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
],
"babel": {
"plugins": [
"lodash"
],
"presets": [
[
"@babel/env",
{
"targets": {
"node": 6
}
}
]
]
},
"scripts": {
"test": "test",
"start": "cross-env BABEL_ENV=default MODE=development webpack --watch",
"serve": "webpack-dev-server --open",
"build": "cross-env BABEL_ENV=default MODE=production webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"@wordpress/components": "^7.2.2",
"axios": "^0.18.1",
"babel-preset-react": "^6.24.1",
"browser-sync": "^2.26.7",
"extract-loader": "^2.0.1",
"gsap": "^2.1.2",
"hard-source-webpack-plugin": "^0.11.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"normalize.css": "^8.0.1",
"orgchart": "^2.1.5",
"raw-loader": "^0.5.1",
"react": "^16.9.0",
"react-render-html": "^0.6.0",
"script-loader": "^0.7.2",
"smoothscroll-polyfill": "^0.4.4",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-axios": "^2.1.4",
"vue-carousel": "^0.18.0",
"vue-organization-chart": "^1.1.6"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@wordpress/babel-preset-default": "^1.3.0",
"autoprefixer": "^9.6.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.5",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"browser-sync-webpack-plugin": "^2.2.2",
"classnames": "^2.2.5",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"eslint": "^5.16.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^4.0.3",
"path": "^0.12.7",
"postcss-loader": "^2.1.6",
"raw-loader": "^0.5.1",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"vue-plugin-load-script": "^1.2.0",
"webpack": "^4.39.2",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-cli": "^3.3.7",
"webpack-manifest-plugin": "^2.0.4"
}
}
maps.js:
/* global map_options: false, google: false */
import Vue from 'vue';
import LoadScript from 'vue-plugin-load-script';
const mapCanvas = document.querySelectorAll('.cw-map-canvas');
if (mapCanvas.length) {
Vue.use(LoadScript);
Vue.loadScript('https://maps.googleapis.com/maps/api/js?key='+map_options.maps_api_key).then(() => {
for (let m = 0; m < mapCanvas.length; m++) {
const mapCan = mapCanvas[m];
let id = mapCan.getAttribute('id');
let address = mapCan.getAttribute('data-address');
new Vue({
el: mapCan,
data: {
results: {},
},
mounted: function() {
this.draw_map();
},
methods: {
draw_map: function() {
let map;
// let bounds = new google.maps.LatLngBounds();
let mapOptions = {
mapTypeId: 'roadmap',
zoom: parseInt(map_options.zoom),
scrollwheel: map_options.scroll_zoom,
disableDefaultUI: map_options.controls
};
let customMapType = new google.maps.StyledMapType([
{
stylers: [
{hue: map_options.hue},
{visibility: map_options.visibility},
{saturation: map_options.satch},
]
}
], {
name: 'Custom Style'
});
let customMapTypeId = 'custom_style';
// Display a map on the page
map = new google.maps.Map(document.getElementById(id), mapOptions);
let geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
let position = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
new google.maps.Marker({
position: position,
map: map,
animation: google.maps.Animation.DROP,
});
map.setOptions({center:position});
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
}
});
}
}).catch((e) => {
console.log(e);
});
}