2017-10-11 6 views
2

저는 Reactjs를 처음 사용하고 있으며 배우기 시작했습니다. 나는 기본적인 hello world 프로그램을 시작하려고 노력했지만 컴파일 수준에서는 실패했다. create-react-app hello-world를 사용하여 시작 hello-word 프로그램을 만들었습니다.이 폴더는 파일 묶음과 함께 멋진 폴더 구조를 제공합니다. 그리고 여기에서 컴파일 오류가 여기에Reactjs 모듈 빌드 오류

Failed to compile 
./src/index.js 
Module build failed: Error: Failed to load plugin import: Cannot find module 
'eslint-plugin-import' 
Referenced from: 
at Array.forEach (native) 
at Array.reduceRight (native) 
This error occurred during the build time and cannot be dismissed. 

내가 eslint 플러그인 가져 오기, 표준 .. 등을 설치하려고하지만 여전히 그 일을하지 않도록 오류 상태가 모듈을 찾을 수 없습니다를 볼 수 있습니다. 다음은 어느 하나의 방법이 빌드 오류가 나올 나를 인도 할 수 있습니까 webpack.config.dev.js

// @remove-on-eject-begin 
/** 
* Copyright (c) 2015-present, Facebook, Inc. 
* 
* This source code is licensed under the MIT license found in the 
* LICENSE file in the root directory of this source tree. 
*/ 
// @remove-on-eject-end 
'use strict'; 

const autoprefixer = require('autoprefixer'); 
    const path = require('path'); 
    const webpack = require('webpack'); 
    const HtmlWebpackPlugin = require('html-webpack-plugin'); 
    const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack- 
    plugin'); 
    const InterpolateHtmlPlugin = require('react-dev- 
    utils/InterpolateHtmlPlugin'); 
    const WatchMissingNodeModulesPlugin = require('react-dev- 
    utils/WatchMissingNodeModulesPlugin'); 
    const eslintFormatter = require('react-dev-utils/eslintFormatter'); 
    const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); 
    const getClientEnvironment = require('./env'); 
    const paths = require('./paths'); 


const env = getClientEnvironment(publicUrl); 

    module.exports = { 
    // You may want 'eval' instead if you prefer to see the compiled output in 
DevTools. 
    // See the discussion in https://github.com/facebookincubator/create- 
    react-app/issues/343. 
    devtool: 'cheap-module-source-map', 

entry: [ 
// We ship a few polyfills by default: 
require.resolve('./polyfills'), 
// Include an alternative client for WebpackDevServer. A client's job is to 
// connect to WebpackDevServer by a socket and get notified about changes. 
// When you save a file, the client will either apply hot updates (in case 
// of CSS changes), or refresh the page (in case of JS changes). When you 
// make a syntax error, this client will display a syntax error overlay. 
// Note: instead of the default WebpackDevServer client, we use a custom one 
// to bring better experience for Create React App users. You can replace 
// the line below with these two lines if you prefer the stock client: 
// require.resolve('webpack-dev-server/client') + '?/', 
// require.resolve('webpack/hot/dev-server'), 
require.resolve('react-dev-utils/webpackHotDevClient'), 
// Finally, this is your app's code: 
paths.appIndexJs, 
// We include the app code last so that if there is a runtime error during 
// initialization, it doesn't blow up the WebpackDevServer client, and 
// changing JS code would still trigger a refresh. 
], 
output: { 
// Next line is not used in dev but WebpackDevServer crashes without it: 
path: paths.appBuild, 
// Add /* filename */ comments to generated require()s in the output. 
pathinfo: true, 
// This does not produce a real file. It's just the virtual path that is 
// served by WebpackDevServer in development. This is the JS bundle 
// containing code from all our entry points, and the Webpack runtime. 
filename: 'static/js/bundle.js', 
// There are also additional JS chunk files if you use code splitting. 
chunkFilename: 'static/js/[name].chunk.js', 
// This is the URL that app is served from. We use "/" in development. 
publicPath: publicPath, 
// Point sourcemap entries to original disk location (format as URL on 
Windows) 
devtoolModuleFilenameTemplate: info => 
    path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), 
}, 
resolve: { 

modules: ['node_modules', paths.appNodeModules].concat(
    // It is guaranteed to exist because we tweak it in `env.js` 
    process.env.NODE_PATH.split(path.delimiter).filter(Boolean) 
), 

    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], 
    alias: { 
    // @remove-on-eject-begin 
    // Resolve Babel runtime relative to react-scripts. 
    // It usually still works on npm 3 without this but it would be 
    // unfortunate to rely on, as react-scripts could be symlinked, 
    // and thus babel-runtime might not be resolvable from the source. 
    'babel-runtime': path.dirname(
    require.resolve('babel-runtime/package.json') 
), 
    // @remove-on-eject-end 
    // Support React Native Web 
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future- 
    with-react-native-for-web/ 
    'react-native': 'react-native-web', 
    }, 
    plugins: [ 
    // Prevents users from importing files from outside of src/ (or 
    node_modules/). 

    new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), 
    ], 
    }, 
    module: { 
    strictExportPresence: true, 
    rules: [ 
    // TODO: Disable require.ensure as it's not a standard language feature. 
    // We are waiting for https://github.com/facebookincubator/create-react- 
    app/issues/2176. 
    // { parser: { requireEnsure: false } }, 

    // First, run the linter. 
    // It's important to do this before Babel processes the JS. 
    { 
    test: /\.(js|jsx)$/, 
    enforce: 'pre', 
    use: [ 
     { 
     options: { 
      formatter: eslintFormatter, 
      eslintPath: require.resolve('eslint'), 
      // @remove-on-eject-begin 
      baseConfig: { 
      extends: [require.resolve('eslint-config-react-app')], 
      }, 
      ignore: false, 
      useEslintrc: false, 
      // @remove-on-eject-end 
     }, 
     loader: require.resolve('eslint-loader'), 
     }, 
     ], 
    include: paths.appSrc, 
    }, 
    { 
    // "oneOf" will traverse all following loaders until one will 
    // match the requirements. When no loader matches it will fall 
    // back to the "file" loader at the end of the loader list. 
    oneOf: [ 


     { 
     test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 
     loader: require.resolve('url-loader'), 
     options: { 
      limit: 10000, 
      name: 'static/media/[name].[hash:8].[ext]', 
     }, 
     }, 
     // Process JS with Babel. 
     { 
     test: /\.(js|jsx)$/, 
     include: paths.appSrc, 
     loader: require.resolve('babel-loader'), 
     options: { 
      // @remove-on-eject-begin 
      babelrc: false, 
      presets: [require.resolve('babel-preset-react-app')], 

      cacheDirectory: true, 
     }, 
     }, 
     // "postcss" loader applies autoprefixer to our CSS. 
     // "css" loader resolves paths in CSS and adds assets as dependencies. 
     // "style" loader turns CSS into JS modules that inject <style> tags. 
     // In production, we use a plugin to extract that CSS to a file, but 
     // in development "style" loader enables hot editing of CSS. 
     { 
     test: /\.css$/, 
     use: [ 
      require.resolve('style-loader'), 
      { 
      loader: require.resolve('css-loader'), 
      options: { 
       importLoaders: 1, 
      }, 
      }, 
      { 
      loader: require.resolve('postcss-loader'), 
      options: { 
       // Necessary for external CSS imports to work 

       ident: 'postcss', 
       plugins:() => [ 
       require('postcss-flexbugs-fixes'), 
       autoprefixer({ 
        browsers: [ 
        '>1%', 
        'last 4 versions', 
        'Firefox ESR', 
        'not ie < 9', // React doesn't support IE8 anyway 
        ], 
        flexbox: 'no-2009', 
       }), 
       ], 
      }, 
      }, 
     ], 
     }, 

     { 
     // Exclude `js` files to keep "css" loader working as it injects 
     // it's runtime that would otherwise processed through "file" 
     loader. 
     // Also exclude `html` and `json` extensions so they get processed 
     // by webpacks internal loaders. 
     exclude: [/\.js$/, /\.html$/, /\.json$/], 
     loader: require.resolve('file-loader'), 
     options: { 
      name: 'static/media/[name].[hash:8].[ext]', 
     }, 
     }, 
     ], 
    }, 

    ], 
    }, 
    plugins: [ 

    new InterpolateHtmlPlugin(env.raw), 
    // Generates an `index.html` file with the <script> injected. 
    new HtmlWebpackPlugin({ 
    inject: true, 
    template: paths.appHtml, 
     }), 

    new webpack.NamedModulesPlugin(), 

    new webpack.DefinePlugin(env.stringified), 

    new webpack.HotModuleReplacementPlugin(), 

    new CaseSensitivePathsPlugin(), 

    new WatchMissingNodeModulesPlugin(paths.appNodeModules), 

    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
    ], 

    node: { 
dgram: 'empty', 
fs: 'empty', 
net: 'empty', 
tls: 'empty', 
child_process: 'empty', 
}, 

    performance: { 
    hints: false, 
}, 
}; 

