Webpack fehlender Modulfehler: Modul "." Kann nicht gefunden werden.

Question

Ich löschte vor kurzem mein node_modules Ordner aus meiner reagieren App und lief npm mit folgendem package.json installieren:

{ 
    "name": "test-react-app", 
    "version": "1.0.0", 
    "private": true, 
    "description": "test", 
    "main": "src/index.js", 
    "dependencies": { 
    "body-parser": "^1.18.2", 
    "express": "^4.16.2", 
    "material-ui": "^0.19.4", 
    "node-sass-chokidar": "0.0.3", 
    "npm-run-all": "^4.1.1", 
    "react": "^15.6.2", 
    "react-dom": "^15.6.2", 
    "react-router": "^4.2.0", 
    "react-router-dom": "^4.2.2", 
    "react-scripts": "^1.0.10" 
    }, 
    "scripts": { 
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", 
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive", 
    "start-js": "react-scripts start", 
    "start": "npm-run-all -p watch-css start-js", 
    "build": "npm run build-css && react-scripts build webpack -p", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    }, 
    "devDependencies": { 
    "node-sass": "^4.5.3", 
    "sass-loader": "^6.0.6", 
    "babel-core": "6.17.0", 
    "babel-loader": "6.2.5", 
    "babel-preset-es2015": "6.16.0", 
    "css-loader": "0.25.0", 
    "file-loader": "0.9.0", 
    "html-loader": "0.4.4", 
    "html-webpack-plugin": "2.24.0", 
    "material-ui": "^0.19.4", 
    "open-browser-webpack-plugin": "0.0.2", 
    "rimraf": "2.5.4", 
    "style-loader": "0.13.1", 
    "webpack": "^3.7.1", 
    "webpack-dashboard": "0.2.0", 
    "webpack-dev-server": "1.16.2" 
    } 
} 

Nach tun, habe ich jetzt in die folgende Konsole Fehler nachlaufen npm Start ausgeführt wird:

Uncaught Error: Cannot find module "." 
    at webpackMissingModule (source-map-generator.js:8) 
    at Object.<anonymous> (source-map-generator.js:8) 
    at Object../node_modules/source-map/lib/source-map/source-map-generator.js (source-map-generator.js:399) 
    at __webpack_require__ (bootstrap bf59d56b93d65ff61848:669) 
    at fn (bootstrap bf59d56b93d65ff61848:87) 
    at Object../node_modules/source-map/lib/source-map.js (source-map.js:6) 
    at __webpack_require__ (bootstrap bf59d56b93d65ff61848:669) 
    at fn (bootstrap bf59d56b93d65ff61848:87) 
    at Object../node_modules/react-error-overlay/lib/utils/getSourceMap.js (getSourceMap.js:1) 
    at __webpack_require__ (bootstrap bf59d56b93d65ff61848:669) 

Hier ist meine App.js:

import React, { Component } from 'react'; 
import { Switch, Route } from 'react-router'; 
import { PrivateRoute } from './utilities/PrivateRoute'; 
import Home from './components/screens/Home/Home'; 
import Dashboard from './components/containers/Dashboard/Dashboard'; 
import Menu from './components/containers/Menu/Menu'; 
import Login from './components/screens/Login/Login'; 
import Registration from './components/screens/Registration/Registration'; 
import NoMatch from './components/screens/NoMatch/NoMatch'; 
import './styles/main.css'; 
import logo from './assets/img/logo/logo.svg'; 

class App extends Component { 
    render() { 
    return (
     <div className="app"> 
     <div className="flex-container"> 
      <img src={logo} alt="logo"/> 
     </div> 
     <Switch> 
      <Route exact path="/" component={Login} /> 
      <Route path="/login" component={Login} /> 
      <Route path="/registration" component={Registration}/> 
      <PrivateRoute path="/home" component={Home}/> 
      <PrivateRoute path="/dashboard" component={Dashboard}/> 
      <PrivateRoute path="/menu" component={Menu}/> 
      <Route component={NoMatch}/> 
     </Switch> 
     </div> 
    ); 
    } 
} 

export default App; 

Hier mein webpack.config.js ist:

const path    = require('path'); 
const webpack   = require('webpack'); 
const htmlPlugin  = require('html-webpack-plugin'); 
const openBrowserPlugin = require('open-browser-webpack-plugin'); 
const dashboardPlugin = require('webpack-dashboard/plugin'); 
const autoprefixer  = require('autoprefixer'); 

const PATHS = { 
    app: path.join(__dirname, 'src'), 
    images:path.join(__dirname,'src/assets/'), 
    build: path.join(__dirname, 'dist') 
}; 

const options = { 
    host:'localhost', 
    port:'1234' 
}; 

module.exports = { 
    entry: { 
    app: path.join(PATHS.app,'index.js') 
    }, 
    output: { 
    path: PATHS.build, 
    filename: 'bundle.[hash].js' 
    }, 
    devServer: { 
     historyApiFallback: true, 
     hot: true, 
     inline: true, 
     stats: 'errors-only', 
     host: options.host, 
     port: options.port 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      cacheDirectory: true, 
      presets: ['es2015'] 
     } 
     }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { 
     test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,   
     loader: 'file', 
     query: { 
      name: '[path][name].[ext]' 
     } 
     },  
    ] 
    }, 
    plugins:[ 
    new dashboardPlugin(), 
    new webpack.HotModuleReplacementPlugin({ 
     multiStep: true 
    }), 
    new htmlPlugin({ 
     template:path.join(PATHS.app,'index.html'), 
     inject:'body' 
    }), 
    new openBrowserPlugin({ 
     url: `http://${options.host}:${options.port}` 
    }) 
    ] 
}; 

Hier sind meine aktuellen Umgebungseinstellungen:

• npm Version 5.5.1
• Knoten Version 7.3.0
• Windows-10

Hat jemand irgendeine Art von Idee Was könnte das Problem sein? Wenn man sich umschaut, scheint es, dass die neueste Version von reaction-scripts (1.0.14) einen Fix hat, aber ich mache das nach npm install.

Answer 1

Ich weiß es nicht, aber es sieht so aus, als ob Sie Fehler in Ihrem Code haben, versuchen Sie, Schalter und Route von falschem Paket zu importieren. React-Router - 3-Version und react-router-dom - 4 Version, so sollte der Code wie folgt aussehen;

import { Switch, Route } from 'react-router-dom';