I m trying to add font-awesome to my React-redux project. I got the same error as in the link: Webpack problems importing font-awesome library. But modifying webpack.config.js didnt help. Now my webpack.config.js now looks like:
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'url-loader?limit=10000'
}, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
]}
And the error that I m getting is:
at Parser.pp$3.parseExprSubscripts (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (<project>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
Module not found: Error: Cannot resolve module 'file' in <project>\node_modules\font-awesome\css
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:312-355
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/font-woff didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:412-465
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/font-woff didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:495-547
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=application/octet-stream didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:576-627
ERROR in Loader <project>\node_modules\url\url.js?limit=10000&mimetype=image/svg+xml didn't return a function
# ./~/css-loader!./~/font-awesome/css/font-awesome.min.css 6:660-711
Try adding -loader to all of your loaders: file-loader, url-loader etc. Since webpack 2 it is required to add the -loader suffix.
I would greatly recommend starting with FontAwesome 5 since it's out now.
It's much easier to integrate into a React app and much better and uses SVG Icons.
FontAwesome 5 adds support for React check it out here
They created a specific package for it. Here
Install:
$ yarn add #fortawesome/fontawesome
$ yarn add #fortawesome/react-fontawesome
and is used like so
<FontAwesomeIcon icon="coffee"/>
from bash:
yarn add #fortawesome/fontawesome
yarn add #fortawesome/fontawesome-free-solid
yarn add #fortawesome/react-fontawesome
in js file header
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
import faCoffee from '#fortawesome/fontawesome-free-solid/faCoffee';
in render function
<FontAwesomeIcon icon={faCoffee} />
Related
In our project, I'm trying to refactor all our components to have a .jsxfile extension rather than .js. My webpack.config.babel file now looks like this:
import fs from "fs"
const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))
export default {
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.jsx$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.json$/,
loader: "json-loader",
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
}
However when I try to run import Main from './components/Main/Main';
in my client.js file, it shows me
Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
# multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js
I'm new to babel and webpack. What other places to I need to register the jsx file extension?
Take a look at the documentation for resolve.extensions:
https://webpack.js.org/configuration/resolve/#resolveextensions
You can add the following to your Webpack config to also automatically resolve files with the .jsx extension by adding the following to your config:
resolve: {
extensions: ['.js', '.jsx']
}
Btw, you can also optimize your loader config by removing the separate .jsx loader and make the first loader test for /\.jsx?$/
This question has been answered in multiple questions before, but I'm afraid none of them work for me.
I'm using font-awesome from node_modules
all I wanna do is this
import 'font-awesome/css/font-awesome.css'
Here's my Webpack Code
webpackConfig.module.rules.push(
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
)
The error, Please note I am getting the same error for all the different fonts in font-awesome
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: /Users/valoster/Projects/app-ui/node_modules/url-loader/index.js?limit=10000&mimetype=application/font-woff!/Users/valoster/Projects/app-ui/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
| export default = __webpack_public_path__ + "af7ae505a9eed503f8b8e6982036873e.woff2";
# ./node_modules/css-loader?{"sourceMap":true,"minimize":true}!./node_modules/postcss-loader/lib?{"plugins":[{"version":"5.2.17","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.17"}]}!./node_modules/font-awesome/css/font-awesome.css 6:244-297
# ./node_modules/font-awesome/css/font-awesome.css
You are trying to import a .css file, so you need to use css-loader.
Command Line:
yarn add css-loader --dev
In your webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-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
I am trying to add css modules to webpack in my react project. I added it like this
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
},
But I am getting compile error saying
ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/video.js/dist/video-js.css
Module not found: Error: Cannot resolve module 'font/VideoJS.eot' in /home/apurv/Downloads/Frontend-Master-master/node_modules/video.js/dist
# ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/video.js/dist/video-js.css 6:984-1011
webpack: Failed to compile.
I already have a stylus loader in webpack and it is working fine
{
test: /\.styl$/,
loader: [
'isomorphic-style-loader',
'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
'stylus?sourceMap'
].join('!')
},
How can I solve this error?
I already have a loader for eot files
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
And when I use css loader like this(below), the error doesn't come.
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
I have already installed css-loader and style-loader in my package.json file.
I would like to use tree shaking feature seems we don't need to install babel-preset-es2015-webpack. We still can use babel-preset-es2015 and set the modules flag to false for es2015 preset. I changed my webpack configuration as shown below which results in "Unexpected token import" error on import line in my react components.
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: [['es2015', {modules: false}], 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
}
]
}
I also tried to set the presets as
['es2015', 'react', {modules: false}]
Then I got different error on console:
Module build failed: ReferenceError: [BABEL] C:\FE-Proj-Templates\webpack\main.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
How can I set the preset es2015 with modules flag false and also use React preset?
It's updated and works
presets: [['es2015', {modules: false}], 'react']