I am trying to run an older BigCommerce site locally but none of the JavaScript is working on the local site. Console seems to indicate an issue with Babel.
This is what is in the error log:
Error: Module build failed: TypeError: /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/assets/js/theme/global/quick-search.js: Cannot read property 'has' of undefined
at resolvePath (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/importModule.js:22:24)
at importModule (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/importModule.js:36:53)
at memoized (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/memoize.js:62:23)
at /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/index.js:217:63
at arrayEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/forEach.js:38:10)
at /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/index.js:193:30
at arrayEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/lodash/forEach.js:38:10)
at /Users/liam/Desktop/BigCommerce/KBBC+V1.4+(March+2020)-1.11.0/node_modules/babel-plugin-lodash/lib/index.js:181:28
This is what is in the package.json file. I've changed the Stencil CLI to 6.3.0 as per BC's instructions but doesn't seem to be the issue this time.
"name": "bigcommerce-cornerstone",
"description": "The BigCommerce reference theme for the Stencil platform",
"version": "6.3.0",
"private": true,
"author": "BigCommerce",
"license": "MIT",
"dependencies": {
"@bigcommerce/stencil-utils": "^1.0.10",
"async": "^2.5.0",
"babel-polyfill": "^6.26.0",
"easyzoom": "^2.5.0",
"fastclick": "^1.0.6",
"foundation-sites": "^5.5.3",
"html5-history-api": "^4.2.7",
"jquery": "^2.2.4",
"jstree": "vakata/jstree",
"lazysizes": "3.0.0",
"lodash": "^4.17.4",
"nod-validate": "^2.0.12",
"pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
"slick-carousel": "^1.8.1",
"sweetalert2": "^6.10.1"
},
"devDependencies": {
"@bigcommerce/citadel": "^2.15.1",
"@babel/core": "^7.12.17",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.2.2",
"clean-webpack-plugin": "^0.1.17",
"core-js": "^2.5.0",
"es6-shim": "^0.35.3",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"grunt": "^1.0.1",
"grunt-eslint": "^20.0.0",
"grunt-karma": "^2.0.0",
"grunt-scss-lint": "^0.5.0",
"grunt-svgstore": "^1.0.0",
"jasmine-core": "^2.2.0",
"karma": "^1.7.0",
"karma-babel-preprocessor": "^7.0.0",
"karma-coverage": "^1.1.1",
"karma-es6-shim": "^1.0.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "0.3.7",
"karma-verbose-reporter": "0.0.6",
"karma-webpack": "^2.0.4",
"load-grunt-config": "^0.19.2",
"lodash-webpack-plugin": "^0.11.2",
"regenerator-runtime": "^0.11.0",
"time-grunt": "^1.2.2",
"uglify-js": "^3.0.28",
"webpack": "^3.6.0"
}
}
Running node version 12.22.2, npm 8.6.0, stencil cli 6.3.0
I think this is the same issue I got when a folder was named with special characters. Try deleting everything in your directory name after KBBC.
Change
To
You may also want to change the "name" value in config.json.