“npm run build”模块解析错误“您可能需要适当的加载程序来处理此文件类型。”答案

【问题标题】："npm run build" module parse error "You may need an appropriate loader to handle this file type."“npm run build”模块解析错误“您可能需要适当的加载程序来处理此文件类型。”
【发布时间】：2016-07-26 00:15:08
【问题描述】：

当我运行“npm run build”时，代码块底部出现错误

我关注了this tutorial

# l
total 36K
drwxrwxr-x  5 dan dan 4.0K Apr  5 09:35 .
drwxrwxr-x 10 dan dan 4.0K Apr  1 21:46 ..
-rw-rw-r--  1 dan dan 3.1K Apr  5 09:22 backup.js
drwxrwxr-x  2 dan dan 4.0K Apr  5 09:17 css
-rw-rw-r--  1 dan dan  218 Apr  5 09:20 index.html
drwxrwxr-x  3 dan dan 4.0K Apr  5 16:09 js
drwxrwxr-x 10 dan dan 4.0K Apr  5 09:16 node_modules
-rw-rw-r--  1 dan dan  462 Apr  5 09:18 package.json
-rw-rw-r--  1 dan dan  552 Apr  5 09:18 webpack.config.js
# tree js
js
├── app.js
└── components
    └── Login.js

1 directory, 2 files
# more package.json
{
  "name": "lnkchk",
  "version": "0.0.0",
  "description": "lnchk",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "react": "^0.14.8",
    "react-hot-loader": "^1.3.0",
    "react-router": "^2.0.1",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}
# more webpack.config.js
var webpack = require('webpack');  
module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]

};
# more js/app.js 
import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

/*
let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

*/
# more js/components/Login.js 
import React from 'react';

let Login = React.createClass({ 

  render() {
    return(<div>Welcome to login</div>);
  }
});

export default Login; 
# npm run build

> lnkchk@0.0.0 build /home/dan/dev/isvalidurl/ui
> webpack --progress --colors

Hash: d175b2c5e573c3d92579  
Version: webpack 1.12.14
Time: 634ms
   [0] multi main 40 bytes {0} [built] [1 error]
    + 2 hidden modules

ERROR in ./js/app.js
Module parse failed: /home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/js/app.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| /* REACT HOT LOADER */ if (module.hot) { (function () { var ReactHotAPI = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/node_modules/react-hot-api/modules/index.js"), RootInstanceProvider = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/RootInstanceProvider.js"), ReactMount = require("react/lib/ReactMount"), React = require("react"); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function () {
| 
| import React from 'react';
| import Router from 'react-router';
| import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
 @ multi main

【问题讨论】：

Babel 似乎无法正常工作，所以 Webpack 偶然发现了 import。你是否正确安装了 Babel？试试npm i -D babel-core。

标签： javascript reactjs npm webpack babeljs

【解决方案1】：

您在 webpack 配置中为 .js 文件定义了两次加载器。

试试

module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]

};

相反。根据您使用的 babel 等版本，您可能还需要查看presets。如果这不起作用，或者您不想花时间设置 webpack 并快速获得运行的 react 环境，我建议使用 http://www.overreact.io/ 设置基本的 react / webpack 环境并从那里开始。

【讨论】：