I am relatively new to using webpack. The question I have is, When I run ./node_modules/.bin/webpack -d I am getting thrown an error. I was wondering can anyone help me and advise me as to where I might be going wrong.
The error is below as follows:
`ERROR in ./src/components/App.js
Module parse failed: /Users/danielmccord/webpack-
demo/src/components/App.js Unexpected token (8:2)
You may need an appropriate loader to handle this file type.
|
| const App = () => (
| <div>
| <AddTodo />
| <VisibleTodoList />
# ./src/client/app/index.js 17:11-44`
Webpack config
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js?/,
include: APP_DIR,
loader: 'babel-loader'
}]
},
};
module.exports = config;
Thanks in advance
Although you have specified the loader for your webpack config, you have not specified the ES6 preset and your test regex is incorrect, Change your config to
module: {
rules: [{
test: /\.jsx?$/,
include: APP_DIR,
exclude: [/node_modules/],
use: [{
loader: "babel-loader",
options: {
presets: ["stage-0","es2015","react"],
plugins: ["transform-class-properties"]
}
}]
}]
},
P.S. Make sure you install the presets and plugins with
npm install -S babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react babel-preset-stage-0
Related
I am using webpack 4.7.0 with webpack-cli installed. This is for a react-js app. Here is my webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
'inject': 'body'
});
module.exports = {
entry: './client/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
}
plugins: [HtmlWebpackPluginConfig]
}
Now when I run the command node_modules.bin\webpack --config webpack.config.js, I get the following error message:
plugins: [HtmlWebpackPluginConfig]
^^^^^^^
SyntaxError: Unexpected identifier
And I am not able to build my application. Here is my npm -v & node -v: 5.7.1
v9.4.0. How do I solve this issue?
I'm trying to set up a developer environment for React but I'm getting some issues with webpack pathing. Usually, a quick google solves issues like these but I haven't seen anyone with the same problem, which probably means I'm an idiot and is messing something up.
So, I followed a tutorial and I have a dev-folder and a output-folder. In output I have output.js, where I want webpack to output all my stuff. So, according to the guide, I should run ./node_modules/.bin/webpack and it should work with the config I have, but it's showing the wrong filepath. I want it to go to react-test/output/output.js but it's throwing in a /dev, making it react-test/dev/output/output.js. My webpack.config.js looks like this:
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
module: {
loaders: [{
include: DEV,
loader: "babel-loader"
}]
}
};
module.exports = config;
I can't see where dev is getting added.
I would modify the file to the following:
var path = require('path');
module.exports = {
entry: path.join(__dirname, '/dev/index.js'),
output: {
path: path.join(__dirname, '/output'),
filename: 'output.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
You don't need to require webpack in this file, but you do need to tell the module loader what to test. The presets I included are assuming you are using ReactJS and ES6, you may need to change them as appropriate.
webpack.config
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './dev/index.js',
output: {
path: path.resolve(__dirname, 'output'),
filename: 'output.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/Index.html' // Copy Index.html with script tag refrencing output.js in Output folder
})
]
}
Try to set context option to react-test directory.
And set DEV and OUTPUT paths realtive to it:
var DEV = path.resolve(__dirname, "./dev");
var OUTPUT = path.resolve(__dirname, "./output");
var config = {
context: path.resolve(__dirname, './'),
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
...
I was trying to get react-toolbox to run.
Got the error 'Cannot find module precss' but this is the same code I picked up from the site. Am I missing out on something?
postcss.config.js
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
webpack.config.js
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: __dirname + '/app/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?importLoaders=1',
'postcss-loader'
]
}
]
},
output: {
filename: 'transformed.js',
path: __dirname+'/build'
},
plugins: [HTMLWebpackPluginConfig]
};
Any thoughts?
What does your package.json look like? Have you added precss as a dependency to your project? You always have to make sure that everything you import/use actually exists in the project.
You can check this by opening your package.json file and checking if it's in the list of dependencies. If it isn't try running:
npm install --save precss
This will install it in your project and you should be able to run the command again.
Does anyone see what I'm doing wrong here in my webpack.config.js file? The browser gives me an error saying "unexpected token 'import' " which means it is not recognizing ES6 syntax. Am I doing something wrong with the loaders? I've installed and reinstalled dependencies multiple times, so I don't think that's where the issue lies.
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./public/index.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
root: __dirname,
alias: {
App: 'public/components/App.jsx',
Home: 'public/components/Home.jsx',
Footer: 'public/components/Footer.jsx',
Inventory: 'public/components/Inventory.jsx',
Login: 'public/components/nav/Login.jsx',
Navbar: 'public/components/nav/Navbar.jsx',
ProductSearch: 'public/components/Product-Search.jsx',
SingleProduct: 'public/components/Single-Product.jsx',
Product: 'public/components/Product.jsx',
Signup: 'public/components/Signup.jsx',
LandingNavbar: 'public/components/nav/LandingNavbar.jsx',
ProductSearch: 'public/components/ProductSearch.jsx',
Examples: 'public/components/Examples.jsx',
Pricing: 'public/components/Pricing.jsx',
Profile: 'public/components/Profile.jsx',
Checkout: 'public/components/Checkout.jsx',
Receipt: 'public/components/Receipt.jsx',
RequireAuth: 'public/components/auth/require_auth.jsx',
Signout: 'public/components/Signout.jsx',
Tour: 'public/components/tour/Tour.jsx',
BusinessTypes: 'public/components/tour/BusinessTypes.jsx',
Customers: 'public/components/tour/Customers.jsx',
Features: 'public/components/tour/Features.jsx',
GettingStarted: 'public/components/tour/GettingStarted.jsx',
MultiStore: 'public/components/tour/MultiStore.jsx',
Support: 'public/components/tour/Support.jsx',
Actions: 'public/actions/index.js'
},
extensions: ['', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.jsx$/,
loaders: ['react-hot','babel-loader', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
include: path.join(__dirname, 'public')
}]
}
};
You have the babel loader twice. Just remove 'babel-loader' from your array of loaders. This is because "babel?..." is calling the loader already.
Your package.json must have babel-loader in it. So make sure you run:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
Then this in your webpack config file:
module: {
loaders: [{
test: /\.jsx$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0', 'react']
},
include: path.join(__dirname, 'public')
}]
}
If that works, then try adding 'react-hot' to your list of loaders.
What file gives you this error? public/actions/index.js? You are not passing your .js files to babel.
And you are calling babel-loader twice. First as "babel-loader" without any preset and second as "babel" with presets.
Correct loaders would be:
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
include: path.join(__dirname, 'public')
}]
Note changed test regexp. Now it covers .js and .jsx files. And I suggest moving presets into .babelrc file
I'm totally new to webpack and I'm doing my first configuration for a new project.
I'm trying to load my jsx/scss file but I've this problem:
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var cssExtractTextPlugin = new ExtractTextPlugin("css", "index.css");
var staticPrefix = path.join(__dirname, 'src')
var distPath = path.join(__dirname, 'dist')
module.exports = {
devtool: 'eval',
//context: path.join(__dirname, staticPrefix),
entry: {
'app': ['webpack-hot-middleware/client', path.join(__dirname, 'src/app.jsx')],
'vendor': [
'bootstrap/js/dropdown',
'bootstrap/js/tab',
'bootstrap/js/tooltip',
'bootstrap/js/alert',
'jquery',
'react-router',
'react-bootstrap'
],
'myapp': path.join(__dirname, 'src/stylesheets/base.scss') //'stylesheets/base.scss'
},
output: {
path: distPath,
filename: '[name].js',
libraryTarget: 'var',
library: 'exports',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery'
}),
new ExtractTextPlugin('[name].css')
],
module: {
loaders: [
{
test: /\.js$/,
loader: ['babel'],
include: path.join(__dirname, staticPrefix),
exclude: /(vendor|node_modules)/
},
{
test: /\.jsx$/,
loader: ['babel'],
include: path.join(__dirname, staticPrefix),
exclude: /(vendor|node_modules)/
},
{
test: /\.scss$/,
include: path.join(__dirname, staticPrefix),
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader-loader')
},
{
test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
loader: 'file-loader?name=' + '[name].[ext]'
}
]
},
postcss: function() {
return [autoprefixer];
},
resolve: {
modulesDirectories: [path.join(__dirname, staticPrefix), 'node_modules'],
extensions: ['', '.jsx', '.js']
},
};
The problem is that when I run: node_modules/.bin/webpack --config=webpack.config.dev it give me 2 errors:
ERROR in ./src/app.jsx
Module parse failed: /Users/work/Desktop/myapp-client/src/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| console.log('hello!’);
|
# multi app
ERROR in ./src/stylesheets/base.scss
Module parse failed: /Users/work/Desktop/myapp-client/src/stylesheets/base.scss Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| body {
| background: black;
| }
Where I'm doing wrong ?
With babel 6 you need to include the babel react preset to transpile your .jsx files. You also need to add the babel es2015 preset to transpile ES2015, i.e. ES6, syntax:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets:[ 'react', 'es2015' ]
}
}
]
}
On a side note, if you tweak your regex in the test key, you don't need two loader entries (for the .js and .jsx files).
Make sure you install these presets separately:
npm i -D babel-preset-es2015 babel-preset-react
More info on the babel 6 changes can be found here