'Import ES6 module not importing nor exporting from its source file
I'm attempting to import the "top" function from the file view-check.js below into my pres.vue file.
Problem:
When I import this file I only see the "check" function even when attempting only to import the top function by itself. This import has been working for well over a year until recently.
What I've tried:
I've tried to rename the functions and declare each one individually as an exportable function, rather than in a singular object like below, but to no avail. I've also tried simply removing the check function from the file and compiling to find out what will happen but alas nothing.
view-check.js
function check(ele) {
console.log('isInView - no');
let myEle;
//if (typeof ele.nodeName === '#comment') { return; }
if (typeof ele === 'object') {
myEle = ele;
} else {
myEle = document.querySelector(ele);
}
if ( !myEle ) {
return;
}
var bounds = myEle.getBoundingClientRect();
var winWidth = (window.innerWidth || document.documentElement.clientWidth);
var winHeight = (window.innerHeight || document.documentElement.clientHeight);
//relative to top and left only.
if ( ( bounds.top <= winHeight || bounds.bottom <= winHeight) &&
( bounds.left >= 0 || bounds.right <= winWidth )) {
return inViewport = true;
} else {
return inViewport = false;
}
}
/* top - Is the top of the page in view? */
function top(ele) {
let myEle;
if (typeof ele === 'object') {
myEle = ele;
} else {
myEle = document.querySelector(ele);
}
if ( !myEle ) {
return;
}
var bounds = myEle.getBoundingClientRect();
var winWidth = (window.innerWidth || document.documentElement.clientWidth);
var winHeight = (window.innerHeight || document.documentElement.clientHeight);
//relative to top and left only.
//add 60 pixels for the presentation page floatbar
if ( ( bounds.top <= 60 || bounds.bottom <= bounds.height && bounds.bottom >= 0 ) &&
( bounds.left >= 0 || bounds.right <= winWidth )) {
return true;
} else {
return false;
}
}
export {
check,
top,
}
pres.vue
import { top as inview } from 'scripts/view-check.js';
How it looks in the browser:
Not sure if it'll help but my webpack config:
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const process = require('process');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'development',
entry: {
main: './src/scripts/main.js',
vendor: './src/scripts/main.vendors.js',
catalog: ['./src/projects/catalog/catalog.js', './src/projects/catalog/scss/catalog.scss'],
contactus: ['./src/projects/contactus/contactus.js', './src/projects/contactus/scss/contactus.scss'],
checkout: './src/containers/checkout.js',
checkoutnew: './src/projects/checkout/checkoutnew.js',
liquidate: ['./src/projects/liquidate/liquidate.js', './src/projects/liquidate/scss/liquidate.scss'],
payment: './src/scripts/user.payment.newmethod.js',
user: './src/projects/user/user.js',
wishlist: ['./src/projects/wishlist/wishlist.old.js', './src/projects/wishlist/scss/wishlist.old.scss'],
login: './src/scripts/global.login.js',
//Stand alone css - no js included
accountOld: './scss/account.old.scss',
cartOld: './scss/cart.old.scss',
checkoutOld: './scss/checkout.old.scss',
gcheckoutOld: './scss/gcheckout.old.scss',
backorder: './scss/backorder.scss',
ordertracking: './scss/ordertracking.scss',
sales: './scss/sales.scss' //sale pages (Bargain, New, Featured, and Best Seller)
},
output: {
chunkFilename: '[name].chunk.js',
path: __dirname + '/dist',
publicPath: '/NEWWSI/dist/',
pathinfo: false, //turn off for development, reduces build speed. Provides path info.
},
optimization: {
splitChunks: {
name: 'shared',
chunks: 'all',
},
usedExports: true,
},
module: {
rules: [
{
test: /\.m?js$/,
include: path.resolve(__dirname, 'src'),
exclude: [
'/node_modules[\\\/]core-js/',
'/node_modules[\\\/]webpack[\\\/]buildin/',
],
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env'],
],
plugins: [
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-runtime',
],
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader', //create "style" nodes from js strings
{
loader: 'css-loader', // translates css into CommonJS
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader', //loads sass file and compiles to css (replaces scout)
options: {
additionalData: `@import "scss/global.scss";`,
sourceMap: true,
}
},
],
},
]
},
resolve: {
alias: {
analytics: path.resolve(__dirname, "src/scripts/analytics.js"),
vue: path.resolve('node_modules/vue/dist/vue.runtime.esm.js'),
scss: path.resolve(__dirname, 'scss'),
modernizr: path.resolve(__dirname, 'src/scripts/modernizr-build.js'),
icons: path.resolve(__dirname, 'src/scripts/icons.js'),
catnavdata: path.resolve(__dirname, 'src/scripts/CatNavMenu.js'),
swiper: path.resolve(__dirname, "node_modules/swiper/dist/js/swiper.js"),
webfontloader: path.resolve(__dirname, "node_modules/webfontloader/webfontloader.js"),
components: path.resolve(__dirname, "src/components/"),
containers: path.resolve(__dirname, "src/containers/"),
utility: path.resolve(__dirname, "src/scripts/main.utility.js"),
plugins: path.resolve(__dirname, "src/scripts/main.plugins.js"),
polyfill: path.resolve(__dirname, "src/scripts/main.polyfill.js"),
scripts: path.resolve(__dirname, "src/scripts/"),
wishlist: path.resolve(__dirname, "src/projects/wishlist"),
pres: path.resolve(__dirname, "src/projects/pres"),
checkout: path.resolve(__dirname, "src/projects/checkout"),
liquidate: path.resolve(__dirname, "src/projects/liquidate"),
user: path.resolve(__dirname, "src/projects/user"),
search: path.resolve(__dirname, "src/projects/search"),
catalog: path.resolve(__dirname, "src/projects/catalog")
},
},
target: ['web', 'es5'],
plugins: [
//Globals
new webpack.ProvidePlugin({
'process': 'process/browser',
'webfontloader': 'webfontloader',
}),
new VueLoaderPlugin()
]
};
Any ideas about what I can do next to solve this would be great. Thank you.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

