logo标签列表

使用Webpack和Babel时，您可能需要一个适当的加载器来处理此文件类型。

javascriptwebpackbabeljses6-module-loader
201

我正在尝试使用Webpack和Babel编译ES6资产，但是我遇到了以下错误信息：

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

这是我的Webpack配置:

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

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

这里是使用 Webpack 的中间件步骤：

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

我所有的index.js文件只是导入了React，但似乎'babel-loader'没有起作用。

我正在使用'babel-loader' 6.0.0版本。

1
我遇到了同样的问题。babel-preset-es2015已经安装，但在ReactDOM.render()调用中使用JSX仍然存在问题:s - SomethingOn
你的文件扩展名是什么？它们是js文件还是jsx文件？你的加载器只考虑具有jsx扩展名的文件，这可能是问题所在。 - cubbuk
在这个链接里，你的问题将会被100%解决：[https://dev59.com/4VUL5IYBdhLWcg3wk4vK#57543284][1] - Mehrdad Masoumi
在这个链接中，您的问题将会被100%解决 css import to next.js。 - Mehrdad Masoumi
14个回答
1

由于问题没有明确指定是针对angular、react还是react-native的，所以我将其发布为react-native，但其他情况下也适用。原因是它无法理解加载器指定的语法，例如tsx、jsx。在经过大量探索后，我在这篇文章中找到了一个解决方案。当我们使用外部库时，该库使用jsx，而您的项目配置为tsx，它将无法理解jsx并提示您添加适当的加载器。因此，您可以通过以下代码在app.json文件中解决这个问题。

"web": {
  "build": {
    "babel": {
      "include": [
        "name-of-my-shared-package-here"
      ]
    }
  }
}

通过将name-of-my-shared-package-here替换为您的软件包名称，可以解决此问题。您可以检查导致此问题的错误软件包名称。
0

使用Typescript时：

在我的情况下，我使用了webpack v3.11的新语法，从他们的文档页面中复制了css和style加载器的配置。 注释掉的代码（新API）会导致以下错误。

  module: {
        loaders: [{
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
        // ,
        // rules: [{
        //     test: /\.css$/,
        //     use: [
        //         'style-loader',
        //         'css-loader'
        //     ]
        // }]
    }

正确的方式是将其放在这里：

    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader'
        ]
    }

在加载器属性的数组中。

0

只需将此代码添加到webpackmix.js文件中

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css',  [
        require('tailwindcss'),
    ]).vue();
0

这个问题让我有些困惑。 Angular 7，Webpack 我发现了这篇文章，所以我想要给予文章以荣誉 https://www.edc4it.com/blog/web/helloworld-angular2.html

解决方案是： //在你的组件文件中。使用模板，因为webpack会将其视为文本 template: require('./process.component.html')

为了让karma能够解释它 npm install add html-loader --save-dev { test: /.html$/, use: "html-loader" },

希望这能帮助到某些人

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接