react-bootstrap-autosuggestに関する問題

Question

私はこのパッケージを追加しようと一日中多忙を掛けました：私が最近取り出したcreate-react-appにhttps://github.com/affinipay/react-bootstrap-autosuggest。しかし、私は次のようなエラーになってきた：

Failed to compile. 

Error in ./~/react-bootstrap-autosuggest/lib/Autosuggest.js 
Module not found: 'Autosuggest.scss' in /Users/Logan/Development/projects/app_name/client/node_modules/react-bootstrap-autosuggest/lib 

@ ./~/react-bootstrap-autosuggest/lib/Autosuggest.js 38:0-27 

webpack.config.dev.js

var autoprefixer = require('autoprefixer'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); 
var getClientEnvironment = require('./env'); 
var paths = require('./paths'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 


module.exports = { 
    devtool: 'cheap-module-source-map', 
    entry: [ 
    client: 
    require.resolve('react-dev-utils/webpackHotDevClient'), 
    require.resolve('./polyfills'), 
    paths.appIndexJs 
    ], 
    output: { 
    path: paths.appBuild, 
    pathinfo: true, 
    filename: 'static/js/bundle.js', 
    publicPath: publicPath 
    }, 
    resolve: { 
    extensions: ['.js', '.json', '.jsx', ''], 
    alias: { 
     'react-native': 'react-native-web' 
    } 
    }, 

    module: { 
    preLoaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'eslint', 
     include: paths.appSrc, 
     } 
    ], 
    loaders: [ 
     { 
     exclude: [ 
      /\.html$/, 
      /\.(js|jsx)$/, 
      /\.css$/, 
      /\.json$/, 
      /\.svg$/, 
      /\.sass$/, 
      /\.scss$/ 
     ], 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: 'static/media/[name].[hash:8].[ext]' 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     // Process JS with Babel. 
     { 
     test: /\.(js|jsx)$/, 
     include: paths.appSrc, 
     loader: 'babel', 
     query: { 
      cacheDirectory: true 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style!css?importLoaders=1!postcss' 
     }, 
     // Load and compile SCSS 
     { 
     test: /\.scss$/, 
     loader: "css-loader!sass-loader" 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     // "file" loader for svg 
     { 
     test: /\.svg$/, 
     loader: 'file', 
     query: { 
      name: 'static/media/[name].[hash:8].[ext]' 
     } 
     } 
    ] 
    }, 

    // We use PostCSS for autoprefixing only. 
    postcss: function() { 
    return [ 
     autoprefixer({ 
     browsers: [ 
      '>1%', 
      'last 4 versions', 
      'Firefox ESR', 
      'not ie < 9', // React doesn't support IE8 anyway 
     ] 
     }), 
    ]; 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: paths.appHtml, 
    }), 
    new webpack.DefinePlugin(env.stringified), 
    new WatchMissingNodeModulesPlugin(paths.appNodeModules) 
    ], 
    node: { 
    fs: 'empty', 
    net: 'empty', 
    tls: 'empty' 
    } 
}; 

をPackage.json

{ 
    "name": "client", 
    "version": "0.1.0", 
    "private": true, 
    "proxy": "http://localhost:3001/", 
    "devDependencies": { 
    "autoprefixer": "6.7.2", 
    "babel-core": "6.22.1", 
    "babel-eslint": "7.1.1", 
    "babel-jest": "18.0.0", 
    "babel-loader": "6.2.10", 
    "babel-preset-react-app": "^2.1.0", 
    "babel-runtime": "^6.20.0", 
    "case-sensitive-paths-webpack-plugin": "1.1.4", 
    "chalk": "1.1.3", 
    "connect-history-api-fallback": "1.3.0", 
    "cross-spawn": "4.0.2", 
    "css-loader": "^0.26.1", 
    "detect-port": "1.0.1", 
    "dotenv": "2.0.0", 
    "eslint": "3.8.1", 
    "eslint-config-react-app": "^0.5.1", 
    "eslint-loader": "1.6.0", 
    "eslint-plugin-flowtype": "2.21.0", 
    "eslint-plugin-import": "2.0.1", 
    "eslint-plugin-jsx-a11y": "2.2.3", 
    "eslint-plugin-react": "6.4.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "0.10.0", 
    "filesize": "3.3.0", 
    "fs-extra": "0.30.0", 
    "gzip-size": "3.0.0", 
    "html-webpack-plugin": "2.24.0", 
    "http-proxy-middleware": "0.17.3", 
    "jest": "18.1.0", 
    "json-loader": "0.5.4", 
    "node-sass": "^4.5.0", 
    "object-assign": "4.1.1", 
    "postcss-loader": "1.2.2", 
    "promise": "7.1.1", 
    "react-dev-utils": "^0.5.0", 
    "recursive-readdir": "2.1.0", 
    "sass-loader": "^6.0.2", 
    "strip-ansi": "3.0.1", 
    "style-loader": "0.13.1", 
    "url-loader": "0.5.7", 
    "webpack": "1.14.0", 
    "webpack-dev-server": "1.16.2", 
    "webpack-manifest-plugin": "1.1.0", 
    "whatwg-fetch": "2.0.2" 
    }, 
    "dependencies": { 
    "file-loader": "^0.10.0", 
    "react": "^15.4.2", 
    "react-bootstrap": "^0.30.7", 
    "react-bootstrap-autosuggest": "^0.4.1", 
    "react-bootstrap-date-picker": "^4.0.0", 
    "react-datepicker": "^0.41.1", 
    "react-dom": "^15.4.2", 
    "react-fa": "^4.1.2", 
    "react-redux": "^5.0.2", 
    "react-redux-form": "^1.7.0", 
    "react-router": "^3.0.2", 
    "redux": "^3.6.0", 
    "redux-devtools-extension": "^2.13.0", 
    "redux-form": "^6.5.0", 
    "redux-thunk": "^2.2.0", 
    "superagent": "^3.4.4", 
    "url-loader": "^0.5.7" 
    }, 
    "scripts": { 
    "start": "node scripts/start.js", 
    "build": "node scripts/build.js", 
    "test": "node scripts/test.js --env=jsdom" 
    }, 
    "jest": { 
    "collectCoverageFrom": [ 
     "src/**/*.{js,jsx}" 
    ], 
    "setupFiles": [ 
     "<rootDir>/config/polyfills.js" 
    ], 
    "testPathIgnorePatterns": [ 
     "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]" 
    ], 
    "testEnvironment": "node", 
    "testURL": "http://localhost", 
    "transform": { 
     "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest", 
     "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", 
     "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" 
    }, 
    "transformIgnorePatterns": [ 
     "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$" 
    ], 
    "moduleNameMapper": { 
     "^react-native$": "react-native-web" 
    } 
    }, 
    "babel": { 
    "presets": [ 
     "react-app" 
    ] 
    }, 
    "eslintConfig": { 
    "extends": "react-app" 
    } 
} 

任意の助けいただければ幸いです。設定のWebPACKあなたにこれを追加すること

Answer 1

試してみてください。

new webpack.NormalModuleReplacementPlugin(
    /Autosuggest\.scss$/, 
    'react-bootstrap-autosuggest/src/Autosuggest.scss') 

出典：https://github.com/affinipay/react-bootstrap-autosuggest/issues/1