【问题标题】:Webpack JSX error: You may need an appropriate loader to handle this file typeWebpack JSX 错误:您可能需要适当的加载器来处理此文件类型
【发布时间】:2016-06-02 18:16:13
【问题描述】:

我正在尝试使用 webpack 构建项目,但出现错误。我能够用 gulp 更早地构建这个项目,所以所有的路径和一切都应该没问题。我从该文档https://github.com/babel/babel-loader 安装了所有 babel 加载器,并从示例中复制了代码。

ERROR in ./src/app.jsx
Module parse failed: ..path../src/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import ReactDom from 'react-dom';
 @ multi main

我的 webpack.config 文件:

var webpack = require("webpack");
var path = require("path");

module.exports = {
    devtools: 'inline-source-map',
    entry: [
        './src/app.jsx'
    ],
    output: {
        path: '../app/www/js/',
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: [path.join(__dirname, 'node_modules')],
        extensions: ['', '.js', '.jsx', '.scss']
    },
    modules: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

【问题讨论】:

    标签: javascript webpack babeljs jsx


    【解决方案1】:

    应该是loader: 'babel',而不是loader: 'babel-loader'

    编辑:显然它们是等价的。问题出在 Webpack 配置文件中,它是 module,而不是 modules

    【讨论】:

    • 最初是 babel。当我在寻找解决方案时,我将其更改为“babel-loader”,看看这是否可行。我现在把它改回“babel”,我仍然得到同样的错误
    • "devDependencies": { "babel-polyfill": "^6.3.14", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babelify": "^7.2.0", "browserify": "^13.0.0", "gulp": "^3.9.0", "vinyl-source-stream": "^1.1.0" }, "dependencies": {}
    • ...我还不习惯stackoverflow的控制。我不小心按了“输入”并发布了消息。我并没有真正在意 package.json 文件,因为我没有在任何地方发布这个项目。所以我做的所有模块安装都没有--save-dev。所以 package.json 文件的其余部分只是你在 npm 安装后得到的标准。这就是为什么我只发布了 devDependencies
    • 您似乎没有安装babel-loader。尝试完全按照您链接的 github 页面中指定的方式执行 npm install。此外,使用package.json 不仅适用于您想在某处发布项目,如果您想将其移动到另一台机器上或只是将其推送到某个私人仓库也无需推送node_modules
    • imgur.com/VCGxwOh 这些都是我安装的模块。我有 babel-loader
    猜你喜欢
    • 1970-01-01
    • 2019-07-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-08
    • 1970-01-01
    相关资源
    最近更新 更多