I am trying to use vue js in rails.
Everything works, except when I tried to use <style> inside .vue component
The exact error is:
./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
My environment.js file
const { environment } = require('#rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vueLoader = require('./loaders/vueLoader')
const vuetifyLoader = require('./loaders/vuetifyLoader')
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vueLoader)
environment.loaders.prepend('vuetify', vuetifyLoader)
const resolver = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
environment.config.merge(resolver)
module.exports = environment
VuetifyLoader.js file
module.exports = {
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
}
install these two plugins.
npm install --save node-sass
npm install --save sass-loader
So, the problem was with fiber and indentedSyntax. After removing those two, everything works as expected. I was getting lots of error related to scss like
like
expected new line
in sass files inside node_modules. I don't know, why vuetify recommends to use fiber in sass loader.
I have a Rails 6 application and using Webpacker for assets.
I have the following code in file app/javascript/packs/application.js :
export var Greeter = {
hello: function() {
console.log('hello');
}
}
And I have the following script in one of my view (HTML) file:
<script>
$(document).ready(function(){
Greeter.hello();
});
</script>
Note: I am using JQuery and it is working fine.
I am getting the following error:
Uncaught ReferenceError: Greeter is not defined.
How can we use libraryTarget and library to expose the bundled modules, so that it can be accessed from HTML files as well ?
Or, is there any other way of doing it using Rails Webpacker ?
Any help would be much appreciated!
To do this without directly mutating the window object in your application code, you'll want to export Greeter as a named export from your application.js pack and extend the Webpack config output to designate the library name and target var (or window will also work).
// config/webpack/environment.js
environment.config.merge({
output: {
library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
libraryTarget: 'var',
}
})
// app/javascript/packs/application.js
export {
Greeter
}
<script>
$(document).ready(function(){
Packs.application.Greeter.hello();
});
</script>
The library name is arbitrary. Using the [name] placeholder is optional but allows you to export to separate modules if you're using multiple "packs".
As I cannot comment rossta's answer, here is what I had to do. My default config was:
// config/webpack/environment.js
const { environment } = require('#rails/webpacker')
module.exports = environment
and I just had to add the additionnal config in it:
// config/webpack/environment.js
const { environment } = require('#rails/webpacker')
environment.config.merge({
output: {
library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
libraryTarget: 'var',
}
})
module.exports = environment
After that, as mentioned by rossta, each symbol which is exported in app/javascript/packs/application.js can be accessed from the DOM as Packs.application.<symbol>.
in app/javascript/packs/application.js:
import Greeter from '../greeter.js'
Greeter.hello()
and in app/javascript/greeter.js:
export default {
hello : function(){
console.log('hello')
}
}
I could fix the issue exposing Greeter object to window as follows:
export var Greeter = {
hello: function() {
console.log('hello');
}
}
window.Greeter = Greeter;
However, I am still looking for a Webpack way of accomplishing this.
I have a react-rails application set up with webpacker.
I am trying to load font-awesome-pro with it's fonts from node_modules.
I assume this is a trivial task but I can't seem to find any good documentation on how to do this.
This is what I have so far:
package.json dependencies:
"dependencies": {
"#rails/webpacker": "3.5",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.1.3",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-slick": "^0.23.1",
"react_ujs": "^2.4.4",
"slick-carousel": "^1.8.1",
"tachyons-z-index": "^1.0.9"
},
"devDependencies": {
"#fortawesome/fontawesome-pro": "^5.2.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"file-loader": "^2.0.0",
"path": "^0.12.7",
"webpack-dev-server": "2.11.2"
}
file.js:
var path = require('path');
module.exports = {
test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: path.resolve(__dirname, '../../app/assets'),
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/',
useRelativePath: false
}
}
}
environment.js
const { environment } = require('#rails/webpacker')
const file = require('./file')
environment.loaders.prepend('file', file)
module.exports = environment
application.scss:
#import '#fortawesome/fontawesome-pro/scss/fontawesome.scss';
application.rb:
config.assets.paths << Rails.root.join('node_modules')
What am I missing? From what I can gather, webpack should be looking at the node_modules directory, finding font files based on the webpack test and putting the assets into the output directory: fonts/.
FontAwesome with webfonts:
For me with the free version the example below is working well. I don't know the pro version, but if I'm not mistaken, you just have to rename fontawesome-free to fontawesome-pro in the paths.
application.scss:
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/brands.scss";
In SCSS ~ (tilde import) means that look for the nearest node_modules directory. Not all SASS compilers supports it, but node-sass does, and this is the common for Webpack.
This way in your html you only have to use your application.css. There's no need to include any other FontAwesome css files.
Your font loader config seems OK (tested, worked). With that Webpack should resolve the font files and then copy them to your desired output as you wanted. This needs that your css-loader be configured with url: true but I that is the default.
A minimal/usual config for the loaders in your Webpack config file:
module: {
rules: [
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader, // optional (the most common way to export css)
"css-loader", // its url option must be true, but that is the default
"sass-loader"
]
},
{
// find these extensions in our css, copy the files to the outputPath,
// and rewrite the url() in our css to point them to the new (copied) location
test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/'
}
}
}
]
},
Loading only the needed fonts (the new way with JS and SVGs)
Again, I will demonstrate it with the free version because I don't have the pro version.
This way your generated bundle will only contain those icons what you need, resulting in a much smaller size which means faster page loads. (I'm using this in my projects)
The needed packages:
#fortawesome/fontawesome-svg-core
#fortawesome/free-brands-svg-icons
#fortawesome/free-regular-svg-icons
#fortawesome/free-solid-svg-icons
Include this in your scss file:
#import "~#fortawesome/fontawesome-svg-core/styles";
Create a new file, name it fontawesome.js:
import { library, dom, config } from '#fortawesome/fontawesome-svg-core';
config.autoAddCss = false;
config.keepOriginalSource = false;
config.autoReplaceSvg = true;
config.observeMutations = true;
// this is the 100% working way (deep imports)
import { faUser } from '#fortawesome/free-solid-svg-icons/faUser';
import { faHome } from '#fortawesome/free-solid-svg-icons/faHome';
import { faFacebook } from '#fortawesome/free-brands-svg-icons/faFacebook';
import { faYoutube } from '#fortawesome/free-brands-svg-icons/faYoutube';
// this is the treeshaking way (better, but read about it below)
import { faUser, faHome } from '#fortawesome/free-solid-svg-icons';
import { faFacebook, faYoutube } from '#fortawesome/free-brands-svg-icons';
library.add(faUser, faHome, faFacebook, faYoutube);
dom.watch();
.. and then require it somewhere in your js:
require('./fontawesome');
That's all. If you want to read more on this, start with understanding SVG JavaScript Core, have a look on its configuration and read the documantation of treeshaking.
I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
Here is what my Webpack config looks like:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
Here is the middleware step that makes use of Webpack:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');
var express = require('express');
var app = express();
var port = 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, function(err) {
console.log('Server started on http://localhost:%s', port);
});
All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.
I am using 'babel-loader' 6.0.0.
You need to install the es2015 preset:
npm install babel-preset-es2015
and then configure babel-loader:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
Make sure you have the es2015 babel preset installed.
An example package.json devDependencies is:
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"webpack": "^1.9.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
Now configure babel-loader in your webpack config:
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
add a .babelrc file to the root of your project where the node modules are:
{
"presets": ["es2015", "stage-0", "react"]
}
More info:
babeljs.io - using babel with webpack
babeljs.io - docs on .babelrc
react-webpack-cookbook - configure react with webpack
a react-webpack-example repo
If you are using Webpack > 3 then you only need to install babel-preset-env, since this preset accounts for es2015, es2016 and es2017.
var path = require('path');
let webpack = require("webpack");
module.exports = {
entry: {
app: './app/App.js',
vendor: ["react","react-dom"]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../public')
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory=true',
}
}]
}
};
This picks up its configuration from my .babelrc file:
{
"presets": [
[
"env",
{
"targets": {
"browsers":["last 2 versions"],
"node":"current"
}
}
],["react"]
]
}
BABEL TEAM UPDATE:
We're super 😸 excited that you're trying to use ES2015 syntax, but instead of continuing yearly presets, the team recommends using babel-preset-env. By default, it has the same behavior as previous presets to compile ES2015+ to ES5
If you are using Babel version 7 you will need to run npm install #babel/preset-env and have "presets": ["#babel/preset-env"] in your .babelrc configuration.
This will compile all latest features to es5 transpiled code:
Prerequisites:
Webpack 4+
Babel 7+
Step-1:: npm install --save-dev #babel/preset-env
Step-2: In order to compile JSX code to es5 babel provides #babel/preset-react package to convert reactjsx extension file to native browser understandable code.
Step-3: npm install --save-dev #babel/preset-react
Step-4: create .babelrc file inside root path path of your project where webpack.config.js exists.
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
Step-5: webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
}
In my case, I had such error since import path was wrong:
Wrong:
import Select from "react-select/src/Select"; // it was auto-generated by IDE ;)
Correct:
import Select from "react-select";
Due to updates and changes overtime, version compatibility start causing issues with configuration.
Your webpack.config.js should be like this you can also configure how ever you dim fit.
var path = require('path');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
devtool: 'source-map',
mode: 'development',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
output: {
path: path.resolve(__dirname, './src/vendor'),
filename: 'bundle.min.js'
}
};
Another Thing to notice it's the change of args, you should read babel documentation https://babeljs.io/docs/en/presets
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
NB: you have to make sure you have the above #babel/preset-env & #babel/preset-react installed in your package.json dependencies
You probably forgot to add .js extension to your file.
Component -> Component.js
This makes me feel stupid, but I want to share for anyone that got frustrated like me: I used webpack.dev.js but didn't specify that as the config file! When running Webpack run with:
webpack --config webpack.dev.js
And it suddenly worked ;)
Just adding on another reason such error showed up in Angular.. was because I checked for html file in list of styles:
#Component({
selector: ...,
templateUrls: 'xyz.html',
stylesUrls: ['xyz.html'] // problem
})
Addressing wrong file type raises this error
As question doesn't specify if it was for angular, react, or react-native. I am posting this for react-native and it may be implied on others too. The reason was that it wasn't able to understand the syntax specified by loader. e.g. tsx, jsx. One solution I found in this article after lots of exploration. When we use external library that was using jsx and you configured your project with tsx, it won't understand jsx and will give you to add appropriate loader. So, you can fix that by following code in your app.json file.
"web": {
"build": {
"babel": {
"include": [
"name-of-my-shared-package-here"
]
}
}
}
By replacing name-of-my-shared-package-here with your package name that is causing the issue will solve this issue. You can check the package name in error that is causing this issue.
Outdated babel packages on Jan 3, 2023
Please install these list of packages for configuration with babel.
$ npm add -D #babel/core babel-loader #babel/preset-env #babel/preset-react
and add below code .babelrc file
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I used #khizer webpack configuration in my application
Credit goes to This answer. As I have have been gone through the best answer of this solution and it tooks my 2-3 hours. I hope other don't waste same amount of time.
When using Typescript:
In my case I used the newer syntax of webpack v3.11 from their documentation page
I just copied the css and style loaders configuration form their website.
The commented out code (newer API) causes this error, see below.
module: {
loaders: [{
test: /\.ts$/,
loaders: ['ts-loader']
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
]
// ,
// rules: [{
// test: /\.css$/,
// use: [
// 'style-loader',
// 'css-loader'
// ]
// }]
}
The right way is to put this:
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
in the array of the loaders property.
This one throw me for a spin.
Angular 7, Webpack
I found this article so I want to give credit to the Article
https://www.edc4it.com/blog/web/helloworld-angular2.html
What the solution is:
//on your component file. use template as webpack will treat it as text
template: require('./process.component.html')
for karma to interpret it
npm install add html-loader --save-dev
{
test: /.html$/,
use: "html-loader"
},
Hope this helps somebody
Just add this code webpackmix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]).vue();
so I am using angular2 / TypeScript and trying to convert this call which works fine today by the way:
window['Highmaps'] = require('highcharts/modules/map')(Highcharts);
to es6
something to the sorts of:
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts(Highcharts)
but no luck as the former works but the es6 version does not.
this is the project by the way: https://github.com/Bigous/ng2-highcharts
and I have to convert it since I am trying to move from commonjs to systemjs,
thanks for any help,
Sean.
window['Highmaps'] = require('highcharts/modules/map')(Highcharts);
The value of the require is immediately applied as a function. This typically implies there's a default export that's being used.
Try
import Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts(Highcharts)
To be able to import like that you need to create an entry in the system.config.js file or just System.config({...}), however you are doing the config.
One entry goes in the map and one in packages like this
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'#angular': 'node_modules/#angular',
'highcharts': 'path/to/highcharts-directory'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'highcharts/modules/map': { defaultExtension: 'js' }
};
And you're good to go.... Hope it works.