ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
WOFF files are failing to load and I am not getting an idea to why file-loader is failing to load WOFF, WOFF2 and SVG.
Here is my Webpack 4 loaders config:
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
Please suggest a solution to me.
You can user webpack url-loader for that and it will resolve your problem.If you are using npm you can install npm install url-loader --save-dev and in your webpack.config.js you can write module settings like this
{test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}
and import images like import img from './image.svg'
Github : https://github.com/webpack-contrib/url-loader
NPM : https://www.npmjs.com/package/url-loader
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
It worked for me. And also you can use resolve-url-loader
https://www.npmjs.com/package/resolve-url-loader
Related
I am using styleguidist for my react application, here is the code of my styleguid.config.js file:
module.exports = {
webpackConfig: {
module: {
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
}
]
}
}
}
Now I want to show barcode image in my styleguidist server which is running in http://localhost:6060.
Code of my styleguidist readme.md
```jsx
var Macybarcode = require('../../../containers/assets/img/macy/barcode.png');
const barcode_img = Macybarcode;
const barcode_no = "33527111690008";
<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />
```
But whenever I am trying to show image my server is giving following error:
Please click to see the Error console
You need url-loader for images
Use:
npm install url-loader --save
module.exports = {
webpackConfig: {
module: {
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000
}
}
}
]
}
}
}
try this line inside
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
Unexpected token (1:0) #import "./variables"; Getting this error using webpack
my webpack.config is like this module:
{
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
}
Any one help me to sort the issue
Sass-loader seems to be incompatible with webpack 4.
You can use mini-css-extract-plugin which I use with webpack 4.
https://github.com/webpack-contrib/mini-css-extract-plugin
People are facing this #import issue with webpack 4. Take a look at following thread.
https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
I want to load my css's styles.
import '../assets/home/css/style.css'
I'm using 'style-loader', 'css-loader' but I got this error message:
Module not found: Error: Can't resolve 'style-loader' in
'/Users/sm_emamian/Desktop/react js/shadyab' #
./app/containers/Intro.js 23:0-39
my webpack.config.js:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: __dirname
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
resolve: {
extensions: ['.js', '.jsx', '.css']
}
}
}
npm install style-loader --save-dev
Also style-loader should be used with the 'loader', not 'use'.
Webpack config line:
test: /\.css$/,
loader: 'style-loader!css-loader'
Ref: https://github.com/webpack-contrib/style-loader
I'm trying to use React-file-viewer. Npm tutorial is here
But I have an error in the console : "you may need an appropriate loader to handle this file type"
This is my code :
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';
const file = 'http://example.com/image.png'
const type = 'png'
onError = (e) => {
logger.logError(e, 'error in file-viewer');
}
<FileViewer
fileType={type}
filePath={file}
errorComponent={CustomErrorComponent}
onError={this.onError}/>
I specify, i have babel-preset-es2015 and i use it
How can I do ?
Thank you
module: {
loaders: [
// .ts(x) files should first pass through the Typescript loader, and then through babel
{ test: /\.tsx?$/, loaders: ['babel', 'ts-loader'] },
{ test: /\.css$/, loaders: ['style', 'css-loader'] },
{ test: /\.scss$/, loaders: ['style', 'css-loader?modules&importLoaders=1&localIdentName=[local]-[hash:base64:5]', 'postcss-loader', 'sass'] },
{ test: /\.(png|svg|gif|jpg|jpeg)$/, loaders: [ 'url-loader', 'image-webpack?bypassOnDebug'] },
{ test: /\.(eot|woff|ttf|woff2)$/, loader: "file?name=[name].[ext]" }
]
}
You have to include babel in webpack config as
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' }]
As you are using
onError = (e) => {
logger.logError(e, 'error in file-viewer');
}
which is es6 syntax.To make it browser compatible you have to add
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']}
Make sure you have installed the following presets and plugins, as listed in node-modules/react-file-viewer/.babelrc file:
{
"presets": [
"react",
"es2015",
"stage-0"
],
"plugins": [
"transform-class-properties",
"transform-es2015-classes",
"transform-es2015-object-super",
"transform-runtime"
]
}
Assuming you already have the react and es2015 in your project, the npm command will be:
npm install --save-dev babel-preset-stage-0 \
babel-plugin-transform-class-properties \
babel-plugin-transform-es2015-classes \
babel-plugin-transform-es2015-object-super \
babel-plugin-transform-runtime
You need to import logger from Logging library,
something like this:
import logger from 'logging-Lib';
see more:
https://www.npmjs.com/package/react-file-viewer
You need to import the file using require.
// import FileViewer from "react-file-viewer";
const FileViewer = require('react-file-viewer');
After that if you are getting any error like Module not found: Can't resolve 'console'. you can run
npm install console
Migrating from a working Webpack v1 config to Webpack 2. But running into an error while trying to run the build:
ERROR in ./src/index.jsx
Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string
I have updated my loaders to match the new format:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'file-loader',
query: {
name: '[path][name].[hash].[ext]',
},
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader',
query: {
limit: 100000
}
},
{
test: /\.icon-svg$/,
use: [{loader:'babel-loader'}, {loader: 'svg-react-loader'}]
},
// Bootstrap 3
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
}
]
},
It's as if something is not being compiled the way it was before, therefore causing a TypeError.
Turns out I was babelifing twice.
If you're also splitting your webpack.config.js into separate files for your different environments, be sure that webpack.dev.config.js does not include a babel-loader entry if your webpack.base.config.js does.
Otherwise, if you use the loader twice the 2nd time around will cause an error. This wasn't a Webpack 2 error but a webpack splitting-configs-and-missing-a-small-thing error
Encountered a similar issue in my compilation. Found out that I was using babel loader for .js and .jsx both.
Removed .jsx and its working as expected.
A snippet of my webpack.config.js looks like this.
{
test: /\.js$/,
exclude: [/(node_modules)/],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
'transform-class-properties',
'transform-decorators-legacy'
]
}
}
]
}
In case someone else is having the same issue, I had to remove the following from loader for it to work
{
test: /\.jsx?$/,
use: ['react-hot-loader/webpack']
}
In my case it helped when I removed devtool: 'inline-source-map' from webpack