입니다.

+0

create-react-app를 수행 한 후 npm 설치 (또는 원사를 사용하는 경우 원사 설치)를 수행 했습니까? – Sri

+0

예, 설치 했음 –

+0

이 github 문제는 사용자의 문제와 관련이 있습니다. 실로 전환하면 문제가 해결되는 것 같습니다. https://github.com/facebookincubator/create-react-app/issues/2779 – Sri

답변

0

신선한 npm install eslint-plugin-import 및 응용 프로그램을 다시 시작하면이 문제가 해결됩니다.

그 해결되지 않으면, 당신의 npm 버전으로 업그레이드하려고 : 전 세계적으로 패키지 아래에 몇 가지 설치 한 후 마지막으로 문제가 해결되었다

npm install -g [email protected] 
+0

답장을 보내 주셔서 감사합니다. 시도했지만 작동하지 않았습니다. –

+0

노드 및 npm 버전의 의견을 말씀해 주시겠습니까? 'node -v'와'npm -v' – Abhijith

+0

npm 버전 : 5.4.2 노드 버전 : 6.11.1 –

0

을 :

eslint-config-react-app 
eslint 
babel-eslint 
eslint-plugin-react 
eslint-plugin-import 
eslint-plugin-jsx-a11y 
eslint-plugin-flowtype 

을 그리고 package.lock.json 파일을 삭제 npm 설치를 실행합니다. 마지막으로 npm을 시작합니다. 고맙습니다.