I was really hoping I'd be able to use webpack to load a certificate file containing text using the raw-loader. Unfortunately it fails at the -'s in the first line: -----BEGIN CERTIFICATE-----. As a test I removed the first -----, and then it fails at a " " (space) character.
Seemed like a much simpler solution than using fs and a callback.
To clarify, i'd like to be able to do this:
import caCert from './cacert';
If you want to load some file via loader, add loader name as prefix to your import:
import caCert from 'raw!./cacert';
Also, you can setup your loader in webpack config to match appropriate files by their names
module: {
loaders: [
{
test: /cacert$/,
loaders: [ 'raw-loader' ]
}
]
}
Related
I have an import import icon from 'src/assets/icon.png', which I can't resolve.
I have "baseUrl": "." in jsconfig.json and
"settings": {
"import/resolver": {
"node": {
"paths": ["."]
}
}
}
in .eslintrc, but the thing is that if I use absolute import this way I get an error from Vite - [plugin:vite:import-analysis] Failed to resolve import "src/assets/icon.png" from "src\lib\Logo.svelte". Does the file exist?
At the same time if I add a forward slash before src in import like so import icon from '/src/assets/icon.png', it will work fine with NO error from vite, but eslint/no-unresolved-imports rule will give me a linting error.
I checked vite docs, but the only thing they offer is to use an alias for the path, which I'm not willing to do. Another workaround could be disabling the eslint rule, which is not an option for me either.
Question: Is there a way to resolve this path 'src/assets/icon.png' using "import/resolver" or vite's settings?
I found this page helpful in getting my setup working for absolute/aliased imports with Vite + React, but maybe it will be helpful to you too.
https://dev.to/abdeldjalilhachimi/how-to-avoid-long-path-import-using-react-with-ts-and-vite-4e2h
You don't have to define an alias for every folder - instead you use a dynamics alias that reads the directory name.
Add this to your vite.config.ts to set up the dynamic alias:
import * as path from 'path';
//...
export default defineConfig({
// ...config
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
},
},
});
Then in your tsconfig.json you can define the alias like so:
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
},
The baseUrl by itself almost worked well enough, but this solution seems to be more robust and lets me do exactly the kind of asset and module imports that you're talking about.
import logoPNG from '~/assets/logo.png';
I am developing the Argdown VSCode extension. The Argdown parser can be configured using either argdown.config.json files or argdown.config.js files exporting a config object. Using Javascript files is the easiest way to allow users to add custom plugins to the Argdown parser.
If the user tells the parser to use a Javascript file, the file is loaded using import-fresh, (which uses node's require, but deletes the cached version.
Using the Argdown commandline tool (#argdown/cli) this works fine, but in the VSCode extension the module of the config file can not be found. The extension is using absolute file paths to require the config module (e.g. "C:\Users\my-username\projects\my-argdown-project\argdown.config.js"). These paths work with import-fresh outside of the VScode extension.
Is there a security restriction for VSCode extensions that does not allow to require modules with absolute file paths? Or is there some other reason why this does not work?
This was not related to VSCode. The problem was caused by bundling up import-fresh with webpack. I thought that webpack would ignore dynamic imports, but it did not.
I was lucky: Since last month, webpack supports "magic comments" for require (not only for import). So I can use:
require(/* webpackIgnore: true */ file);
You have to activate magic comments support in your webpack config:
module.exports = {
parser: {
javascript: {
commonjsMagicComments: true,
},
},
}
Now the next question is how to add the magic comments to the import-fresh package. For that I used the string-replace-loader:
module.exports = {
module: {
rules: {
{
enforce: "pre",
test: /import-fresh[\/\\]index\.js/,
loader: "string-replace-loader",
options: {
search:
"return parent === undefined ? require(filePath) : parent.require(filePath);",
replace:
"return parent === undefined ? require(/* webpackIgnore: true */ filePath) : parent.require(/* webpackIgnore: true */ filePath);",
},
},
}
}
}
After that, I could load the argdown.config.js files again, even after bundling everything with webpack.
I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.
Here is an example:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl'; line it breaks saying:
/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
^
SyntaxError: Unexpected token <
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
My Jest config from package.json is as follows:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
It seems that the webpack html-loader is not working correctly with Jest but I can't find any solution on how to fix this.
Does anyone know how I can make these html-loader imports work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my .js file so i can omit the import template from x part.
PS: This is not a react project, just plain webpack, babel, es6.
I encountered this specific problem recently and creating your own transform preprocesser will solve it. This was my set up:
package.json
"jest": {
"moduleFileExtensions": [
"js",
"html"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
}
}
NOTE: babel-jest is normally included by default, but if you specify a custom transform preprocessor, you seem to have to include it manually.
test/utils/htmlLoader.js:
const htmlLoader = require('html-loader');
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src);
}
}
A bit late to the party, but wanted to add that there is also this html-loader-jest npm package out there to do this if you wanted to go that route.
Once you npm install it you will add it to your jest configuration with
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html?$": "html-loader-jest"
}
For Jest > 28.x.x with html-loader:
Create a custom transformer as documented here.
jest/html-loader.js
const htmlLoader = require("html-loader");
module.exports = {
process(sourceText) {
return {
code: `module.exports = ${htmlLoader(sourceText)};`,
};
},
};
Add it to your jest config.
jest.config.js
...
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.html$": "<rootDir>/jest/html-loader.js",
},
...
It will fix the error : Invalid return value: process() or/and processAsync() method of code transformer found at "<PATH>" should return an object or a Promise resolving to an object.
Maybe your own preprocessor file will be the solution:
ScriptPreprocessor
Custom-preprocessors
scriptpreprocessor: The path to a module that provides a synchronous function from pre-processing source files. For example, if you wanted to be able to use a new language feature in your modules or tests that isn't yet supported by node (like, for example, ES6 classes), you might plug in one of many transpilers that compile ES6 to ES5 here.
I created my own preprocessor when I had a problems with my tests after added transform-decorators-legacy to my webpack module loaders.
html-loader-jest doesn't work for me. My workaround for this:
"transform": {
'\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}
htmlTemplateMock.html is empty file
For Jest 28+ you can use jest-html-loader to make Jest work with code that requires HTML files.
npm install --save-dev jest-html-loader
In your jest config, add it as a transformer for .HTML files:
"transform": {
"^.+\\.html?$": "jest-html-loader"
},
Been experimenting with jspm and systemjs over the weekend. Everything is working fine except for the bundling jspm offers. I can load individual files, but jsmp refuses to load the bundle file (which is optimized).
I'm creating the bundle file using:
jspm bundle lib/login assets/js/1-login.js --inject
This updates the config.js file which looks like:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
"1-login.js": [
"lib/login.js",
"lib/sample.js"
]
},
map: {....}
});
lib/login.js
import * as sample from 'lib/sample'
export function test() {
sample.testMethod();
}
lib/sample.js
import $ from 'jquery'
export function testMethod( ) {
console.log( $('body') );
}
So, according to the jsmp docs:
As soon as one of these modules is requested, the request is intercepted and the bundle is loaded dynamically first, before continuing with the module load.
It's my understanding that running
System.import('lib/login.js');
should load the bundle (and optimised file), but is doesn't - it just loads the actual file. What am I missing here? And as a bonus question, why is jquery not in the bundle list?
Well, figured out where I went wrong.
I keep all the generated assets in assets/js, but in my config.json I didn't change the baseUrl to reflect this. I did in fact have the baseUrl set correctly in package.json, which is why jspm didn't throw a lot of errors.
This was the same reason jquery wasn't loading, so problem solved :)
I'm a Puppet newbie. I'm trying to setup a chef-style deployment environment. I have a puppet-master server set up, and I'd like to be able to configure/deploy to two nodes that I set up simultaneously.
What I'm expecting with my puppet setup right now is for my two servers (called img01 and img02) to automatically create a file called /tmp/test_file.txt.
I'm not even sure how to really "load in" a manifest. I just assumed that anything in site.pp would automatically get loaded, but that doesn't seem to be the case. When I run "puppet apply /etc/puppet/manifests/site.pp", I get the following:
Error: Could not parse for environment production: No file(s) found for import of 'test' at /etc/puppet/manifests/site.pp:3 on node puppet.lgwp.com
Error: Could not parse for environment production: No file(s) found for import of 'test' at /etc/puppet/manifests/site.pp:3 on node puppet.lgwp.com
This is what my manifest setup looks like right now:
Cert list on the puppet-master server:
+ "img01.lgwp.com.com" (SHA256) (omitted)
+ "img02.lgwp.com" (SHA256) (omitted)
+ "puppet.lgwp.com" (SHA256) (omitted) (alt names: "DNS:puppet.lgwp.com")
/etc/puppet/manifest/site.pp:
import "test"
import "nodes"
Exec { path => "/usr/bin:/usr/sbin/:/bin:/sbin" }
/etc/puppet/manifest/nodes.pp:
import "test"
node "imageserver" {
include "tempfile"
}
node 'img01.lgwp.com' inherits imageserver {
}
node 'img02.lgwp.com' inherits imageserver {
}
/etc/puppet/modules/test/manifests/test.pp:
class test {
package { test: ensure => latest }
file { "test_file":
path => '/tmp/test_file.txt',
ensure => present,
mode => 0755,
content => 'hola world',
source => "puppet:///modules/test/test_file",
require => Package["test"],
}
}
Don't use import. Just don't.
Remove the existing import statements and change the manifest setting in your puppet.conf to include all files in /etc/puppet/manifests.
[main]
manifest=/etc/puppet/manifests/
include tempfile makes no sense either, unless you have a tempfile module. Try
include test
Other classes in the test module should be named test::something and can also just be included. Puppet locates the manifests in the according modules. There is literally no need to use import anymore.