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?