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
Related
I've been trying to make a Firefox extension. I've had success with doing stuff after a user interaction (like a browser action). But I want my extension to do something without user interaction. But no matter what I do, I can't get anything to happen on page load. Here is my super reduced code:
manifest.json
{
"name": "Test",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["test.js"]
}
}
test.js
document.addEventListener("DOMContentLoaded", init);
function init() {
document.body.innerHTML = "Hello world!";
}
What am I doing wrong here? It works in the toolbox, just not anywhere else!
I've also tried adding host permissons like this:
"permissions": [
"*://*.facebook.com/*"
],
Try this:
manifest.json
{
"name": "Test",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": ["webNavigation", "*://*.facebook.com/*"]
}
background.js
browser.webNavigation.onDOMContentLoaded.addListener(handleOnDOMContentLoaded, {
url: [{ hostEquals: 'www.facebook.com' }],
});
function handleOnDOMContentLoaded({ tabId }) {
browser.tabs.executeScript(tabId, { file: 'test.js' });
}
test.js
document.body.innerHTML = 'Hello world!';
I have a Rails 5 app which uses webpacker, with a file app/javascript/packs/components/module_one.js which I'm trying to test with Jest. This file contains an import to an .js.erb file as follows:
// app/javascript/packs/components/module_one.js
import ModuleTwo from './module_two.js.erb'
// ...
module_two.js.erb contains the following:
// app/javascript/packs/components/module_two.js.erb
import ModuleOne from './module_one'
// ...
While running webpack-dev-server everything works as expected, but when I try to run yarn test, it complains with the following error:
FAIL app/javascript/test/module_one.test.js
● Test suite failed to run
/path/to/module_two.js.erb:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import ModuleOne from './module_one'
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:306:17)
at Object.<anonymous> (app/javascript/packs/components/module_one.js:1:745)
at Object.<anonymous> (app/javascript/test/module_one.test.js:1:124)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.545s
Ran all test suites.
error Command failed with exit code 1.
So it seems like the module_two.js.erb file is not being transformed properly from ES6, because when I remove the first line of module_one.js, it doesn't complain anymore.
Here is my current setup:
// .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"syntax-dynamic-import",
["transform-class-properties", { "spec": true }]
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
// package.json
{
// ...
"devDependencies": {
"babel-jest": "^21.0.2",
"jest": "^21.0.2",
"regenerator-runtime": "^0.11.0",
"webpack-dev-server": "^2.7.1"
},
"scripts": {
"test": "jest"
},
"jest": {
"roots": [
"<rootDir>/app/javascript/test"
],
"moduleDirectories": [
"<rootDir>/node_modules"
],
"moduleFileExtensions": [
"js",
"jsx",
"erb"
],
"transform": {
"^.+\\.jsx?$": "babel-jest",
"ˆ.+\\.jsx?.erb": "rails-erb-loader"
}
}
}
In case someone else bumps into this.
Your .babelrc seems to be missing "es2015" preset.
Here is well explained about this and other issues configuring JS testing with Rails + Webpacker.
I've used Grunt and Gulp before so webpack is a bit new to me still.
Now I've configured webpack to successfully bundle my javascript perfectly. The issue I'm having now is bundling my sass and outputting the result to a file.
My understanding is that I have to use extract-text-webpack-plugin to extract the styles to its own file rather in inlining in <head>, but I'm not sure on this part. I'm looking to do the following for sass:
Compile the contents of src/main/stylesheets/**/*.scss
Output the contents to a single file app/assets/stylesheets/bundle.css
I know I can achieve this using gulp/grunt easily, but I'm trying to learn how webpack does things. My webpack.config.babel.js is as follows:
import path from "path";
import ExtractTextPlugin from "extract-text-webpack-plugin";
export default {
entry: {
index: path.join(__dirname, "src/main/javascripts/application.js")
},
output: {
path: path.join(__dirname, "app/assets/javascripts/"),
publicPath: "/assets/",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.scss$/,
include: path.join(__dirname, "src/main/stylesheets/"),
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
query: { modules: false, sourceMaps: true }
},
{
loader: "sass-loader",
query: { sourceMaps: true }
}
]
})
},
{
test: /\.js$/,
include: path.join(__dirname, "src/main/javascripts/"),
exclude: /node_modules/,
use: [
{ loader: "babel-loader" }
],
}
]
},
plugins: [
new ExtractTextPlugin(path.join(__dirname, "app/assets/stylesheets/bundle.css"))
]
}
Dependencies from package.json if that matters:
"dependencies": {
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.1",
"babel-preset-env": "^1.1.8",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"node-sass": "^4.5.0",
"sass-loader": "^6.0.0",
"style-loader": "^0.13.1"
}
Posting here because there isn't really room in the comments...if you have a link to the repo I might be able to be more helpful. Your syntax doesn't look wrong necessarily, but I am posting this because it's the most recent example I have that I know works: you might want to try using option instead of query. It doesn't look like query is deprecated based on the documentation, but this setup worked for me (although I wasn't using extract here),
{
test: /\.scss$/,
use: [
'style-loader?sourceMap',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
}
},
'postcss-loader?sourceMap',
'sass-loader?sourceMap'
],
exclude: [path.resolve('node_modules')],
},
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
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.