I have a problem with images in Vue.js Webpack
My Vue.js template :
(don't pay attention at red-line)
My package.json:
webpack.config.js:
and I am getting this error:
"Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)"
i tried to add url-loader, but its not working. How to fix it?
The main problem here is that your are using Webpack dynamic import with fully dynamic argument. This is not allowed - see the documentation for import() - same limitations described there applies also to a require() where the argument is expression instead of simple static string
You dont need the rquire inside the img tag, if those images are local, just provide the path, relative to your current file, and the name of the image file. That should work.
Also do not use url-loader in these cases, url-loader converts images to base-64 if they are small enough, and that will not work for dynamic stuff most of the time.
You could also try importing all those local images, and then write some logic that will decide which image to to put in the src.
like:
import bike from '#/assets/images/bike.jpg'
//in the tempalte:
<img :src="bike" />
This also works nicely, and it will not confuse vue-loader with dynamic imports in the template... if you have recent es features availabkle you could use dynamic import as well, but that depends on you and your code base...
Related
Can't find any resources online, but i'm trying to optimize our in-house component library, which i'm trying to make more tree shaker friendly.
How with rollup can i leave .css files in the output along with maintain their import in the file.
I.E
Foo.js (inside import "./foo.css")
Foo.css
Output.
Foo.js (inside import "./foo.css" remains) created into module
Foo.css
This seems as straight forward as possible and iv'e found similar threads asking for this but zero responses. https://github.com/egoist/rollup-plugin-postcss/issues/204
Allowing this will basically mean when people who consume my project will only get critical css automatically.
I.E Import { Foo } from "xyz/foo" will automatically import the accompanying css file.
Unfortunately I couldn't find a solution with Rollup for what you're looking for. However, if you're open to using Webpack there's a plugin that would make this possible called MiniCssExtractPlugin. It creates CSS files per JS file and would achieve the structure you're wanting.
When running gridsome build I get window is not defined. Anyone has an example of making vue2-leaflet work with the client only option for gridsome?
Wrap your component inside template with <ClientOnly> tag, more info in my other answer
I've been struggling with the same problem (but with other libraries) and the only solution i've found was to copy the package into src/. Something like :
cp -a node_modules/package-giving-me-headaches src/plugins
and
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches"
Depending on the package, you may need to target a specific entry point :
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches/src"
You know you need to do that when Gridsome tells you :
"export 'default' (imported as 'PackageGivingMeHeadaches') was not found in '~/plugins/package-giving-me-headaches'
Edit : Yes, i know its not ideal and ugly, but i don't have time to fight for it.
I use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
I've tried reading several blog posts but TypeScript modules still have me totally confused. In particular, I have used 3 different modules (all installed via npm) and each seems to show totally different behaviour:
(1) I can import and use Angular 2 from npm like this in my .ts:
import {bootstrap, Component, Directive, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
Then in my html I have:
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
This has the following results:
The TypeScript compiler knows to look for the angular2.d.ts file under node_modules, even though I just said "angular2/angular2"
The TypeScript compiler adds "var angular2_1 = require('angular2/angular2'); to the output JavaScript
The browser does not attempt to load the angular 2 JavaScript again despite the presence of the require, it somehow knows it's already loaded it via "angular2.dev.js" in the script tag
(2) The npm D3 module does not have a typescript definition, but I can download the one from DefinitelyTyped and then use it by putting:
/// <reference path="../../typings/tsd.d.ts" />
at the top of my .ts. and
<script src="../node_modules/d3/d3.js"></script>
in my html. It seems that being an old-style module it doesn't need an import statement, and as long as I leave it here the output JavaScript works fine. If I do try to use an import statement immediately after the reference line:
import * as d3 from 'd3';
then as with Angular2 it now adds:
var d3 = require('d3');
to the output JavaScript. However, unlike with the Angular case it doesn't realise it's already loaded the JavaScript via the script tag, and so the browser tries and fails to load a file simply called "d3" from the same directory as the html file, which fails.
(3) The npm Phaser module does include a .d.ts file, in a "typescript" subdirectory of the npm module. This is an old style module ("declare module Phaser"), so it seems I need not use "import.." syntax but instead just:
/// <reference path="../node_modules/phaser/typescript/phaser.d.ts"/>
at the top of my .ts file, as with the D3 example. The TypeScript compiler is happy, but unlike with the D3 example, under some circumstances (I haven't worked out quite what yet, doesn't seem to always happen) it outputs:
var phaser_1 = require('phaser');
in the JavaScript even when I haven't used an import statement. I'm not even using commonjs/requirejs in my phaser project, so "require" isn't even defined, causing failure.
And for completeness, unlike with either the Angular or D3 example, if I try putting an import statement after the reference line:
import * as Phaser from 'Phaser';
even the TypeScript compiler isn't happy. Perhaps in the D3 example the TypeScript compiler is treating the tsd.json or typings folder from DefinitelyTyped in special way, or maybe there is some other reason the import compiles for D3 but not for Phaser.
I have all sorts of questions:
1) What determines whether the TypeScript compiler includes a "require(...)" line in the output JavaScript?
2) Under what circumstances does the TypeScript compiler know where to find an external module in "npm_modules" when using "import", with or without needing a reference line at the top of the file?
3) Under what circumstances does the TypeScript compiler know where to find an ambient module in "typings" when using "import", with or without a "reference" line at the top of the file?
4) Under what circumstances does the TypeScript compiler know where to find an ambient module in "npm_modules" when using "import", with or without a "reference" line at the top of the file??
5) Maybe a commonjs/requirejs question rather than a typescript question, but if the TypeScript compiler does output a "require" line in the JavaScript, what do you do if the source of the JavaScript module is not set up with ES6 module exports?
1 ) I can import and use Angular 2 from npm like this in my .ts:
This is because
angular2 ships with its .d.ts file
The browser doesn't attempt to read require because of magic in angular2.dev.js
The npm D3 module fails && the phaser module fails at runtime
They don't have the magic you get from angular2.dev.js. Use something like webpack or browserify to provide this magic.
Unlike with either the Angular or D3 example, if I try putting an import statement after the reference line: import * as Phaser from 'Phaser';
This is because of how Phaser definition is declared. Apprarently it is missing declare module "Phaser" which is what is provided with d3 see here and angular.
When I use my custom build of dojo, dojo.currency.format doesn't use the correct currency symbol.
This is the statement I use:
dojo.currency.format(1234.567, {currency: "USD"});
This is the result when I use the standard dojo release:
"$1,234.57"
This is the result when I use my custom build of dojo:
"¤1,234.57"
How can I get my custom dojo build to produce the correct results?
I encountered this issue when first trying to use the dojo build. It has to do with the character encoding of the files. Check out the character encoding of an unzipped release (non source). Compare that to the character encoding of files in unbuilt source, and the encoding of files are a custom build. To see if this is an issue, (in chrome) you can force the browser to render the contents in a given encoding. You can try this to see if it is actually the issue you are having.
The easy solution to this (for me at least) was to set the charset on the dojo script tags
<script type="text/javascript" src="/path/to/dojo" charset="UTF-8"></script>
Dojo has a couple of pages on encoding that are worth taking a look at.
If you are using shrinksafe in the build, you may also need to specify the encoding there:
java -jar -Dfile.encoding=UTF8 shrinksafe.jar
Does your build have access to dojo/cldr/nls directory for the localization files of your locale? Check in Firebug whether it attempts, but fails to load currency.js from mentioned directory.