0

При сборке проекта вебпак не хочет билдить js бандл, потому что не может найти модуль babel-plugin-transform-react-constant-elements. Вроде в package.json он прописан и устанавливается, но ошибка есть:

Module build failed: Error: Cannot find module 'babel-plugin-transform-react-constant-elements' from '/home/igor/Projects/amater'

Did you mean "@babel/transform-react-constant-elements"?

package.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"
    ]
}

конфиг webpack:

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;

1 ответ 1

0

попробуй прописать в .babelrc например как здесь:

введите сюда описание изображения должно помочь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.