Где найти актуальный package.json и package-lock.json для сборки react + webpack?

Question

[anriko]

пробую так ничего не запускается

ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 403:6-26
Module not found: Error: Can't resolve 'uglify-js' in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\terser-webpack-plugin\dist

ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 481:14-34
Module not found: Error: Can't resolve '@swc/core' in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\terser-webpack-plugin\dist'

ERROR in ./node_modules/terser/node_modules/source-map/lib/read-wasm.js 20:13-26
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\terser\node_modules\source-map\lib'

ERROR in ./node_modules/watchpack/lib/DirectoryWatcher.js 9:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\watchpack\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

{
  "name": "ishop3",
  "version": "1.0.0",
  "description": "",
  "main": "product.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development webpack-dev-server",
    "build": "webpack --mode prodaction "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-upgrade": "^1.0.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-stage-0": "^7.8.3",
    "babel-loader": "^8.1.0",
    "css-loader": "^6.2.0",
    "lite-server": "^2.6.1",
    "mini-css-extract-plugin": "^2.2.2",
    "style-loader": "^3.2.1",
    "util": "^0.12.4",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.1.1"
  }
}

Answer 1

[antares4045]

Технически, настоятельно советую не страдать фигнёй, и использовать react-scripts (ну и react-scripts eject если ооочень нужно ручки под капот запустить), но пару месяцев назад в образовательных целях делал себе такую сборку:

{
  "name": "react-empty-template",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack serve --mode=development --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production",
    "build:watch": "cross-env NODE_ENV=development webpack --mode=development --watch",
    "build:dev": "cross-env NODE_ENV=development webpack --mode=development"
  },
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^8.1.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Comments

[anriko]

antares4045,а нужен ли .babelrc ?
и можно тогда сам webpack.config.js ?

[antares4045]

anriko, https://github.com/antares4045/emp

только что проверил: дев есть, билд собирается
(по чесноку не проект, а сплошной говнокод, но там даже заготовка под кутывание в докер-контейнер ))

[anriko]

antares4045,подскажи еще что это такое

const isDev = process.env.NODE_ENV === "development";

и тут

"scripts": {
    "start": "cross-env NODE_ENV=development webpack serve --mode=development --hot",

[antares4045]

anriko,
основная идея в том, что есть два альтернативных режима сборки: один разработческий: в нём должен даже в промежуточных версиях должен быть:
1) читаемый код
2) составлены карты: из какого места в моём коде появился вот этот стиль на сайте?
3) поддерживаться hot-replacment: ты поправил одну буковку на одной странице и тебе не нужно грохать сервак -- изенения уже накатились и даже браузер сам обновился
а в продакшн версии
1) код должен быть минифицирван (при этом он получается нечитаемым (что для многих даже плюс))
2) все лишние приколюхи (вроде хот реплейсмента) должны быть выкинуты: мы максимизируем производительность

для этого мы через переменные окружения устанавливаем NODE_ENV в соответствующее значение
а потом в js её читаем

[anriko]

antares4045 , но раньше обходились без них, почему стали их применять?
"scripts": {
"dev": " и сюда писали разные команды для разработки
"build": а сюда писали разные команды для продакшена

и какую команду надо запускать для разработки в вашей сборке?

[anriko]

и чего -то вот эта ошибка, запустил вашу сборку

Error: EPERM: operation not permitted, rename 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\on-finished\package.json.759376365' -> 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\on-finished\package.json'
npm ERR!  { [OperationalError: EPERM: operation not permitted, rename 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\on-finished\package.json.759376365' -> 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\on-finished\package.json'] 
npm ERR!   cause:
npm ERR!    { [Error: EPERM: operation not permitted, rename 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\on-finished\package.json.759376365' -> 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\on-finished\package.json']
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'rename',
npm ERR!      path:
npm ERR!       'C:\\Users\\Anriko\\Desktop\\домашка реакт\\FD3-Pauls\\ishop3\\node_modules\\on-finished\\package.json.759376365',        
npm ERR!      dest:
npm ERR!       'C:\\Users\\Anriko\\Desktop\\домашка реакт\\FD3-Pauls\\ishop3\\node_modules\\on-finished\\package.json' },
npm ERR!   stack:
npm ERR!    "Error: EPERM: operation not permitted, rename 'C:\\Users\\Anriko\\Desktop\\домашка реакт\\FD3-Pauls\\ishop3\\node_modules\\on-finished\\package.json.759376365' -> 'C:\\Users\\Anriko\\Desktop\\домашка реакт\\FD3-Pauls\\ishop3\\node_modules\\on-finished\\package.json'",
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'rename',
npm ERR!   path:
npm ERR!    'C:\\Users\\Anriko\\Desktop\\домашка реакт\\FD3-Pauls\\ishop3\\node_modules\\on-finished\\package.json.759376365',
npm ERR!   dest:
npm ERR!    'C:\\Users\\Anriko\\Desktop\\домашка реакт\\FD3-Pauls\\ishop3\\node_modules\\on-finished\\package.json',
npm ERR!   parent: 'ishop3' }

[anriko]

обновил ноду ошибка пропала
и потом вот эта появилась

code ERESOLVE
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree     
npm ERR!
npm ERR! While resolving: react-empty-template@undefined
npm ERR! Found: webpack@5.52.1
npm ERR!
npm ERR! While resolving: react-empty-template@undefined
npm ERR! Found: webpack@5.52.1
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.35.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from optimize-css-assets-webpack-plugin@5.0.8
npm ERR! node_modules/optimize-css-assets-webpack-plugin
npm ERR!   dev optimize-css-assets-webpack-plugin@"^5.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[antares4045]

anriko,

для разработки естесственно, start
в прод-билде был косяк (фикс запушил)
что с ресолвом зависимостей -- сказать не могу: я сейчас на чистую виртуалку накатил: у меня всё запустилось. если npm audit fix не помогает, то тут уже надо конкретно в систему смотреть
(причём нода может быть очень старая)

[anriko]

npm install --force запустил пакеты установились , но еще одна ошибка

Failed to load 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\webpack.config.js' config
[webpack-cli] { Error: ENOENT: no such file or directory, open './configs/build_configs.json'
    at Object.openSync (fs.js:448:3)
    at Object.readFileSync (fs.js:348:35)
    at Object.<anonymous> (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\webpack.config.js:14:28)
    at Module._compile (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) 
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WebpackCLI.tryRequireThenImport (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\webpack-cli\lib\webpack-cli.js:32:22)
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: './configs/build_configs.json' }

[antares4045]

anriko, в вебе до сих пор нет устоявшейся команды для запуска проекта кто делает serve, кто dev, но для именно реата более каноничным является вариаент фейсбука -- start (но если не нравится, то никто не запрещает переименовать)

[anriko]

antares4045, скопировал configs/build_configs.json

[antares4045]

anriko, а из какой директории команду на запуск вызываете?

[anriko]

Object.fromEntries is not a function
    at Object.<anonymous> (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\webpack.config.js:15:17)
    at Module._compile (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) 
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)

[anriko]

antares4045, из корня проекта команду на запуск вызываю

[antares4045]

anriko, ммм мило-мило у вас нода старше десятой версии? просто обновитесь хотябы до 12 а лучше до четырнадцатой

[anriko]

страно npm update npm -g запускал , а версия 7.23.0 осталась

[antares4045]

anriko, https://stackoverflow.com/questions/8191459/how-do...
вы обновили npm (что тоже похвально) а не node.js

[anriko]

ноду обновил, не из консоль скачал ее,но проект не доконца запустился

ERROR in main
Module not found: Error: Can't resolve './index.js' in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\src'

ERROR in main
Module not found: Error: Can't resolve './index.js' in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\src'

ERROR in unable to locate 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\public' glob

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\public\index.html' in 'C:\Users\Anriko\D  esktop\домашка реакт\FD3-Pauls\ishop3\src'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\public\index.html' 
  in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\src'
      at C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\webpack\lib\Compilation.js:1773:28
      at C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\webpack\lib\NormalModuleFactory.js:814:13
      at eval (eval at create (C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\node_modules\tapable\lib\HookCodeFactor

y.js:33:10), :10:1)

[anriko]

antares4045,
у меня в корне index.js

import React from 'react';
import ReactDOM from 'react-dom'; /* для работы с веб страницами */  // модуль React для работы с веб-страницами 
import ProductList from '/src/js/components/ProductList.js';

const tableName = "Таблица продуктов";

const tableColName = {
    name: "название",
    price: "цена",
    src: "фотография",
    quality: "кол-во ед"
};

const product = require('/src/js/data/products.json');


ReactDOM.render(<ProductList name={tableName} colname={tableColName} product={product} />, document.getElementById('root'));

[anriko]

перенес его в src

[anriko]

получил ошибки

поправил в нем пути

[anriko]

остановился на этой ошибке

ERROR in unable to locate 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\public' glob

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\public\index.html' in 'C:\Users\Anriko\D  esktop\домашка реакт\FD3-Pauls\ishop3\src'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\public\index.html' 
  in 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3\src'

[anriko]

перенес и index.html в src все равно ошибка

[antares4045]

anriko, ему необходим файл public/index.html

[anriko]

antares4045, а что это за фаил ? нужно создать папку public ?

[anriko]

вот мой index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="root"></div>
<script  src="./main.js"></script>
</body>
</html>

[antares4045]

anriko, да именно) рядом с папкой src, должна быть папка public
и точкой входа в ваш сайт является именно index.html (правда не этот, а тот, что будет собран на его основе и положен в dist)
и всётаки, чем вам не угадил обычный react-scripts?

[antares4045]

anriko, только тег script уберите

[anriko]

antares4045, а кто в него подключит скрипты если я уберу и почему он в папке паблик ,а не в корне должен быть ? или в папке build ?

[antares4045]

anriko, вижу есть некоторый пробел в базовой теории. ознакомьтесь например с вот такой инструкцией https://youtu.be/eSaF8NXeNsA
(лично я видеоуроки не люблю, но паре моих коллег этот ролик сильно помог)

[anriko]

и не совсем понимаю ,что вот это за фаил public/manifest.json, да со зборками у меня туго , я пробовал писать в стандалоне приложение ,а сборки обходил всегда

и почему script надо убрать во многих сборка вебпака он есть в индексе

[anriko]

antares4045, react-scripts вроде для него нужна обертка чтобы настроить под себя , и такая задания на курсе по реакту ,а как оказалась учитель не знает вебпак ,но знает реакт и ангуляр , вот парадокс и он 15 во фронтенде

[antares4045]

anriko, manifest... ну очень грубо говоря, это разновидность иконки, которая в явном виде подключена в html

скрипт надо убрать потому, что вы используете webpack: вся идея состоит исключительно в том, что он соберёт на основе содержимого src правильный бандл и сам его подключит куда следует.

[antares4045]

anriko, какраз наоборот react-scripts офигенная обёртка вокруг этого всего, сделаная фейсбуком, которая позволяет не воевать с зависимотями а сразу начинать писать

[anriko]

antares4045, а почему у вас сборка на вебпаке получилась ,если есть react-scripts ?

[antares4045]

anriko, как я и написал в изначальном ответе, это был образовательный эксперимент, и если есть возможность то лучше всётаки пользоваться именно react-scripts (а лучше вообще сразу create-react-app ом)

[anriko]

antares4045,и еще вод ошибка осталась

ERROR in unable to locate 'C:/Users/Anriko/Desktop/домашка реакт/FD3-Pauls/ishop3/public/**/*' glob after filtering paths

[antares4045]

anriko, видимо пустая папка public
https://qna.habr.com/q/955577

[WbICHA]

Интересная ветка. antares4045, ты святой.)

[anriko]

Необходимо добавить опцию noErrorOnMissing: true, которая скажет сборщику, если папка пустая, то пропустил ее и не генерируй ошибку
только куда ее добавить?
Да ,спасибо, огромное человеку который откликнулся и столько уже помог мне по вопросу,очень ему благодарен

[anriko]

antares4045, а вы не могли бы платно поднатаскать меня по этим сборкам ?

[antares4045]

WbICHA, просто пару раз оказывался в аналогичной ситуации (микроконтроллеры, глубокая оптимизация алгоритмов и т.д.) когда я не понимал какой-то элементарной вещи, а все кто в теме просто косо поглядывали а "объяснить очевидное" ленились.

[anriko]

вот поправил вроде запустилась

new CopyPlugin({
        patterns: [
            {
                from: publicPath,
                to: distPath,
                noErrorOnMissing: true,
                filter: async (resourcePath) =>
                    path.normalize(resourcePath) !=
                    path.normalize(path.resolve(publicPath, "index.html")),
            },
        ],
    }),

[antares4045]

anriko, честно говоря, я не уверен что могу дать очень уж много: у меня примерно по году опыта коммерческой разработки на vue2 и react16. Большую часть вы вполне способны подчерпнуть просто пробежав по диагонали глазами официальные (даже русифицированые доки).

а флаг добавить в конфигурацию CopyPlugin (строка 36 файла webpack.config.js)

[antares4045]

anriko, а вы и без меня разобрались)

[anriko]

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

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    watch: true,
    mode: 'none',
    output: {
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: ['babel-loader', 'eslint-loader'],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
};

или так вод для этого проекта

сonst path = require('path');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new ExtractTextPlugin({
    filename: "bundle.css"
});

module.exports = { 
    entry: "./index.js", // основной файл приложения
    output:{ 
        path: path.resolve(__dirname, 'build'), // путь к каталогу выходных файлов
        filename: "bundle.js"  // название создаваемого файла 
    }, 
    devtool:'source-map',
    module:{ 
        rules:[
            { 
                test: /\.jsx?$/, // какие файлы обрабатывать
                exclude: /node_modules/, // какие файлы пропускать
                use: { loader: "babel-loader" }
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    use: ["css-loader"]
                })
            }            
        ] 
    },
    plugins: [
        extractCSS
    ]
}

и почему бабель я раньше подключал так

<script src="https://unpkg.com/@babel/standalone@7.15.5/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

и проект запустился и все работало,а тут столько пакетом одного бабель
только

"@babel/core": "^7.13.16",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",

[antares4045]

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

По поводу вашего старого конига, утверждать не берусь с полной уверенностью, но очень похоже на конфигурацию vue-cli-service, и если я прав, то там под капотом барабулька намного порядков страшнее крутится -- просто её от вас спрятали.

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

[antares4045]

anriko, в качестве страшилки покажу вам, являющийся сегодня промышленным стандартом для реакта, конфиг вебпака:
https://github.com/facebook/create-react-app/blob/...

[anriko]

Посмотрел сегодня в консоль там наверно для jsх что ,то не установленно или что это?

bootstrap e072cea83c7263748e13:62 Uncaught Error: Module build failed: SyntaxError: C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\ishop3-b\src\index.js: Unexpected token (19:16)

[0m [90m 17 | [39m
 [90m 18 | [39m
[31m[1m>[22m[39m[90m 19 | [39m[33mReactDOM[39m[33m.[39mrender([33m<[39m[33mProductList[39m name[33m=[39m{tableName} colname[33m=[39m{tableColName} product[33m=[39m{product} [33m/[39m[33m>[39m[33m,[39m document[33m.[39mgetElementById([32m'root'[39m))[33m;[39m
 [90m    | [39m                [31m[1m^[22m[39m
 [90m 20 | [39m[0m

[antares4045]

anriko, файл
"Рабочий стол"\"домашка реакт"\FD3-Pauls\ishop3-b\src\index.js
строка 19
символ №16
неожиданный символ
что у вас конкретно там не так: никто не настолько волшебик

[anriko]

antares4045, вот эта строка

ReactDOM.render(<ProductList name={tableName} colname={tableColName} product={product} />, document.getElementById('root'));

[antares4045]

anriko, React импортирован?

[anriko]

antares4045, да вот https://github.com/AnrikoTacatti/FD3-Pauls/tree/ma...

вот этот фаил

import React from 'react';
import ReactDOM from 'react-dom'; /* для работы с веб страницами */  // модуль React для работы с веб-страницами 
import ProductList from '/js/components/ProductList.js';

const tableName = "Таблица продуктов";

const tableColName = {
    name: "название",
    price: "цена",
    src: "фотография",
    quality: "кол-во ед"
};

const product = require('/js/data/products.json');


ReactDOM.render(<ProductList name={tableName} colname={tableColName} product={product} />, document.getElementById('root'));

[antares4045]

anriko, это может надолго затянуться в таком режиме можете на гитхаб свой проект залить?

[anriko]

antares4045, залил https://github.com/AnrikoTacatti/FD3-Pauls/tree/ma...

[antares4045]

anriko,
прав создавать новые ветки у меня нет а пушить в мастер как-то не красиво:
1) при импорте важно сохранять регистр вы импортировали
"/js/сomponents/ProductList.js"
а надо "/js/Components/ProductList.js"
а лучше вообще "./js/Components/ProductList"
2) в коде ProductList.js объявлена функция ProductList а экспортируется ProductLis

чтобы избегать такого рода ошибок рекомендую экспортировать сразу при объявлении: что-то вроде
export default function ProductList({product, colname, name}){
...
}

после этих двух испправлений получил вот такую картинку

[anriko]

antares4045, это поправил ,но все рано ошибка осталась

[anriko]

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

[antares4045]

anriko, так давайте убедимся (просто меня смущает, что я в проекте не вижу ни gitignore ни node_modules).
находясь в папке ishop3 вы сначала выполнили комманду npm install
и в неё появилась папка node_modules
затем в той же папку вы выполнили команду npm run start и получили ошибку?

[antares4045]

antares4045, а лол. речь про 3-b, в котором полностью перелопачена конфигурация. а в чём смысл?

[anriko]

antares4045, удалил node_modules , заново запустил сборку, потом удалил папку папку build и запустил
npm run start ,но папка билд не появилась, но сборка запустилась и увидел таблицу

[anriko]

antares4045, нет речь про ishop3 , а ishop3-b это я добил старую сборку которая в начале вопроса была

[antares4045]

anriko, я посмотрел: там (ishop3-b) билд полностью рабочий проблемы уже в js: могу конечно посидеть подебажить, но мне кажется лучше уж вы сами.

ну и не вполне ясна цель подключения не существующего bundle.css в html файле

[antares4045]

anriko, папка билд появится от команды npm run build и только от неё и должна:
дев разработка не должна гонять диск почём зря

[anriko]

ну я просто видимо не знал не убрал bundle.css , bundle.js ,так как в старой сборке ishop3-b работало именно так через подключения в index

[anriko]

antares4045,еще раз спасибо

[antares4045]

anriko, https://github.com/AnrikoTacatti/FD3-Pauls/pull/1/...

3 работает
3-b собирает (но я выкинул весь контент из ProductList)
3-с как, вероятно, хочет от вас ваш преподователь

[anriko]

а что это такое и зачем \\node_modules\\.bin\\ ?
"build": ".\\node_modules\\.bin\\webpack",
"livebuild": ".\\node_modules\\.bin\\webpack-dev-server --progress --colors"

[antares4045]

anriko, ваше наследство)
Достаточно просто
webpack
и
webpack-dev-server --progress --colors
Но можно и так)

[anriko]

antares4045, а то было комментарии или что? такую сборку получил,учитель так и не дорассказал что это \\node_modules\\.bin\\

[antares4045]

anriko, символ \ во всех языках СИ семейства является экранирующим -- следующая за ним буква имеет особую смысловую нагрузку, а если вы хотите написать просто \ (который к примеру является разделителем в путях в ОС windows, то вы вынуждены писать \\, соответственно
.\\node_modules\\.bin\\webpack -- в текущей папке есть папка node_modules в ней есть папка .bin а в ней наконец нечто (скорее всего файл), по имени webpack -- это нечто и нужно запустить, чтобы выполнить команду start