My source browserify coffeeify file:
$ = jQuery = require 'jquery'
require 'jq-ui'
$ ->
jqueryUiIsLoaded = jQuery.ui
console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}"
which I convert to main.js with command:
browserify source.coffee -t coffeeify > main.js --debug
My package.json:
{
"name": "jquery_ui_test",
"version": "0.0.1",
"private": true,
"scripts": {
"main": "browserify source.coffee -t coffeeify > main.js --debug"
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.min.js",
"jq-ui": "./node_modules/jquery-ui/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jq-ui": {
"exports": "jq-ui",
"depends": [
"jquery:jQuery"
]
}
},
"dependencies": {
"coffee-script": "*"
},
"devDependencies": {
"browserify": "^6.0.2",
"coffeeify": "^0.7.0",
"jquery": "^2.1.1",
"jquery-ui": "^1.10.5"
}
}
My html:
<html>
<head>
<script src='./main.js'/>
</head>
</html>
In browser console I see that jquery ui is not loaded:
jquery-ui is loaded: undefined source.coffee:5
What should I do to make jquery-ui load with browserify?
The solution was in using debowerify:
I installed jquery and jquery-ui via bower.
My package.json is:
{
"name": "jquery_ui_test",
"version": "0.0.1",
"private": true,
"scripts": {
"main": "browserify source.coffee -t coffeeify -t debowerify > main.js --debug"
},
"dependencies": {
"coffee-script": "*"
},
"devDependencies": {
"browserify": "<6",
"coffeeify": "^0.7.0",
"debowerify": "^0.8.2"
}
}
My source.coffee is :
$ = window.jQuery = require("jquery")
require "jquery-ui"
jqueryUiIsLoaded = jQuery.ui
console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}"
And browser console output is:
jquery-ui is loaded: [object Object]
So jquery-ui is working.
Related
I'm trying to use scss in my rails application, configured by webpacker. Whenever I run rails webpacker:compile, I get the following error:
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
1 │ import api from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
│ ^
╵
app/javascript/stylesheets/application.scss 1:95 root stylesheet
I'm having trouble debugging this problem and would appreciate any help.
Dependencies
rails: 6.1
webpacker: 6.0.0.pre1
#webpack-cli/serve
webpack: 5.11
webpack-cli: 4.2
webpack-dev-server: 3.11
package.json
{
"name": "ostor",
"private": true,
"dependencies": {
"#popperjs/core": "^2.6.0",
"#rails/actioncable": "^6.1.2-1",
"#rails/activestorage": "^6.1.2-1",
"#rails/ujs": "^6.1.2-1",
"#rails/webpacker": "^6.0.0-beta.5",
"autoprefixer": "^10.2.4",
"bootstrap": "^v5.0.0-beta2",
"css-loader": "^5.0.2",
"css-minimizer-webpack-plugin": "^1.2.0",
"d3": "^6.2.0",
"jquery": "^3.5.1",
"mini-css-extract-plugin": "^1.3.7",
"postcss": "^8.2.6",
"postcss-loader": "^5.0.0",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"turbolinks": "^5.2.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
},
"version": "0.1.0",
"devDependencies": {
"#webpack-cli/serve": "^1.3.0",
"webpack-dev-server": "^3.11.2"
},
"babel": {
"presets": [
"./node_modules/#rails/webpacker/package/babel/preset.js"
]
},
"browserslist": [
"defaults"
]
}
config/webpack/base.js:
const { webpackConfig, merge } = require('#rails/webpacker')
const customConfig = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
}
module.exports = merge(webpackConfig, customConfig)
app/javascript/packs/application.js
import ActiveStorage from "#rails/activestorage";
import * as RailsUjs from "#rails/ujs";
import Turbolinks from "turbolinks";
ActiveStorage.start();
RailsUjs.start();
Turbolinks.start();
import "channels";
import "bootstrap";
import "../stylesheets/application.scss";
Remove the custom config rules you added for SASS/SCSS. Webpacker 6 will provide the appropriate CSS rules for you when it detects you've installed css-loader, postcss-loader, mini-css-extract-plugin, etc.
For the shakapacker users:
You don't need to add the option:
test: /\.s[ac]ss$/i
in the "rules" section. You just need to add:
yarn add sass sass-loader
and:
extensions:
- .sass
- .scss
in your webpacker.yml file, and shakapacker will transpile sass/scss files.
How should I import npm packages? If I just add lodash bundling goes from 6ms to 900ms!?
Is there no way to cache static dependencies?
If I add lodash to external, globals and customResolveOptions in rollup.config.js it is excluded from the bundle. But how could I add it in a libs.js file for example?
Here are my files:
app.js
import _ from 'lodash'
alert(_.concat(["hi", "hello"]))
rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/index.js',
output: {
file: 'scripts/bundle.js',
format: 'iife',
sourcemap: true
},
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'
}),
production && uglify()
]
};
package.json
{
"devDependencies": {
"npm-run-all": "^4.1.2",
"rollup": "^0.55.5",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^3.0.0",
"babel-core": "^6.26.3",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.7.0",
"rollup-plugin-babel": "^3.0.4"
},
"dependencies": {
"lodash": "^4.17.10"
},
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w",
"dev": "npm-run-all --parallel watch"
},
...
}
You can manually separate the entrypoints for "libs" and source code to speed up your build:
rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';
const production = !process.env.ROLLUP_WATCH;
export default [{
input: 'src/index.js',
output: {
file: 'scripts/bundle.js',
format: 'iife',
sourcemap: true,
globals: {
'lodash': '_',
},
},
external: ['lodash'],
plugins: [
babel(),
production && uglify()
]
}, {
input: 'src/common.js',
output: {
file: 'scripts/common.js',
format: 'umd',
name: 'window',
extend: true,
sourcemap: true
},
plugins: [
resolve(),
commonjs(),
production && uglify()
]
}];
common.js
export { default as _ } from 'lodash'
It does add the overhead of maintaining the common.js file with libraries. Personally, I find it gives the best control over file size and compile time. If you're constantly installing and including new npm packages, this will be be hard to maintain.
I'm trying to install packery-mode with bower. I have this bower.json:
"dependencies": {
"isotope": "^3.0.4",
"isotope-packery": "^2.0.0"
},
"overrides": {
"isotope": {
"main": [
"./dist/isotope.pkgd.js"
],
"dependencies": {}
},
"isotope-packery": {
"main": [
".packery-mode.pkgd.js"
],
"dependencies": {}
},
}
}
And the isotope init:
var $grid = $('.grid').isotope({
layoutMode: 'packery',
itemSelector: '.post'
});
I get an Uncaught Error: No layout mode: packery in the console. Why? packery-mode is present in the main.js (masonry layout works fine).
There was just a typo: missing slash in overrides.
".packery-mode.pkgd.js"
instead
"./packery-mode.pkgd.js"
Sorry for the noise
this is my Component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'homeView',
templateUrl: '/home/home'
})
export class HomeViewComponent implements OnInit {
ngOnInit(): void {}
}
I am using AngularJS 2 with TypeScript 1.8.5 and trying to create component that will load template from Controller Action.
I am getting this error
main.bundle.js:667 Uncaught Error: Cannot find module ".//home/home"
I also tried it with home/home, the error is almost the same
main.bundle.js:667 Uncaught Error: Cannot find module "./home/home"
Error is not compile time error however - it pops up in browser console when page and the component is being loaded
So as you can see i dont want to load static template like home.template.html - that is working correctly. I want to load an HTML template from asp.net MVC Controller Action. I am not even hitting the debug point in the HomeController Home action.
Is there any way to make this work ? Seems like Angular keeps inserting this './' sign. Is there a way to configure this ? I ve read several tutorials on angular2 + mvc and it seems that this should be possible, but for some reason its not working for me.
My app.routes.ts
import {Routes} from "#angular/router";
import {MainViewComponent} from "../views/main-view/main-view.component";
import {MinorViewComponent} from "../views/minor-view/minor-view.component";
import {HomeViewComponent} from "../views/home-view/home-view.component";
export const ROUTES:Routes = [
// Main redirect
{ path: '', redirectTo: 'mainView', pathMatch: 'full'},
// App views
{path: 'mainView', component: MainViewComponent},
{path: 'minorView', component: MinorViewComponent},
{path: 'homeView', component: HomeViewComponent}
// Handle all other routes
//{path: '**', component: MainViewComponent }
];
app.module.ts
#NgModule({
declarations: [AppComponent],
imports : [
// Angular modules
BrowserModule,
HttpModule,
// Views
MainViewModule,
MinorViewModule,
// Modules
NavigationModule,
FooterModule,
TopnavbarModule,
RouterModule.forRoot(Approutes.ROUTES)
],
providers : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap : [AppComponent]
})
export class AppModule {}
EDIT : Some more info :
packages.json
{
"name": "inspinia_angular2_starter",
"version": "1.0.0",
"description": "Inspinia Admin Theme",
"repository": "https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S",
"scripts": {
"typings-install": "typings install",
"postinstall": "npm run typings-install",
"build": "webpack --inline --colors --progress --display-error-details --display-cached",
"server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src",
"start": "npm run server"
},
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"animate.css": "3.1.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.6.1",
"ie-shim": "^0.1.0",
"jquery": "^3.1.0",
"metismenu": "^2.5.0",
"pace": "0.0.4",
"pace-progress": "^1.0.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"typings": "^1.3.2",
"zone.js": "^0.6.23"
},
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^1.1.1",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"imports-loader": "^0.6.5",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"typescript": "~1.8.5",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.8.4"
}
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "dist",
"rootDir": ".",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"bower_components"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
App is built using webpack
main.browser.ts
import {platformBrowserDynamic} from "#angular/platform-browser-dynamic";
import {AppModule} from "../src/app/app.module";
/*
* Bootstrap Angular app with a top level NgModule
*/
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
So, after what seemed like an eternity I finally got the the bottom of this.
The problem was in webpack using angular2-template-loader.
This module is responsible for inlining html template. In other words, it will do a require (using your templateUrl) behind the scenes on the template tag of your component. This, of course, breaks the functionality if you are using actual URLs as templateUrl and not PATHs, therefore the template is not there.
Based on what i read, it seems like the authors wont support this in the future. (If template is not found -> try to load it from URL)
More info here - https://github.com/angular/angular-cli/issues/1605
So, basically I just removed this component from config file :
webpack.config.js
BEFORE
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.css$/,
loader:
AFTER
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader']
},
{
test: /\.css$/,
loader:
I tried to include jQuery plugin Jeditable as a webpack module from bower. I use bower-webpack-plugin to include some libraries, but it doesn't work in this case.
Edit: I use this webpack config.
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/script/index.jsx',
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8090/assets'
},
devtool: 'evil-source-map',
module: {
loaders: [
{
test: /\.js[x]?$/,
loaders: ['react-hot', 'jsx', 'babel'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
}
]
},
plugins: [
new BowerWebpackPlugin()
],
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
bower.json
{
"name": "Won",
"version": "0.0.1",
"description": "Internal app",
"main": "index.js",
"authors": [
"and"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"jquery": "~2.1.4",
"babel-polyfill": "~0.0.1",
"bootstrap": "~3.3.5",
"col-resizable": "*",
"datatables": "~1.10.8",
"immutable": "~3.7.4",
"jeditable": "~1.7.3",
"jquery-resizable-columns": "~0.2.3",
"jquery-ui": "~1.11.4",
"kefir": "~2.8.0",
"lodash": "~3.10.1"
}
}
At first I get error:
Uncaught TypeError: $(...).find(...).editable is not a function
Then I tried to add Jeditable plugin
var editable = require('jeditable') or
var editable = require('jquery.jeditable')
but i get errors like
Module not found: Error: Cannot resolve module 'jeditable' in ...
Then I tried
var editable = require('../../bower_components/jeditable/jquery.jeditable')
I get error
Uncaught ReferenceError: jQuery is not defined
(anonymous function) # jquery.jeditable.js:494
Then I tried to add Jquery:
var jQuery = require('../../bower_components/jeditable/js/jquery')
var editable = require('../../bower_components/jeditable/jquery.jeditable')
but I get error:
./bower_components/jeditable/js/jquery.js
Module build failed: SyntaxError: /Users/an/Won_webpack_25_08/bower_components/jeditable/js/jquery.js: 'with' in strict mode (2907:13)
2905 | var left = 0, top = 0, elem = this[0], results;
2906 |
> 2907 | if ( elem ) with ( jQuery.browser ) {
| ^
2908 | var absolute = jQuery.css(elem, "position") == "absolute",
2909 | parent = elem.parentNode,
2910 | offsetParent = elem.offsetParent,
When I add window.jQuery = $; it works now