Why Webpack does not see @babel/transform-react-constant-elements module?

After webpack build get error:

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"?

My 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"     ] } 

my webpack config:

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; 

So package "@babel/transform-react-constant-elements" has been installed, but he doesnt see it. What can be the reason?

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.