shama / letswritecode

:mortar_board: code examples for Let's Write Code
https://www.youtube.com/user/kylerobinsonyoung
804 stars 759 forks source link

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

Closed hasnainshafqatmlt closed 7 years ago

hasnainshafqatmlt commented 7 years ago

I have installed that module $ npm install --save react-toolbox and after including in component i am getting this error

ERROR in ./~/react-toolbox/lib/date_picker/theme.css
Module parse failed: /Users/hasnain/projects/mcp_frontend/node_modules/react-toolbox/lib/date_picker/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/hasnain/projects/mcp_frontend/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)

i don't know how i can solve my webpack looks like this

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/App.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.json?$/,
      loader: 'json'
    },

      {
        test: /\.scss$/,
        loader: 'style!css!resolve-url!sass?sourceMap'
      },
      {
        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        exclude: /\/favicon.ico$/,
        loader: 'file',
        query: {
          name: '[path][name].[hash:8].[ext]'
        }
      }
    ]
  },
  resolve: {
    root: path.resolve(__dirname),
    alias: {
      static: 'static'
    }
  },
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};
ZengTianShengZ commented 7 years ago

check your loader path ,maybe you're loader path was wrong. like this:

{
            test: /\.scss$/,
            exclude: /^node_modules$/,
            loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader',
            include: [pathConfig.include_ptah]
}

check your include path