I am using the webpack configurations below to build all my JS files:
const path = require('path');
const glob = require('glob');
module.exports = {
entry: Object.fromEntries(glob.sync(path.resolve(__dirname, 'src/js/profile/*.js')).map((v) => [
path.basename(v, '.js'), v,
])),
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/js/profile'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"useESModules": true
}
]
]
}
}
}
]
}
};
If I load the appropriate page, I am getting the following error:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
When I click on all the unsafe-eval errors, they all point to of the corresponding file:
}(e.exports);
try {
regeneratorRuntime = t
} catch (e) {
Function("r", "regeneratorRuntime = r")(t)
}
The error is at line Function("r", "regeneratorRuntime = r")(t)
In the JS files that are experiencing the errors, I am using import, export, async await and arrow functions.
I have done some research, and it says it is due to the new JS methods introduced that Babel cannot recognize. But I am using the latest Babel and Webpack:
"devDependencies": {
"@babel/cli": "^7.12.8",
"@babel/core": "^7.12.9",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.2",
"glob": "^7.1.6",
"grunt": "^1.3.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-uglify": "^5.0.0",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"
}