You may need an appropriate loader to handle this file type webpack css

Webpack. Почему возникает ошибка «Module parse failed You may need an appropriate loader to handle this file type»?

ERROR in ./bundle.js
Module parse failed: D:\project\frontend\bundle.js Unexpected token (8:1)
You may need an appropriate loader to handle this file type.
|
| render(
| 1,
| document.getElementById(‘root’)
| );

//import 'babel-polyfill' import React from 'react'; import < render >from 'react-dom'; import < Provider >from 'react-redux'; import App, from './App'; render(  
1
 , document.getElementById('root') );

var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractSass = new ExtractTextPlugin(< filename: "[name].css", >); module.exports = < devtool: 'cheap-source-map', context: path.join(__dirname, 'frontend'), entry: < bundle: "./bundle", common: "./common", style: './stylesheets/style.scss' >, output: < path: path.join(__dirname, 'public'), filename: '[name].js', publicPath: '/public/', >, resolve: < modules: [path.resolve(__dirname, "node_modules"), ], >, resolveLoader: < modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"], >, module: < rules: [ < test: /\.js?$/, include: /\/frontend/, loader: "babel-loader", options: < presets: [['es2015', ], "es2016", "es2017", "react"], plugins: ['transform-runtime'], > >, < test: /\.scss$/, use: ["css-loader", "autoprefixer-loader", "sass-loader"], >, < test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, use: "file?name=[name][hash].[ext]", >] >, plugins: [ new webpack.NoErrorsPlugin(), new webpack.optimize.CommonsChunkPlugin(< name: "common", filename: "[name]", minChunks: 2, >), extractSass, ] >

Оценить 3 комментария

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

You may need an appropriate loader to handle this file type #686

You may need an appropriate loader to handle this file type #686

Comments

Hi.
I put my problem inside the stackoverflow .

and in summary :

I received the following error :

ERROR in ./public/testStyle.css Module parse failed: /media/ehsan/news-ssr/public/testStyle.css Unexpected token (1:5) You may need an appropriate loader to handle this file type. | body < | background-color: red; | >@ ./src/client/pages/HomeContainer.js 31:0-40 @ ./src/client/Routes.js @ ./src/client/client.js 

package versions :
«webpack»: «^3.11.0» , «style-loader»: «^0.18.2» , «css-loader»: «^0.28.9»

Note that I have researched so much and I have not reached the result, so I thought I would ask here to answer it

Thank you for your advice.

The text was updated successfully, but these errors were encountered:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The issue for ‘You may need an appropriate loader to handle this file type.’ #8

The issue for ‘You may need an appropriate loader to handle this file type.’ #8

Comments

I have seen your video about webpack on Youtube.Thank you very much.
But I meet a problem during code your example in the video.

In the webpack.config.js,I typed this below,

module.exports =  entry:'./index.js', output: path:__dirname, filename:'bundle.js' >, module: loaders:[ test:'/\.css$/',loader:'style!css!' >] > >

var bearcss = require('./bear.css'); . .

but when I run npm start, an Error happend

ERROR in ./bear.css Module parse failed: /Users/mrbackkom/getting-start-webpack/bear.css Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | @import 'base.css'; | | div @ ./bear.js 11:14-35

The text was updated successfully, but these errors were encountered:

Источник

Почему webpack выдает You may need an appropriate loader to handle this file type?

Вопрос старый, как оказалось, но ни одно предложение решить его не проходит.

Изначально выдает You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Пробовал добавлять в конфиг

Пробовал на всякий случай и отдельно babel.config.json создать

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = < entry: './src/index.js', output: < path: path.join(__dirname, '/dist'), filename: 'index-bundle.js', >, module: < rules: [ < test: /\.js$|jsx/, exclude: /node_modules/, use: < loader: 'babel-loader', options: < presets: ["@babel/preset-react", "@babel/preset-env"], plugins: ["@babel/plugin-transform-react-jsx", "@babel/plugin-transform-runtime"] >, > >, < test: /\.(css|scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'], >, ], >, plugins: [ new HtmlWebpackPlugin(< template: './src/index.html', >), ], >;

< "name": "test", "version": "0.1.0", "private": true, "scripts": < "start": "webpack --mode development --watch", "build": "webpack --mode production" >, "dependencies": < "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.14.5", "@babel/runtime": "^7.14.6", "babel-plugin-transform-runtime": "^6.23.0", "process": "^0.11.10", "react": "^17.0.2", "react-dom": "^17.0.2", "sass": "^1.35.1", "sass-loader": "^12.1.0" >, "devDependencies": < "@babel/core": "^7.14.6", "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.7", "@babel/preset-react": "^7.14.5", "babel-loader": "^8.2.2", "babel-plugin-add-module-exports": "^1.0.4", "css-loader": "^5.2.6", "html-webpack-plugin": "^5.3.2", "style-loader": "^3.0.0", "transform-runtime": "0.0.0", "webpack": "^5.41.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" >>

Простой 8 комментариев

Источник