webpack Неизвестное слово> 1 | импортировать React из "react" - PullRequest
Новая
       2

webpack Неизвестное слово> 1 | импортировать React из "react"

0 голосов
/ 19 июня 2020

при запуске npm run dev (webpack --mode = development) я получил следующую ошибку. Я использую webpack с Reactjs.

ERROR в ./src/index.js (./node_modules/imports-loader/dist/cjs.js!./ node_modules / css -лоадер / dist / cjs. js ?? ref - 4-3! ./ node_modules / post css -loader / sr c! ./ src / index . js) Ошибка сборки модуля (из ./node_modules/postcss-loader/src/index.js): SyntaxError

(1: 1) Неизвестное слово

1 | импортировать React из React; | ^ 2 | импортировать ReactDOM из react-dom; 3 | import './index.css';

пакет. json

{
    "name": "uitest",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@babel/core": "^7.10.2",
        "@babel/plugin-proposal-class-properties": "^7.10.1",
        "@babel/preset-env": "^7.10.2",
        "babel-loader": "^8.1.0",
        "babel-preset-react": "6.24.1",
        "cra-template": "1.0.3",
        "html-webpack-plugin": "^4.3.0",
        "path": "^0.12.7",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-hot-loader": "^4.11.1",
        "react-scripts": "3.4.1",
        "webpack-cli": "^3.3.12",
        "yarn": "^1.22.4",
        "webpack": "4.43.0",
        "webpack-dev-server": "3.11.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "webpackdevserver": "webpack-dev-server",
        "dev": "webpack-dev-server --mode=development",
        "prod": "webpack --mode=production",
        "build": "webpack --config prod.config.js",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "css-loader": "^3.6.0",
        "imports-loader": "^1.0.0",
        "node-sass": "^4.14.1"
    }
}

webpack.config. js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: {
        historyApiFallback: true,
    },
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "main.js"
    },
    module: {
        rules: [{
            test: /\.m?js$|jsx|css/,
            exclude: /node_modules/,
            use: [
                "babel-loader",
                'style-loader',
                'imports-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        // 0 => no loaders (default);
                        // 1 => postcss-loader;
                        // 2 => postcss-loader, sass-loader
                    },
                },
                'postcss-loader',
            ]
        }, ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
            filename: 'index.html'
        })
    ],

};

индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render( 
    <App/> ,
    document.getElementById('root')
);
serviceWorker.unregister();
...