Question

安装https://github.com/markmur/react-slack-feedback

后，我的npm启动管道出现问题

如果我运行管道，我总是会收到错误消息 ERROR in ./~/react-slack-feedback/dist/index.esm.js Module parse failed: /mnt/c/Work/........../app/node_modules/react-slack-feedback/dist/index.esm.js Unexpected token (1:16525) You may need an appropriate loader to handle this file type. | import e from"react";import t,{css as o,keyframes as r,ThemeProvider as a}from"styled-components";function........

由于已经安装了许多个月并且安装了各种不同的软件包，所以管道本身一直没有问题，但是失败表明我的webpack.dev.config.js中的某些文件格式错误，但是我不确定如何更改这是正确的。尝试过

            {
                test: /sw\.esm.js$/,
                use: [{ loader: 'file-loader' }],
            },

但没有影响该错误。

我的webpack.dev.config.js：

const path = require('path');
// ESLint: you will get an error here because of webpack being in
// devDependencies. However, the webpack README states it should be in dev.
const webpack = require('webpack');

module.exports = {
    context: path.join(__dirname, 'src'),
    entry: {
        app: [
            // activate HMR for React
            'react-hot-loader/patch',
            // bundle the client for webpack-dev-server
            // and connect to the provided endpoint
            'webpack-dev-server/client?http://localhost:3000',
            // bundle the client for hot reloading
            // only- means to only hot reload for successful updates
            'webpack/hot/only-dev-server',
            // the entry point of our app
            './app/index.jsx',
        ],
        main: './main/index.js',
    },
    output: {
        // the output bundle
        filename: '[name].js',
        // in contrast to the production config, we output into js/ directly.
        path: path.join(__dirname, '..', 'assets', 'js'),
        // necessary for HMR to know where to load the hot update chunks
        publicPath: '/static/js/',
    },
    // Integrate quickly build source maps into the resulting js file.
    devtool: 'cheap-module-eval-source-map',
    // webpack dev server config (for live and hot reloading)
    devServer: {
        // enable HMR on the server
        hot: true,
        // make it accessible from everywhere. nice for mobile testing.
        host: '0.0.0.0',
        allowedHosts: ['*'],
        disableHostCheck: true,
        // Django is running on port 8000, so when using the devServer default
        // (8080) it's easy to miss that you are on the wrong server in the
        // browser's URL bar, because they look very similar. Moving this to
        // 3000 because of that.
        port: 3000,
        // match the output path
        contentBase: path.join(__dirname, '..', 'assets', 'js'),
        // match the output `publicPath`
        publicPath: '/static/js/',
        // Open up a proxy to the django runserver. API requests etc. need to
        // go through to the backend ;-)
        proxy: {
            '/': {
                target: 'http://localhost:8000',
                secure: false,
            },
        },
    },
    // What to do with each file type (js, jsx, sass, css,...)
    module: {
        rules: [
            // Used to reference the service worker for registering it. The
            // service worker is used to listen to push notifications.
            {
                test: /sw\.js$/,
                use: [{ loader: 'file-loader' }],
            },
            {
                test: /\.jsx?$/,
                // Configured in .babelrc
                use: [{ loader: 'babel-loader' }],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            path: 'static/sass/postcss.config.js',
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            // SASS compiler config
                            outputStyle: 'expanded',
                            sourceComments: true,
                            sourceMapEmbed: true,
                            sourceMapContents: true,
                            includePaths: [
                                path.join(__dirname, 'static', 'sass'),
                            ],
                        },
                    },
                ],
            },
        ],
    },
    // ES6: when doing `import "foobar"`, webpack will look for "foobar.js"
    // file and, if not found, a "foobar.jsx" file. Hence, you don't have to
    // append the .js(x) file ending in the import statement.
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        // enable HMR globally
        new webpack.HotModuleReplacementPlugin(),
        // prints more readable module names in the browser console on HMR updates
        new webpack.NamedModulesPlugin(),
    ],
};

Answer 1

问题已解决，方法是将webpack-dev-server和webpack-cli更新到最新版本。在我的情况下，这是webpack-dev-server：3.3.1和webpack-cli：3.3.2

适当的加载器可以处理此文件类型。 /index.esm.js

1 个答案: