Develop Reference

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file Javascript

I'am trying to init a class with the following syntax:
const slider = new Slider()
I get this mistake:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
My Webpack Configurations look like this:
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
attrs: false,
},
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
},
],
},
what am I doing wrong?

You probably missing a loader for css but there is no way to be sure without seeing the name of the file

CSS file causing error in react/webpack configuration

I have a fullstack project, which is made with Django-REST and React as the frontend.
Everytime i try to load a css file into my react application i get an error
import './Dashboard.css'
export default class Dashboard extends Component {
render() {
...
Dashboard.css
body {
margin:0;
}
here is my webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
what is weird to me is that, inline css, works just fine, it's only when i try to load an external sheet, that i get issues. Does anybody know what may be the cause of the problem?

You need a css-loader. Update webpack.config.js to this:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
]
}
}
And install the loader:
npm install --save-dev css-loader
It should build properly now. You can read more in the Webpack docs

How to extend nuxt.config.js to add stylus-loader and css-loader to my nuxt application?

I want to add CSS loader to my Nuxt.js project by adding what follows (as mentioned in the documentation link) webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
I also read on the Nuxt.js official documentation how to extend webpack.config.js for a Nuxt.js application by simply modifying the nuxt.config.js file as follows:
module.exports = {
build: {
extend (config, { isDev, isClient }) {
// ...
}
}
}
But when I open nuxt.config.js, I find this snippet in place:
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
})
}
}
Given these information ( and my limited knowledge of settings this stack to which I am new), I did this -which seems to work:
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
test: /\.css$/,
loader: 'eslint-loader',
loader: 'stylus-loader',
loader: 'css-loader',
exclude: /(node_modules)/,
})
}
}
When I run my project: npm run dev, all is Ok; this is also fine when I refresh my page, but I noticed whenever I open the developments tools in Chrome and I referesh the page, I get this error:
nuxt:render Rendering url /material-design-icons.css.map +225ms
{ statusCode: 404,
path: '/material-design-icons.css.map',
message: 'This page could not be found' }
The problem is that I already installed what Nuxt is complaining about:
npm install material-design-icons-iconfont --save
I also installed the css-stylus and stylus-loader using npm.
I want to let you know that I am importing these icon fonts in my_project/store/index.js:
import 'material-design-icons-iconfont/dist/material-design-icons.css'
How can I fix this?

You dont need to add css and stylus loader to nuxt, because it already have them.
As for your error -> it complains about css.map not a css. Basically it cant find map file. You could disable css map and it should be gone, but its just a warning and caused by developer tools that is looking for css source map
build: {
cssSourceMap: false,

In your nuxt.config.js file, you're pushing new rules incorrectly. You have two rules mashed together. They should be pushed separately -- one for .js and .vue files and one for .css files.
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
test: /\.(js|vue)$/,
enforce: 'pre',
loader: 'eslint-loader',
exclude: /(node_modules)/
});
config.module.rules.push({
test: /\.css$/,
loader: ['css-loader', 'stylus-loader'],
exclude: /(node_modules)/
});
}
}

How do I circumvent a file loader?

In my webpack.config.js I have this:
module: {
loaders: [
{
test: /\.css$/,
include: APP_DIR,
loader: 'style-loader!css-loader',
},
{
test: /\.scss$/,
include: APP_DIR,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.svg$/,
loader: 'babel-loader!react-svg-loader',
},
],
},
Which I am using to import some svg files directly in Components.
However now I want to show a svg file that resides inside my React App folder via scss only. But the babel-loader!react-svg-loader is preventing it from happening. I am loading the scss via React.
This:
background-image: url('../assets/icons/pattern/size_35.svg');
Becomes
background-image: url([object Object]);
I can do this but it feels hackish:
background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');
From my understanding is that for this case I should not have any file loader but because I already have one it's preventing this from working.
I do want to resolve the relative url from the React App though. So that this:
background-image: url('../assets/icons/pattern/size_35.svg');
becomes this
background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');
in frontend.

If you only want to circumvent your react-svg-loader once, you can write the loaders inline:
background-image: url('!!file-loader!../assets/icons/pattern/size_35.svg');
If this will be a common occurrence, you can use a resourceQuery for the svgs you want to treat as files:
{
test: /\.svg$/,
oneOf: [
{
resourceQuery: /file/, // size_35.svg?file
use: 'file-loader'
},
{
use: 'babel-loader!react-svg-loader'
}
]
}

nextJS/webpack: How to handle SASS files with font

I'm trying to configure webpack of my nextJS application to handle some SASS files, which looks like this:
#font-face
font-family: 'Marcellus'
font-style: normal
font-weight: 400
src: local('Marcellus-Regular'), url('/fonts/marcellus/Marcellus-Regular.ttf') format('truetype')
The # gives me an unexpected token error. So I tried to add some custom webpack configuration:
module.exports = {
webpack: function (config) {
config.module = {
rules: [
{ test: /(\.sass$)/, loaders: ['sass-loader'] },
{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
}
return config
}
}
With this the *.js files aren't recognized anymore and I'm not quite sure if the SASS files are loaded correctly. I'm very unexperienced with webpack.

You need to add multiple loaders for the SASS file:
test: /\.sass$/,
use: [{
loader: 'style-loader', // creates style nodes from JS strings
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'sass-loader', // compiles Sass to CSS
}],
Source: Sass-loader