Html-webpack-plugin: TypeError: $export is not a function
Html Webpack Plugin:
<pre>
TypeError: $export is not a function
- app.html:1294 Object.<anonymous>
/Users/willin/Desktop/test/electronvue/src/app/app.html:1294:1
- app.html:622 __webpack_require__
/Users/willin/Desktop/test/electronvue/src/app/app.html:622:30
- app.html:46 fn
/Users/willin/Desktop/test/electronvue/src/app/app.html:46:20
- app.html:1105 Object.<anonymous>
/Users/willin/Desktop/test/electronvue/src/app/app.html:1105:1
- app.html:622 __webpack_require__
/Users/willin/Desktop/test/electronvue/src/app/app.html:622:30
- app.html:46 fn
/Users/willin/Desktop/test/electronvue/src/app/app.html:46:20
- app.html:1028 Object.<anonymous>
/Users/willin/Desktop/test/electronvue/src/app/app.html:1028:1
</pre>
config:
new HtmlWebpackPlugin({
filename: 'app.html',
template: path.join(__dirname, '../app/app.html')
})
app.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Electron</title>
</head>
<body>
<div id="app" style="-webkit-app-region: drag"></div>
</body>
</html>
app.js:
import Vue from 'vue';
const app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});
Error MSG:
[BABEL] Note: The code generator has deoptimised the styling of "/Users/willin/Desktop/test/electronvue/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: f8cece89601e5f0e66cb
Version: webpack 2.2.1
Time: 9578ms
Asset Size Chunks Chunk Names
app.js 909 kB 0 [emitted] [big] main
app.html 795 bytes [emitted]
[29] ./~/babel-runtime/core-js/object/define-property.js 118 bytes {0} [built]
[30] ./~/babel-runtime/core-js/object/get-own-property-names.js 125 bytes {0} [built]
[48] ./~/babel-runtime/core-js/json/stringify.js 110 bytes {0} [built]
[75] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 6.66 kB {0} [built]
[76] ./src/app/app.js 412 bytes {0} [built]
[77] ./~/ansi-html/index.js 4.76 kB {0} [built]
[79] ./~/babel-runtime/core-js/object/freeze.js 109 bytes {0} [built]
[83] ./~/babel-runtime/core-js/promise.js 103 bytes {0} [built]
[84] ./~/babel-runtime/core-js/set.js 99 bytes {0} [built]
[142] ./~/strip-ansi/index.js 161 bytes {0} [built]
[143] ./~/vue/dist/vue.runtime.common.js 162 kB {0} [built]
[144] (webpack)-hot-middleware/client-overlay.js 1.73 kB {0} [built]
[145] (webpack)-hot-middleware/process-update.js 3.85 kB {0} [built]
[146] (webpack)/buildin/module.js 521 bytes {0} [built]
[148] multi webpack-hot-middleware/client?noInfo=true&reload=true ./src/app/app.js 40 bytes {0} [built]
+ 134 hidden modules
ERROR in TypeError: $export is not a function
- app.html:1294 Object.<anonymous>
/Users/willin/Desktop/test/electronvue/src/app/app.html:1294:1
- app.html:622 __webpack_require__
/Users/willin/Desktop/test/electronvue/src/app/app.html:622:30
- app.html:46 fn
/Users/willin/Desktop/test/electronvue/src/app/app.html:46:20
- app.html:1105 Object.<anonymous>
/Users/willin/Desktop/test/electronvue/src/app/app.html:1105:1
- app.html:622 __webpack_require__
/Users/willin/Desktop/test/electronvue/src/app/app.html:622:30
- app.html:46 fn
/Users/willin/Desktop/test/electronvue/src/app/app.html:46:20
- app.html:1028 Object.<anonymous>
/Users/willin/Desktop/test/electronvue/src/app/app.html:1028:1
Child html-webpack-plugin for "app.html":
[0] ./~/core-js/library/modules/_core.js 136 bytes {0} [built]
[6] ./~/babel-runtime/helpers/typeof.js 1.42 kB {0} [built]
[46] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
[47] ./~/html-webpack-plugin/~/lodash/lodash.js 478 kB {0} [built]
[57] ./~/babel-runtime/core-js/symbol.js 102 bytes {0} [built]
[58] ./~/babel-runtime/core-js/symbol/iterator.js 111 bytes {0} [built]
[69] ./~/core-js/library/fn/symbol/index.js 254 bytes {0} [built]
[70] ./~/core-js/library/fn/symbol/iterator.js 169 bytes {0} [built]
[95] ./~/core-js/library/modules/es6.object.to-string.js 13 bytes {0} [built]
[96] ./~/core-js/library/modules/es6.string.iterator.js 518 bytes {0} [built]
[97] ./~/core-js/library/modules/es7.symbol.async-iterator.js 57 bytes {0} [built]
[98] ./~/core-js/library/modules/es7.symbol.observable.js 54 bytes {0} [built]
[99] ./~/core-js/library/modules/web.dom.iterable.js 552 bytes {0} [built]
[100] (webpack)/buildin/module.js 521 bytes {0} [built]
[101] ./~/html-webpack-plugin/lib/loader.js!./src/app/app.html 580 bytes {0} [built]
+ 87 hidden modules
package.json:
{
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.2.0",
"style-loader": "^0.13.1",
"vue-loader": "^10.3.0",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-validator": "^2.3.0"
}
willin
All 11 comments
Are you using vue-loader for all html files?
Because this will also affect the template html file.
Read the FAQ for details
jantimon
on 6 Feb 2017
+1 with the same issue
happens only on Windows, works fine on OSX and Linux
tried both latest and LTS versions of node
React project, not using vue or vue-loader at all
package.json relevant parts:
"html-webpack-plugin": "^2.15.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
Also tried with latest html-webpack-plugin and webpack, same error.
config:
new HtmlWebpackPlugin({
template: './conf/tmpl.html',
inject: false
})
template:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GGS</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- build:css dependencies.min.css -->
<link rel="stylesheet" type="text/css" href="css/spinner.css">
<!-- endbuild -->
<% if (htmlWebpackPlugin.options.production) { %>
<link rel="stylesheet" href="app.<%=webpack.hash%>.css" media="all">
<% } %>
</head>
<body>
<div id="app">
<div class="centerVerticallyAndHorizontally backgroundGreyGradient">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- build:js dependencies.min.js -->
<script src="lib/jquery-2.2.2.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src="lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="lib/DataTables-1.10.9/media/js/jquery.dataTables.min.js"></script>
<script src="lib/DataTables-1.10.9/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="lib/DataTables-1.10.9/extensions/Buttons/js/buttons.flash.min.js"></script>
<script src="lib/jszip/jszip.min.js"></script> <!-- v 2.5.0 -->
<script src="lib/pdfmake/pdfmake.min.js"></script> <!-- v 0.1.18 -->
<script src="lib/pdfmake/vfs_fonts.js"></script> <!-- v 0.1.18 -->
<script src="lib/DataTables-1.10.9/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="lib/DataTables-1.10.9/extensions/Buttons/js/buttons.print.min.js"></script>
<script src="lib/DataTables-1.10.9/media/js/dataTables.bootstrap.js"></script>
<script src="lib/jspdf-master/jspdf.min.js"></script>
<script src="lib/bootstrap-datepicker-1.5.1/js/bootstrap-datepicker.min.js"></script>
<!-- endbuild -->
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
<!-- some crash reporting and analytics script loading here I can't share -->
</body>
</html>
MilosRasic
on 6 Feb 2017
A quick update. It seems to be caused by using both babel transform-runtime plugin and HtmlWebpackPlugin at the same time. Disabling either or using transform-runtime with
['transform-runtime', {
helpers: false,
polyfill: false,
regenerator: true, }]
makes the build complete fine.
I'm available to help debug this on windows if needed, I just have no idea where to start and the error messages aren't of much use :(
MilosRasic
on 6 Feb 2017
Please read the FAQ - your loader configuration is probably the reason
jantimon
on 6 Feb 2017
@jantimon nope
module: {
rules: [
{
test: /\.vue?$/,
use: 'vue-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['latest'],
plugins: ['transform-runtime']
}
}
}
]
}
if i remove this:
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['latest'],
plugins: ['transform-runtime']
}
}
}
can build successfully
also, there is a warning:
[BABEL] Note: The code generator has deoptimised the styling of "/Users/willin/Desktop/test/electronvue/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
willin
on 7 Feb 2017
@MilosRasic
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['latest'],
plugins: [
['transform-runtime', {
helpers: false,
polyfill: false,
regenerator: true
}]
]
}
}
}
failed：
chrome dev tool command line error:
Uncaught ReferenceError: require is not defined
at eval (eval at <anonymous> (app.js:784), <anonymous>:1:18)
at Object.<anonymous> (app.js:784)
at __webpack_require__ (app.js:637)
at fn (app.js:61)
at Object.eval (eval at <anonymous> (app.js:701), <anonymous>:16:21)
at eval (eval at <anonymous> (app.js:701), <anonymous>:245:30)
at Object.<anonymous> (app.js:701)
at __webpack_require__ (app.js:637)
at fn (app.js:61)
at Object.<anonymous> (app.js:790)
Please read the FAQ - your loader configuration is probably the reason
My project uses default ejs fallback, no loader defined for html.
MilosRasic
on 7 Feb 2017
Sorry for not looking into detail but there were many many errors which looked quite similar but were cause by loader configurations and it was a lot of wasted time to debug peoples configs.
What happens in detail is the following:
- The template is compiled using webpack (.html -> .js)
- The result of the compilation is executed using eval (in node)
- The result of the eval is emitted as a new file e.g. index.html
The error in the console is saying that point 2 - the eval is failing because the result of the compilation does not run in node.
Maybe you could add a quick console.log in front of the eval to understand which code was sent from the compilation
jantimon
on 8 Feb 2017
Hi,
Just a quick response for people struggling with this. I had the same issue running this plugin with babel-loader and babel plugin-transform-runtime. I solved the issue by adding the exclude option on the babel-loader config :
exclude: /(node_modules|bower_components)/
It seems like transforming node_modules was triggering the issue.
Owumaro
on 1 Dec 2017
exclude: /(node_modules|bower_components)/,
fixed for me. Entire thing:
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
query: {
configFile: './.eslintrc'
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: true
}
}
]
}
]
},
saltcod
on 4 May 2018
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
![lock[bot] picture](https://avatars.githubusercontent.com/in/6672?v=4&s=40)
lock[bot]
on 3 Jun 2018
Related issues
klinki
·
3Comments
laruiss
·
3Comments
NeverwinterMoon
·
3Comments
amorphius
·
3Comments
meleyal
·
3Comments
Most helpful comment
Hi,
Just a quick response for people struggling with this. I had the same issue running this plugin with
babel-loaderand babelplugin-transform-runtime. I solved the issue by adding theexcludeoption on thebabel-loaderconfig :exclude: /(node_modules|bower_components)/It seems like transforming
node_moduleswas triggering the issue.