imtiaz
January 19, 2021, 5:52pm
1
Hi, I’m new to Phoenix. I’m using 1.5 to build a web application. I want to use materializecss .materialize-css and installed it inside the assets folder using npm install materialize-css@next --save.
The problem I’m facing is, I included @import "~materialize-css/dist/css/materialize.min.css"; in my app.scss file. Also, added import "materialize-css/dist/js/materialize.min"; in my app.js file.
When I run mix phx.server it’s giving me error
ERROR in multi ./js/materialize.min.js
Any idea how to resolve it?
Hello and welcome,
Try to change this to…
import "../node_modules/materialize-css/dist/js/materialize.min";
2 Likes
imtiaz
January 20, 2021, 3:01am
3
Thanks @kokolegorille . It doesn’t solve the problem. I guess it’s showing this because inside my webpack.config.js there is a line:
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
'materialize': glob.sync('./vendor/**/*.js').concat(['./js/materialize.min.js'])
},
I removed the line with materialize and it removes the error. Not sure why I’m getting jquery is undefined.
I installed jquery via npm and added
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
inside webpack.config.js file’s plugin section.
Also, in app.js added:
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
Any idea? I know it’s a question inside another question, but I’m a newbie and getting issues every time
It’s something I had to do for BS4, luckily now BS5 dropped jquery.
I try not to include jquery. JS has evolved enough not to need it anymore.
But when needed, I found some different solutions, one is to use splitChunks.
module.exports = (_env, options) => {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /bootstrap|jquery|popper.js/,
chunks: "initial",
name: "vendor",
enforce: true
}
}
},
minimizer: [
new TerserPlugin({}),
new CssMinimizerPlugin({})
]
},
...
plugins: [
...
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: "jquery",
jquery: "jquery", "window.jQuery": "jQuery",
Popper: ["popper.js", "default"],
})
]
}
Nothing special in app.js (remove your code)
And modify layout like this.
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/vendor.js") %>"></script>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
The example is for bootstrap 4, so You can remove popper too.
Now I try to avoid css framework with jquery dependency.
Needless to say it’s a real pain
imtiaz
January 20, 2021, 4:52am
5
Seems like a real pain adding jquery. Now, everything fall apart. materialize.min.js giving errors that jQuery is not defined
I guess, need to find a css framework without jquery dependency
I tried materialize-css some years ago, but now I would try
or the lite version.
Hi guys,
I can not figure out a working solution for Phoenix 1.5 (incl. Liveviews) + materializecss .
A working result should achieve the following working:Side-Nav-Materializecss
So that I can call:$(".button-collapse").sideNav();
at the bottom of template or via liveview-hooks.
In my tries to get a solution (alot of hours by now), I also face the “jquery ($ not found)” problem.
Is there someone out with a working solution?
Thanks so much for the help!
How do You load jQuery?
It might not be available yet and You might need to use something like…
document.addEventListener("DOMContentLoaded", function(){
// Code
}
I tried a modification in the default generated ‘app.js’ in previous tries:
window.addEventListener(“phx:page-loading-start”, info =>
Current state of Chrome-Console:
Uncaught TypeError: Cannot read property ‘scrollHeight’ of null
GET http://localhost:4005/js/vendor.js net::ERR_ABORTED 404 (Not Found)
app.js?7473:37 Uncaught TypeError: $(…).sideNav is not a function
What happens when You type $ in devtools console?
What is this rc2Contentscript.js?
What happens when You type $ in devtools console?
$
Returns:
ƒ $() { [native code] }
What is this rc2Contentscript.js?
https://github.com/nextcloud/forms/issues/842
My webpack-Config looks like that:
const path = require(‘path’);
const glob = require(‘glob’);
const HardSourceWebpackPlugin = require(‘hard-source-webpack-plugin’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const webpack = require(‘webpack’);
module.exports = (env, options) => {
const devMode = options.mode !== ‘production’;
return {
optimization: {
minimizer: [
new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js'),
publicPath: '/js/'
},
devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.[s]?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: "jquery",
jquery: "jquery", "window.jQuery": "jQuery"
}),
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
splitChunks: {
cacheGroups: {
vendor: {
test: /jquery.js/,
chunks: "initial",
name: "vendor",
enforce: true
}
}
}
}
})
]
.concat(devMode ? [new HardSourceWebpackPlugin()] : [])
}
};
I don’t remember WP 4 config.
A lot have changed since WP 5 and some tools are now obsolete.
Like CopyWebpackPlugin, HardSourceWebpackPlugin and Terser config.
I cannot help You on this, Webpack is such an annoying tool to configure.
Thanks anyway for trying!
Maybe someone else figured it out and can post a working sample code.
