I am working on webpack in react, when i run this command npx webpack --config webpack.config.js , i am getting below error
ERROR in ./node_modules/react-toastify/dist/ReactToastify.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
here i have attached my webpack.config.js , can anyone please help me why i am getting this error ?
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
"targets": "defaults"
}],
'#babel/preset-react'
]
}
}]
}
]
}
}
You'll need to install style-loader and css-loader:
npm install --save-dev style-loader css-loader
Then add the loaders to your webpack config. For example:
webpack.config.js
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
"targets": "defaults"
}],
'#babel/preset-react'
]
}
}]
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
]
}
}
Try adding
"babel": { "presets": ["#babel/preset-env"] }
To the end of your package.json file - after devDependencies (you may need to add #babel/preset-env via Yarn as well.)
Related
I'm building out a react/TS app and am running into this compiler error. I'm sure it's a config issue, but alas, I can't figure out which config. I'm not sure if it has to do with the generic specifically, or if I will see the "unexpected token" error show up in other circumstances as well.
ERROR in ./src/App.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../src/App.tsx: Unexpected token (15:4)
13 | const [coordinates, setCoordinates] = useState<
14 | CoordinatesQueryType | undefined
> 15 | >();
| ^
16 |
Webpack config follows. FWIW I added "react" to module.rule.options, but then i got another error that said I was missing "babel-preset-react", installed that, then another error, and then didn't wanna go down the rabbit hole.
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
port: 4000,
hot: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
And babel.rc:
{
"presets": ["#babel/env", "#babel/preset-react", "#babel/preset-flow"],
"plugins": ["#babel/plugin-transform-runtime"]
}
Is there any setup for typescript?
I think you are missing this in babel presets:
#babel/preset-typescript
And also I can't see any ts-loader in your webpack config. So you would not get typechecking even though you compile typescript. To fix this:
Change current rule for babel to match only js files
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
Install necessary tools:
yarn add -D #babel/preset-typescript ts-loader
Add #babel/preset-typescript to babel.rc presets.
Add ts-loader to webpack.config.js module rules.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
// Typescript loader
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
I think this should be able to fix the problem.
Also, you are having both options\presets and .babelrc, try to use only one of these for configuration.
I have this configuration in my webpack and I need to add sass-loader,
I already added the dependencies using
npm install sass-loader sass webpack --save-dev
But I'm confused where I include the sass loader and the documentation settings.
Now how to add to my webpack?
'use strict'
const path = require('path')
const webpack = require('webpack')
const validate = require('webpack-validator')
module.exports = validate({
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, 'src', 'index'),
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
preLoaders: [{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: 'standard'
}],
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: 'babel'
}],
}
})
I assume you want to add sass-loader in order to support scss files.
Add a new item to the loaders/rules array:
If you use webpack < v3:
loaders:[
...,
{
test: /\.(scss|sass)$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
For webpack > v3 add a rule like this:
rules:[
...,
{
test: /\.(scss|sass)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}
]
For more details look here https://webpack.js.org/loaders/sass-loader/
I am unable to display images within a React component. After many trials (attempted this, this, this, this, this, this, this and this) and only errors, I am requesting for help. I'm in the development build (not production build).
I still get this error:
Module parse failed: /project/src/images/net.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
Component
import thumbnail from '../images/net.png';
<img src={thumbnail}/>
Webpack config:
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'./src/index'
],
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
task `npm run build`.
publicPath: 'http://localhost:3000/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()],
module: {
rules: [
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loader: 'babel-loader'
},
{
test: /(\.css)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { sourcemap: true }
}
]
},
{
test: /\.(svg|png|jpg|jpeg|gif)$/,
include: './src/images',
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: paths.build
}
}
}
]
}
Directory Structure
Project
-- src
-----components
-----images
-----index.js
How can I display the image ?
Sample code here: githublink
See /src/components/home/HomePage.js
What can I do to see the image on the home page ?
Have you tried this webpack configuration
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
I am using url-loader instead.
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000 // Max file size = 25kb
}
}
}
I am not sure. But, I think you should install it first as devDependencies e.g. yarn add -D url-loader.
test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
Try using this with your file-loader loader.
notice the (?.*$|$) instead of a plain $.
{
test: /.(png|jp(e*)g|svg|gif)$/,
use:[{
loader: 'url-loader?limit=8192'
}]
}
I loaded png with url-loader instead inside webpack. You need to rebuild webpack as well.
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 have implemented webpack config like
/* eslint-disable no-var */
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/main'
],
devtool: 'eval-source-map',
output: {
path: __dirname,
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.css$/, // Only .css files
loader: 'style!css' // Run both loaders
}
]
}
};
and I have installed the css-loader style-loader for loding the css on my page and I am using the bootstrap.min.css as below
require('../../node_modules/bootstrap/dist/css/bootstrap.min.css');
it's throw error like
Bootstrap is using the Glyphicons font. You also need to have a loader for the font:
{
test: /\.woff$/,
loader: 'url?limit=100000'
}
Source: christianalfoni.github.io/react-webpack-cookbook/Inlining-fonts
Or:
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
Source: stackoverflow.com/a/31183889/2378031