I'm trying to add sound effects to my UI but it keeps telling me that it
Module not found: Error: Can't resolve 'file-loader'
I have a .mp3 file in this directory structure src/core/sounds/click.mp3 and in my login.tsx
file I'm importing it
import soundPack from '../../../core/sounds/soundpack.mp3';
My in my WebPack file I have the following
{
test: /\.(mp3)/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'core/sounds'
}
}
]
}
You have not installed file-loader
please see file-loader npm package
Related
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} />
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 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 am trying to implement SCSS in my project. I have ran the npm command to install the loader "npm install sass-loader node-sass --save-dev". I have created a scss file. but the problem is it is not working. i tried multiple configurations to make it runable but no luck. below are my webpack configuration. please advice,
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
Did you configure your loaders correctly? Cant at least see any css/scss loaders in your provided code? https://github.com/webpack-contrib/sass-loader
UPDATE::
Add ExtractTextPlugin into your config. What this does is, it moves all the require("style.css")s in entry chunks into a separate single CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (styles.css) https://github.com/webpack-contrib/extract-text-webpack-plugin
Include the following into your webpack.config file.
// webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin'
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: [
'css',
'postcss',
{
loader: 'sass',
query: {
sourceMap: false,
}
}
],
})
}
and import your .scss files ::
import 'scss/myfile.scss'