После сборки webpack получить ошибку:
Ошибка сборки модуля: Ошибка: не удается найти модуль babel-plugin-transform-react-constant-elements из '/ home / igor / Projects / amater '
- Вы имели в виду «@ babel / transform-react-constant-elements»?
Мой пакет. json:
{
"name": "amateur-react-webapp",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "export NODE_ENV=development && webpack --config=webpack.config.js -d --watch --display-error-details",
"prod": "export NODE_ENV=production && webpack --config=webpack.config.js --progress"
},
"scriptsComments": {
"instruction": "First run npm install comand in order to instal necessary packages. Aftr that run npm run dev, or npm run prod to build app"
},
"author": "igor",
"license": "BSD-2-Clause",
"devDependencies": {
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.0",
"@babel/plugin-syntax-flow": "^7.2.0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-arrow-functions": "^7.2.0",
"@babel/plugin-transform-flow-comments": "^7.4.0",
"@babel/plugin-transform-flow-strip-types": "^7.4.0",
"@babel/plugin-transform-react-constant-elements": "^7.10.4",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"@types/styled-components": "^4.1.6",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-expo": "^5.0.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-runtime": "^6.23.0",
"browserslist": "^4.5.2",
"clean-webpack-plugin": "^0.1.18",
"compress-webpack-plugin": "^1.0.6",
"copy-webpack-plugin": "^4.4.1",
"css-loader": "^0.28.11",
"cssnano": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"flow-bin": "^0.86.0",
"html-webpack-plugin": "^3.2.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"react-outside-click-handler": "^1.3.0",
"react-test-renderer": "16.7.0",
"redux-devtools": "^3.5.0",
"redux-logger": "^3.0.6",
"schedule": "^0.4.0",
"style-loader": "^0.21.0",
"webpack": "^3.12.0",
"webpack-uglify-js-plugin": "^1.1.9"
},
"dependencies": {
"@babel/polyfill": "^7.4.0",
"@stripe/stripe-js": "^1.2.0",
"body-scroll-lock": "^2.6.4",
"core-js": "^3.2.1",
"css-supports": "^0.1.1",
"debounce": "^1.2.0",
"es6-promise": "^4.2.4",
"es7-object-polyfill": "^1.0.0",
"ify-loader": "^1.1.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"object-polyfills": "^0.8.0",
"primereact": "^1.3.0",
"promise-polyfill": "^8.1.3",
"prop-types": "^15.6.0",
"qrcode.react": "^1.0.0",
"qs": "^6.8.0",
"react": "16.5.2",
"react-dom": "16.5.2",
"react-props": "0.0.3",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"styled-components": "^4.1.1",
"whatwg-fetch": "^2.0.3"
},
"browserslist": [
">0.2%",
"not dead",
"ie 10",
"not ie <= 9",
"not op_mini all"
]
}
конфигурация моего веб-пакета:
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressPlugin = require("compress-webpack-plugin");
const ASSETS_PATH = './assets';
const BUILD_DIR = path.resolve(__dirname, 'public/build');
const webpack_config = {
context: path.resolve(__dirname, ASSETS_PATH),
entry: {
main: [
"promise-polyfill",
"object-polyfills",
"isomorphic-fetch",
"core-js",
"es7-object-polyfill",
"babel-polyfill",
"react",
"react-dom",
"react-props",
"redux",
"react-redux",
"react-router",
],
app : "./js/index.js",
},
output: {
filename: ("production" === process.env.NODE_ENV) ? 'js/[name]-[chunkhash].min.js' : 'js/[name].min.js',
publicPath: '/public/build',
path: BUILD_DIR
},
resolve: {
extensions: [' ', '.web.js', '.js', '.jsx', 'css'],
},
devtool: ("production" === process.env.NODE_ENV) ? "source-map" : "eval-source-map",
watchOptions: {
poll: true
},
module: {
loaders: [
{
test: /\.(jsx|js)$/,
loader: 'babel-loader?compact=true&comments=true&minified=true',
query: {
presets: [
'@babel/preset-env',
'@babel/react',
],
plugins: [
'@babel/plugin-proposal-class-properties'
],
},
exclude: /node_modules/
},
{
test: /\.js$/,
include: [
/node_modules\/react-router-native/,
],
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: [
'@babel/preset-env',
'@babel/react',
],
plugins: [
'@babel/plugin-proposal-class-properties'
],
}
},
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/fonts/'
}
}
},
{
test: /\.jpe?g$|\.ico$|\.gif$|\.png$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
limit: 1024 * 10,
name: '[name].[ext]',
outputPath: '/images/'
}
}
},
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: "css-loader"
}
})
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new CleanWebpackPlugin(
[BUILD_DIR]
),
new HtmlWebpackPlugin({
title: ' Amateur Webcams ',
template: './html-templates/index.html',
filename: '../../templates/index-tpl.html',
chunks: ['main', 'app']
}),
new CopyWebpackPlugin([
{
from: './images/favicon',
to: './images/favicon',
toType: 'dir'
}
]),
new ExtractTextPlugin({
filename: ("production" === process.env.NODE_ENV) ? 'css/style-[chunkhash].min.css' : 'css/style.min.css',
disable: false,
allChunks: true
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.min\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: {discardComments: {removeAll: true}},
canPrint: true
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["main"]
}),
new webpack.optimize.UglifyJsPlugin({
cache: false,
minimize: true,
sourceMap: false,
beautify: false,
comments: false,
compress: {
warnings: false
}
})
]
};
module.exports = webpack_config;
Итак, пакет «@ babel / transform-react-constant-elements» установлен, но он его не видит. В чем может быть причина?