Webpacker + Vue compiled failed #2162
Comments
|
Are your files still stock? If not: in order to help debug, could you please post as much as you can of:
—to a single https://gist.github.com. Please tag me via |
|
@jakeNiemiec All files are stock except package.json. Here the gist with all files and error messages |
|
Is it normal that this package is not added by default? nope, not normal. What's your output for Update: |
|
|
I'm facing the same issue as @Jaroost since I tried to solve the dependencies warning from yarn. |
|
As mentioned in this comment, the Update 1Looking at the Update 2I changed my const { environment } = require('@rails/webpacker')
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
/*
** Plugins
*/
environment.plugins.prepend('MomentLocalesPlugin', new MomentLocalesPlugin({
localesToKeep: ['es-us']
}))
const cssLoader = environment.loaders.get('css')
var loaderLength = cssLoader.use.length
for (var i = 0; i < loaderLength; i++) {
var loader = cssLoader.use[i]
if (loader.loader === 'css-loader') {
// Copy localIdentName into modules
loader.options.modules = {
localIdentName: loader.options.localIdentName
}
// Delete localIdentName
delete loader.options.localIdentName
}
}
module.exports = environmentBefore this change, I had the following errors : With this change I have this : So there is an error less. The remaining one is in my project but I can't figure out what's going wrong for now. Update 3Of course I had to do the same for the sass loader so here is my final code that solve this issue : const { environment } = require('@rails/webpacker')
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
/*
** Plugins
*/
environment.plugins.prepend('MomentLocalesPlugin', new MomentLocalesPlugin({
localesToKeep: ['es-us']
}))
/*
** CSS loader fixing issue, See https://github.com/rails/webpacker/issues/2162
*/
const cssLoader = environment.loaders.get('css')
var cssLoaderLength = cssLoader.use.length
for (var i = 0; i < cssLoaderLength; i++) {
var loader = cssLoader.use[i]
if (loader.loader === 'css-loader') {
// Copy localIdentName into modules
loader.options.modules = {
localIdentName: loader.options.localIdentName
}
// Delete localIdentName
delete loader.options.localIdentName
}
}
const sassLoader = environment.loaders.get('sass')
var sassLoaderLength = sassLoader.use.length
for (var j = 0; j < sassLoaderLength; j++) {
var loader = sassLoader.use[j]
if (loader.loader === 'css-loader') {
// Copy localIdentName into modules
loader.options.modules = {
localIdentName: loader.options.localIdentName
}
// Delete localIdentName
delete loader.options.localIdentName
}
}
module.exports = environment |
@jakeNiemiec the v3 of css-loader has some breaking changes including the move of the |
|
@jakeNiemiec I have node 12.5.0, I tried node 10.16.0 with the same issue the @zedtux solution works I updated the gist with the new environment.js (environment-fix.js) Update 1I have now very strange behavior, in app.vue when I use class style this style is ignored: I don't know if this issue is related to webpacker. |
|
I had to revert all my packages updates as bootstrap wasn't loading like before (I had only the reset css style, and some classes from bootswatch, but all the buttons, list and so on styling wasn't loading). |
Here is how we are consuming webpack 4: //scss
@import '~bootstrap/scss/bootstrap';//js
import Popper from 'popper.js/dist/esm/popper';
//MAKE SURE window.$ exists before this point, import jQuery how you normally would
window.Popper = Popper;
require('bootstrap');Apart from that, I cannot be of much help with the vue stuff. |
|
Ok I finally get this running by updating default configuration is missing |
|
Can this issue be closed ? |
I tried to create a new Rails app using Webpacker and Vue.
Info:
Here what I have done:
rails new myapp --webpack=vue -d mysqlWhile installing package with yarn I have peer dependency warnings:
After that my
package.jsonfile looks like this:When I use command
rails webpacker:compileit works perfectly and compile :So far so good but when I try to add peer dependency in package.json things go wrong:
yarn add webpack@^4.35.2yarn add css-loaderHere, peer dependencies warnings are gone.
Now package.json looks like this:
And when I try to run the
rails webpacker:compileit leave me with this (blank) error :if I use the command
ruby .\bin\webpack-dev-serverI got the following error (It's normal I don't have webpack-dev-server in dev dependency of package.json. Is it normal that this package is not added by default?)So I add webpack-dev-server to package.json:
yarn add webpack-dev-server --devSo now I can run the
ruby .\bin\webpack-dev-serverand I got this following error:Is it bad to add peer dependencies to my project?
The text was updated successfully, but these errors were encountered: