I'm trying to build my ES7 source code into a single file and have it transpiled down to ES5 but when I run webpack I still notice code like this in the built bundle
t.exports=class extends n(0).Component{title(){return this.constructor.name}}}
The export of the class means that something is not quite working, this is my relevant webpack config
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
What am I doing wrong?
In order to save someone else the precious few hours I wasted - I was including libraries that contained ES5+ code from node_modules and as obvious as it is the config is ignoring node_modues, so I just had to remove that line.
Related
I'm fairly new to webpack, and when compiling my code I came across this error.
ERROR in Error: Child compilation failed:
Module build failed (from ../node_modules/html-loader/index.js):
Error: Line 539: Unexpected identifier
And this is the line that its referring too.
return `background: linear-gradient(to bottom right, ${this.gradientStart}, ${this.gradientEnd});`
Is it possible to allow Template Strings in Webpack?
This is the inside of my webpack config
const html = {
test: /\.(html)$/,
// exclude: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
interpolate: true,
},
},
],
};
Template strings are a feature of es2015. Webpack does not understand es2015 by default to ensure compatibility with as many legacy devices as possible. You need to use a loader that will transpile es2015 into an older version of javascript. You can use "babel-loader" with the preset webpack environment that has support for many features of modern javascript.
You need to download #babel/core & #babel/preset-env for webpack by running the following command:
npm install --save-dev -D babel-loader #babel/core #babel/preset-env webpack
You need to add the following to your webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
I'm using webpack babel-loader with es-lint like so
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
however in the babel-loader i see on webpack that i have to pass options like so
options: {
presets: ['#babel/preset-env']
}
but since i'm using an array of loaders i can't use this option, or since i'm using eslint with babel loader i don't need this #babel/preset env ?
You may still want to use #babel/preset even with eslint-loader
#babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller! (source)
The eslint-loader will make all code bundled by Webpack syntax checked by eslint (following your eslint config).
You can either keep babel configuration in a separate file .babelrc.json:
{
presets: [
'#babel/preset-env'
]
}
or use the webpack configuration:
use: [{
loader: 'babel-loader',
options: { presets: ['#babel/preset-env'] },
}, {
loader: 'eslint-loader'
}]
I'm trying to use #babel/plugin-proposal-optional-chaining so I can do like {{ user?.name || 'Oops' }} in my vue templates. I have added the plugin to my babel.config.js, but it still comes up with a vue-loader error. After some searching it seems like vue uses buble instead of babel for transpiling the js inside the template tag.
Is there a way to use babel instead of buble for transpiling the js in the template?
If you are using webpack, try this on build/webpack..conf.js
(replace where the test matches and adjust to your preferences)
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
use: [{
loader: "babel-loader",
options: { presets: ['es2015'], compact: false } // Add here your options!
}]
},
...
]
...
}
...
}
Maybe you have to install and configure babel with a file .babelrc to add the proposal and babel-loader
If not webpack, please, add more info about your project structure and the way to compile/transpile it (or migrate to webpack, is a good friend to transpile).
Also if you need more help let me know.
Hope it helps at least a bit :)
I'm trying to generate istanbul coverage reports for my react components, using (webpack/karma). But the generated report shows the code after transpile and full of (necessary) code.
Is there a way to view before transpiling JSX code in the report or at least only the real application code?
I am using a istanbul-instrumenter as a postLoader in my karma.conf.js:
webpack: {
postLoaders: [ {
//delays coverage til after tests are run, fixing transpiled source coverage error
test: /\.jsx$/,
exclude: /(test|node_modules|bower_components)\//,
loader: 'istanbul-instrumenter' }
]
}
I just solved it by changing from istanbul-instrumenter-loader to babel-istanbul-instrumenter-loader.
Follow the config needed:
preLoaders: [
// transpile and instrument only testing sources with babel-istanbul
{
test: /.jsx?$/,
loader: 'babel-istanbul',
include: [
path.resolve(__dirname, "/src/"), // My tests are under src folder :(
],
query: {
cacheDirectory: true
}
}
]
as the title suggests, basically according to the docs, with the new Babel 6 we are now supposed to pass in plugins/presets since by default it would not do anything with our code.
So I created a .babelrc file in my project directory with the following (just like in the docs)
{
"presets": ["es2015"]
}
However this would not work.
Since I'm using webpack and babel-loader, I came across a different answer that suggested to put something like this in the webpack config:
{
test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {
presets: ["es2015"]
}
}
And this works.
So my question is whether this is a bug in the new Babel or there is something obviously wrong that I'm missing? I used to use Babel 5 and Webpack, and I was able to specify the babel config in .babelrc no problem...
Thanks in advance
EDIT: The problem only occurred when running the eslint loader before the babel loader. However just updated to latest babel-loader 6.2.0 and everything is working again.
module: {
preLoaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "eslint"}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel"},
{ test: /\.css$/, exclude: /node_modules/, loader: "style!css!postcss"}
It seems to be a problem with babel-loader. It should be fixed in release 6.1.0.
You can see the release/v6.1.0 summary:
* release/v6.1.0:
Update CHANGELOG.md and package.json
Set source file name relative to options.sourceRoot
Allow babelrc to be specified for cache purposes
Add BABEL_ENV || NODE_ENV to default cacheIdentifier
So updating babel-loader will suffice.