У меня проблема с моим конвейером запуска npm после установки https://github.com/markmur/react-slack-feedback
Если я запускаю конвейер, я всегда получаю ошибку
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(),
],
};