SyntaxError: Неожиданный токен ... (веб-пакет, реагирует) - PullRequest
0 голосов
/ 23 марта 2020

Я пытаюсь реализовать пакет https://video-react.js.org/ в моем проекте.

Инструкции по установке не очень исчерпывающие, поэтому я попробовал что-то подобное с моим входным файлом

'use strict';

import React from 'react';
import ReactDom from 'react-dom';

import { Player, BigPlayButton } from '../vendor/src/video-react';

class PlayerHTML5 extends React.Component {
  state = {
    poster : this.props.poster,
    src : this.props.src
  };

  render() {
    return (
      <Player poster={this.state.poster} src={this.state.src}>
        <BigPlayButton position="center" />
      </Player>
    );
  }
}

const domContainer = document.querySelector('#preview_video');
const src = domContainer.dataset.src;
const poster = domContainer.dataset.poster;
ReactDom.render(<PlayerHTML5 poster={poster} src={src} />, domContainer);

Я знаю, что код работает, потому что я видел, как он работает.

Перед использованием веб-пакета я использовал symfony Encore, но для моего знания хочу изучить веб-пакет.

Вот мой пакет . json

{
  "name": "react-player",
  "version": "1.0.0",
  "description": "",
  "main": ".prettierrc.js",
  "scripts": {
    "buildPlayer": "./node_modules/.bin/webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
    "@babel/plugin-transform-react-jsx": "^7.9.1",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.1",
    "babel-loader": "^8.1.0",
    "classnames": "^2.2.6",
    "css-loader": "^3.4.2",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "redux": "^4.0.5"
  }
}

А вот мой webpack.config. js

const path = require('path');

module.exports = {
    mode: "development",
    entry: './build/playerHTML5.js',
    watch: false,
    output : {
        path : path.resolve('./src'),
        filename : 'playerHTML5.js'
    },
    module : {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env','@babel/preset-react'],
                      plugins: [
                          '@babel/plugin-proposal-class-properties',
                          '@babel/plugin-transform-runtime',
                          '@babel/plugin-transform-react-jsx',
                          '@babel/plugin-syntax-object-rest-spread'
                        ]
                    } 
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader'
                ]
            }
        ]
    }
}
ERROR in ./vendor/styles/scss/video-react.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./vendor/styles/scss/video-react.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
/var/apache/www/celian_web/02_scripts/02_javascript/react-player/node_modules/css-loader/dist/plugins/postcss-icss-parser.js:34
      accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],
                                     ^^^
SyntaxError: Unexpected token ...

Вот видео-реакции.s css file

https://github.com/video-react/video-react/blob/master/styles/scss/video-react.scss

По некоторым причинам я не могу понять, у меня есть эта ошибка выше. Я думал, что это javascript оператор распространения, поэтому я добавил @babel/plugin-syntax-object-rest-spread, чтобы решить проблему, но он также не работал.

Что не так с моей конфигурацией webpack?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...