Ошибки Babel и Webpack es6, пробовали многочисленные исправления, найденные здесь, но не могу заставить их работать - PullRequest
Новая
       24

Ошибки Babel и Webpack es6, пробовали многочисленные исправления, найденные здесь, но не могу заставить их работать

0 голосов
/ 31 декабря 2018

Я постоянно получаю сообщения об ошибках, когда пытаюсь использовать реакцию с моим сайтом на фляге.Я попробовал массу исправлений, которые нашел здесь, но всякий раз, когда я перехожу мимо одного, появляется другое.

Самая последняя ошибка: 

Module parse failed: Unexpected Token (3:0)
You may need an appropriate loader to handle this file type.
| /* DayPicker styles */
| 
> .DayPicker {
|   display: inline-block;
|   font-size: 1rem;
 @ ./js/daypicker.js 17:0-41
 @ ./js/index.js

Я пытался добавить в CSS иЗагрузчики стилей, как можно увидеть ниже, но я не могу заставить его работать.Мой код может быть грязным, но это потому, что я пробовал кучу разных исправлений, и некоторые из них были перекрыты другими.

Вот мой файл webpack.config.js 

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

module.exports = {
  mode: 'development',

  entry: {
    index: './js/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'static/lib'),
    filename: '[name].js',
    publicPath: '/static/lib'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'style-loader',
          loader: 'css-loader',
          loader: 'babel-loader',
          query: {
            cacheDirectory: true,
            presets: ['es2015', 'react', 'stage-0', 'env'],
          }
        }
      },

    ]
  }
};

Я даже пытался добавить файл babel.rc (как предложено в некоторых найденных здесь исправлениях): 

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader?cacheDirectory=true'
}

Но, похоже, ничего не работает

Не уверен, что это актуально,но вот мой файл package.json: 

{
  "name": "shopping-cart",
  "version": "1.0.0",
  "description": "run `npm install`. and then `npx webpack`",
  "scripts": {
    "build": "webpack -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pambalos/shopping-cart.git"
  },
  "author": "Bradley J <bradleyjusticeca@gmail.com>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/pambalos/shopping-cart/issues"
  },
  "homepage": "https://github.com/pambalos/shopping-cart#readme",
  "main": "index.js",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "date-fns": "next",
    "moment": "latest",
    "react": "latest",
    "react-day-picker": "^7.2.4",
    "react-dom": "latest",
    "react-helmet": "latest",
    "webpack": "^4.28.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "styled-components": "^3.4.6",
    "webpack-cli": "^3.1.2"
  }
}

1 Ответ

0 голосов
/ 31 декабря 2018

Чтобы решить эту проблему, мы можем использовать style-loader and css-loader в webpack.config.js, как показано ниже: 

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

css-loader считывает файл CSS в виде строки.Поскольку он просто читает содержимое файла и ничего больше, он в основном бесполезен, если вы не связываете его с другим загрузчиком.

style-loader берет эти стили и создает тег в элементе страницы, содержащем эти стили.

Надеюсь, это поможет:)

...