(HELP) Upgrading NPM in assets folder Phoenix Framework

Phoenix Forum Questions / Help
, , ,
12

thankyou bro, its works, here my step according the PR

in my app folder config/dev.exs : i am remove this line

“node_modules/webpack/bin/webpack.js”,
“–mode”,
“development”,
“–watch-stdin”,

then replace with this line :

“node_modules/webpack/bin/webpack.js”,
“–mode”,
“development”,
“–watch”,
“–watch-options-stdin”,

after that i go to folder assets/package.json then i remove this line in the below dependencies:

"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"hard-source-webpack-plugin": "^0.13.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.2",
"webpack": "4.41.5",
"webpack-cli": "^3.3.2"

and replace with this line :

"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"babel-loader": "^8.x",
"copy-webpack-plugin": "^6.x",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^1.x",
"mini-css-extract-plugin": "^1.x",
"sass": "^1.x",
"sass-loader": "^10.x",
"webpack": "^5.x",
"webpack-cli": "^4.x"

after that i go to assets/webpack.config.js i remove all the line then replace with this line

const path = require(‘path’);
const glob = require(‘glob’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

module.exports = (env, options) => {
const devMode = options.mode !== ‘production’;

return {

entry: {
  'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../priv/static/js'),
  publicPath: '/js/'
},

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.[s]?css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    }
  ]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin({
  patterns: [
    { from: 'static/', to: '../' }
  ]
})

],
optimization: {
minimizer: [
‘…’,
new CssMinimizerPlugin()
]
},
devtool: devMode ? ‘source-map’ : undefined
}
};

here is the link to make changes some file

1 Like