Recently updated node and NPM and now I am struggling to get my assets to compile when running my npm run dev command. I am receieving the following error:
ERROR in ./src/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in
[email protected]
I've tried deleteing my package-lock and node modules folder and reinstalling using npm install but still no luck.
Can anybody please advise how to resolve, or to find out which versions of node/npm I should be using?
Here is my Package-json file.
{
"name": "Project",
"version": "1.0.0",
"description": "",
"license": "UNLICENSED",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"dev": "webpack --watch --mode=development",
"prod": "webpack --watch --mode=production",
"build": "webpack"
},
"dependencies": {
"@babel/core": "^7.5.5",
"@babel/polyfill": "^7.8.3",
"@babel/preset-env": "^7.5.5",
"axios": "^0.19.1",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"css-loader": "^0.28.11",
"flickity": "^2.2.1",
"flickity-imagesloaded": "^2.0.0",
"form-serialize": "^0.7.2",
"html-validator": "^5.0.0",
"lazysizes": "^4.1.8",
"lodash": "^4.17.15",
"mobius1-selectr": "^2.4.13",
"node-sass": "^4.12.0",
"postcss-loader": "^2.1.4",
"sass-loader": "^7.3.1",
"smoothscroll-polyfill": "^0.4.4",
"style-loader": "^0.21.0",
"svgxuse": "^1.2.6",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"devDependencies": {
"axe-core": "^3.4.1",
"babel-eslint": "^10.0.3",
"browser-sync-webpack-plugin": "^2.2.2",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.9.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"postcss-preset-env": "^5.3.0",
"prettier": "^1.19.1"
}
}
webpack config
/* eslint-disable no-undef */
/*
* Webpack Packages
*/
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
entry: ['@babel/polyfill', './src/js/app.js', './src/scss/styles.scss'],
output: {
filename: 'bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist/js/'),
publicPath: 'dist/js/'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
{
loader: 'eslint-loader',
options: {
emitError: true,
emitWarnings: true
}
}
]
},
// Styles
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
url: false,
minimize: true,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
postcssPresetEnv({
stage: 3,
browsers: 'last 2 versions'
})
],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '../css/style.css',
allChunks: true
})
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
question from:
https://stackoverflow.com/questions/65918086/webpack-error-err-package-path-not-exported-no-exports-main-defined 
