I am trying to write my first babel program and kind of stuck.
I wrote script 1
var message = "Hello World";
module.exports = message;
and script2
var message = require('./script1');
document.write(`This is formatted with ES6 ${message}`);
my webpack.config.js looks like
module.exports = {
entry: {
main: [
'./script1.js',
'./script2.js'
]
},
output: {
filename: "./public/[name].js"
},
loaders: {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
}
The above code works and I am able to see the output but now if I modify script2 to
import message from './script1';
document.write(`This is formatted with ES6 ${message}`);
then when I run webpack it says
ERROR in ./script2.js
Module parse failed: /Users/a.c/MyProjects/ReactTutorial/script2.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import message from './script1';
| document.write(`This is formatted with ES6 ${message}`);
# multi main
My understanding is that because I am using babel, I should be able to use the new ES6 way of importing stuff into my code easily.
Try add resolve.extensions to config file (in order to avoid always write extensions when you import .js or .jsx files) also if you are using babel 6 you need install couple packages babel-preset-es2015 and babel-preset-react
module.exports = {
entry: {
main: [
'./script1.js',
'./script2.js'
]
},
output: {
filename: "./public/[name].js"
},
loaders: {
test: /\.jsx?$/, // or /\.(js|jsx)$/
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
Most likely you have forgotten to specify es2015 preset for babel.
Make sure it's installed:
> npm i -D babel-preset-es2015
You have two options to specify this preset for babel.
Create .babelrc file and specify the preset there:
{
"presets": ["es2015"]
}
Specify the preset using query property:
module: {
loaders: [
{
test: /\.jsx?$/,
include: /src/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
Related
I'm developing an application that use php 5.6 and laravel 5.4. I'm using laravel mix for build my assets. I need to know how to use mix.webpackConfig({}) method to use another webpack configurations like use babel-loader, riot-tag-loader etc. Is there any way to use this method to do that with entry point and output files? For an example, I need to do following thing inside my mix.webpackConfig({}).
module.exports = {
entry: {
admin: ['./resources/assets/admin/js/app.js'],
'manuals/parent/child/js': ['./resources/views/manuals/parent/child/js/app.js']
},
output: {
filename: '[name]/app.js',
path: path.resolve(__dirname + '/public')
},
module: {
rules: [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader',
query: {
type: 'es6',
hot: true
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
Is that possible? Is that so, please let me know how to do that. Thanks
I've hardly found the laravel-mix mix.webpackConfig({}) successfully initiated, and even working samples are rear. I do not know what framework you are trying to manage but this sample works; this is a config for less-loader, hope you can tune it to suit your purpose.
const path = require('path');
mix.webpackConfig({
module: {
rules: [
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
exclude: [
path.resolve(__dirname, "node-modules"),
path.resolve(__dirname, "resources/assets/less"),
],
},
]}
})
Mix is a configuration layer on top of Webpack, so to run your Mix tasks you only need to execute one of the NPM scripts that is included with the default Laravel package.json file: more details in official site
https://laravel.com/docs/5.7/mix
ERROR in ./client/index.js
Module build failed: SyntaxError: Unexpected token (31:4)
const Root = () => {
return (
<ApolloProvider client={client}>
^
<Router history={hashHistory}>
My Webpack config file below:
const path = require('path'),
webpack = require("webpack"),
clientPath = path.join(__dirname, 'client'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(clientPath, 'index.js'),
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}
],
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html'
})
]
};
I am not able to build , it throws Unexpected token error while I have no syntactical mistake in code, Its just not able to recognise react code style
I have tried changing js to jsx inside webpack config at this place
{
use: 'babel-loader',
test: /\.jsx$/,
exclude: /node_modules/
}
Then it throws different error like
Module parse failed: /client/index.js Unexpected token (31:4)
You may need an appropriate loader to handle this file type.
It was my mistake only, ".babelrc" file was missing in my directory so I have created a file inside my app directory at root level and put this content into that file
.babelrc
{
"presets": ["env", "react"]
}
And tried with npm run-script build....succeeded!!!!
I see two possible causes:
1) loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
] will do nothing as loaders should be specified in module.rules so nothing is handling jsx files. This can be done to handle both js and jsx files using regex /\.jsx?/
2) The babel loader has no presets so unless they are specified in a .babelrc ypou arent showing, then you need to add the necessary presets to the loader
These should both be remedied by...
npm install babel-preset-react babel-preset-es2015
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
//...
}
I'm making an app on react-redux. I'm using webpack for bundling and babel for transpiling. When I am try to use arrow function in my code. It gives me error as :
Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));
My webpack configuration file looks like as follows :
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
output: {
path: require('path').resolve('./dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre']
}
}
]
}
};
and I'm using following babel packages in my package.json :
"babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
What would have gone wrong?
Stab in the dark, is this function inside a class? Arrow functions that are members of a class are not included in ES2015 (or 2016). If you want to do something like:
class Foo {
bar = (baz) => {
console.log(baz);
}
}
You'll need to include babel-transform-class-properties.
In your example, you'll need to:
npm install --save-dev babel-plugin-transform-class-properties
and change your loader to
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre'],
plugins: ['transform-class-properties']
}
}
Also if you want to get used to new babel show, you can use babel.config.js file instead of .babelrc. The idea is like something like webpack.config.js file , but for babel configurations. It is been used like below:
module.exports = {
presets: [ "#babel/preset-env", "#babel/preset-react" ],
plugins: [ "#babel/plugin-transform-arrow-functions", "#babel/plugin-proposal-class-properties" ]
}
Make sure to install all of those plugins to compile successfully. I should say that babel itself just recommended to do all of these stuff in .babelrc file to every one. But you know, we are not every one.
This is exactly what worked for me:
1) Install babel-plugin-transform-class-properties:
sudo npm install --save-dev babel-plugin-transform-class-properties
2) Add options (not query) to your rules:
module.exports = {
..........
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'es2015'],
plugins: ['transform-class-properties']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
..........
};
First you needed to edit the .babelrc file to
{
"presets": ["react", ["es2016"]],
"plugins": [
"babel-plugin-transform-class-properties"
]
}
Second npm install babel-plugin-transform-class-properties and babel-preset-es2016
In my application, this issue was caused by less-loader mistakenly added as dependent package instead of devDependency.
Moving less-loader from dependencies to devDependencies in package.json file resolved the issue.
I have an app that is in a different folder structure than the modules installed from the package.json and I cannot find a way to make it work:
Structure:
includes
build
build stuff
src
shared assets
js
...APP (the app is a few folders down still)
How can I specify that the modules are somewhere and the app is in another place? Is this even possible? as If I set up the src of my app in the place where the build setup is, everything work as expected.
Where is my very simple webpack config.
var getters = require('./../gulpfile.js/config/getters');
var path = require('path');
var appRoot = path.resolve(__dirname, '../src');
var appRoot2 = path.resolve(__dirname, '../../main/jcr_root/etc/designs/fit/includes/shared_assets/js/vueapps/chat_app/src');
module.exports = {
context: appRoot2,
entry: './main.js',
output: {
filename: 'app.js',
path: getters.js.vue.apps.chatapp.dist
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
loaders: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
modules: [
'node_modules'
]
}
};
I this you can see I have appRoot and appRoot2, appRoot works as expected, appRoot2 fails giving me this error.
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in ...
EDIT: Forgot to mention I'm using :
"vue-loader": "^9.4.0".
"webpack": "^2.2.0".
"babel-loader": "^6.3.2".
EDIT2: Got it working, had to specify with another option:
resolveLoader: {
modules: [
nodeRoot
],
}
Also in the loader had to add this option:
{
test: /\.js$/,
loaders: 'babel',
exclude: /node_modules/,
query: {
presets: [nodeRoot + '/babel-preset-es2015'],
}
}
With the path to the preset.
NodeJS/Express: Webpack fails transpiling src/server/app.js to dist/server/app.js, after me adding import express from 'express' to the src-file (src/server/app.js).
The error messages look like:
ERROR in ./~/express/lib/request.js
in detail:
Module not found: Error: Can't resolve 'net'
in '/Users/timo/Desktop/Eggs/node_modules/express/lib'
or
ERROR in ./~/express/lib/view.js
in detail:
Module not found: Error: Can't resolve 'fs'
in '/Users/timo/Desktop/Eggs/node_modules/express/lib'
Do I have to change something in my webpack.config.babel.js-file?
here it is:
export default [
{
entry: './src/server/app.js',
output: {
path: './dist/server',
filename: 'app.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}]
}
},
{
entry: './src/client/app.js',
output: {
path: './dist/client',
filename: 'app.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}]
}
}
]
Try setting the "node" target for your server-side code:
{
entry : './src/server/app.js',
target : 'node',
...
}
By default, Webpack will compile for usage in a web browser, which doesn't support a lot of modules that only make sense to run server-side (like net and fs).
are you config .babelrc?webpack1 has no query option in module.loaders.if the problem even occurs.you can delete node_modules and reinstall npm install.May be something you link some dependencies from global repository via npm link,I have met.