I want to use xml-js library with rollup bundler. After simple import I got an error, that 'json2xml' is not exported by node_modules\xml-js\lib\index.js
I tried to fix it with latest version of commonjs rollup plugin. After trying to build, I got this exception
[!] TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at new MagicString (C:\Users\x\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:580:34)
at Module.setSource (C:\Users\x\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:10038:28)
at ModuleLoader.addModuleSource (C:\Users\maxim\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:18158:20)
rollup.config.js looks very simple
import typescript from 'rollup-plugin-typescript2';
import json from '#rollup/plugin-json';
import nodeResolve from '#rollup/plugin-node-resolve';
import common from "#rollup/plugin-commonjs"
export default {
input: ['./main.ts'],
plugins: [
nodeResolve(),
common(),
typescript({}),
json(),
],
output: {
dir: 'output',
format: 'iife'
},
}
After intalling same rollup plugins in empty project, I got same error.
Do you have any suggestions?
+-- xml2js#0.4.23
+-- rollup#2.26.10
+-- #rollup/plugin-json#4.1.0
+-- rollup-plugin-typescript2#0.29.0
+-- #rollup/plugin-commonjs#16.0.0
I fixed the issue by removing global npm packages (C:\Users\x\AppData\Roaming\npm and C:\Users\x\AppData\Roaming\npm-cache) aswell as local node_modules and installing latest versions of all needed packages from scratch.
Related
I'd like to write some server-side AssemblyScript that uses the WASI interface to read a file and process the contents.
I know that AssemblyScript and the ByteCode Alliance have recently had a falling out over the "openness" of the WASI standard, but I was hoping that they would still play nicely together...
I've found several AssemblyScript tools/libraries that appear to bridge this gap, and the one that seems the simplest to use is as-wasi. After following the installation instructions, I'm just trying to run the little demo app.
All the VSCode design time errors have disappeared, but the AssemblyScript compiler still barfs at the initial import statement.
import "wasi"
import { Console, Environ } from "as-wasi/assembly";
// Create an environ instance
let env = new Environ();
// Get the HOME Environment variable
let home = env.get("HOME")!;
// Log the HOME string to stdout
Console.log(home);
Running npm run asbuild gives.
$ npm run asbuild
> file_reader#1.0.0 asbuild
> npm run asbuild:debug && npm run asbuild:release
> file_reader#1.0.0 asbuild:debug
> asc assembly/index.ts --target debug
ERROR TS6054: File '~lib/wasi.ts' not found.
:
1 │ import "wasi"
│ ~~~~~~
└─ in assembly/index.ts(1,8)
FAILURE 1 parse error(s)
The file ~lib/wasi.ts does not exist and creating this file as a softlink pointing to the index.ts in the ./node_modules/as-wasi/assembly/ directory makes no difference.
Since the library is called as-wasi and not wasi, I've tried importing as-wasi, but this also fails.
I've also tried adapting tsconfig.json to include
{
"extends": "assemblyscript/std/assembly.json",
"include": [
"../node_modules/as-wasi/assembly/*.ts",
"./**/*.ts"
]
}
But this also has no effect.
What is causing asc to think that the required library should be in the directory called ~lib/ and how should I point it to the correct place?
Thanks
Your question threw me in a bit of a rabbit hole, but I think I solved it.
So, apparently, after the wasi schism, AssemblyScript added the wasi-shim repository, that you have to install as well:
npm install --save wasi-shim
The import "wasi" is no longer necessary after version 0.20 of AssemblyScript according to the same page, so you have to remove that import entirely. Also, be sure to add the extends to your asconfig.json, as recommended in the same wasi-shim page. Mine looks like this:
{
"extends": "./node_modules/#assemblyscript/wasi-shim/asconfig.json",
"targets": {
"debug": {
"outFile": "build/debug.wasm",
"textFile": "build/debug.wat",
"sourceMap": true,
"debug": true
},
"release": {
"outFile": "build/release.wasm",
"textFile": "build/release.wat",
"sourceMap": true,
"optimizeLevel": 3,
"shrinkLevel": 0,
"converge": false,
"noAssert": false
}
},
"options": {
"bindings": "esm"
}
}
It is just the generated original asconfig.json plus that extends.
Now the things got interesting. I got a compilation error:
ERROR TS2300: Duplicate identifier 'wasi_abort'.
:
1100 │ export function wasi_abort(
│ ~~~~~~~~~~
└─ in ~lib/as-wasi/assembly/as-wasi.ts(1100,17)
:
19 │ export function wasi_abort(
│ ~~~~~~~~~~
└─ in ~lib/wasi_internal.ts(19,17)
So I investigated, and it seems that as-wasi was exporting a symbol that was the same as a symbol exported by wasi_shim. No biggie, I went into node_modules/as-wasi/, and I renamed that function into as_wasi_abort. I did this also with the invokations of the function, namely three instances found in the package.json from as-wasi:
{
"asbuild:untouched": "asc assembly/index.ts -b build/untouched.wasm -t build/untouched.wat --use abort=as_wasi_abort --debug",
"asbuild:small": "asc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --use abort=as_wasi_abort -O3z ",
"asbuild:optimized": "asc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --use abort=as_wasi_abort -O3",
}
Having done all this, the package compiled and the example from Wasm By Example finally worked.
Your code should compile now, and I will try to make a pull request to all the places necessary so that the examples are updated, the code in as-wasi is updated, and so that nobody has to go through this again. Please comment if there are further problems.
Edit: It seems that I was right about the wasi_abort function being a problem. It is actually removed on the as-wasi repo, but the npm package is outdated. I asked in my pull request for it to be updated.
THE SITUATION:
I am implementing unit-testing in my Vue app, using vue-test-utils with Jest configuration.
When I am testing simple components everything is fine. But when I am testing components that import other dependencies, the test fails.
CONFIGURATION:
Vue version: 2.5.17
#vue/test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
babel-jest: 23.0.1
THE ERROR MESSAGE:
The exact error message depends on which dependency I am importing.
For example with epic-spinners the error is:
SyntaxError: Unexpected token import
With vue-radial-progress the error is:
SyntaxError: Unexpected token <
HOW TO REPRODUCE:
Make a fresh install of vue (with Jest as unit testing suite)
Run the example test, it should pass
Install a dependency (for example: npm install --save epic-spinners)
Import the dependency inside the HelloWorld component
Run the test again (without changing anything)
If I do these steps, the test fails with the above error message.
THE QUESTION:
How can I handle dependencies import in vue-test-utils / Jest ?
The problem was that some modules may not be compiled correctly.
The solution is to use the transformIgnorePatterns property of the Jest settings. That is, from the docs:
An array of regexp pattern strings that are matched against all source
file paths before transformation. If the test path matches any of the
patterns, it will not be transformed.
In my case, this is how I have solved the issue:
transformIgnorePatterns: [
"node_modules/(?!epic-spinners|vue-radial-progress)"
],
EDIT:
This is my jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
"node_modules/(?!epic-spinners|vue-radial-progress)"
// "node_modules/(?!epic-spinners)",
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
In addition to #FrancescoMussi's answer, after editing my jest.config.js, in case you get the error: jest-transform-stub not found, just install it. in my case I didn't had installed jest-transform-stub and jest-serializer-vue. after installing those my tests started working.
npm install --save-dev jest-serializer-vue
https://www.npmjs.com/package/jest-serializer-vue
and
npm install --save-dev jest-transform-stub
https://www.npmjs.com/package/jest-transform-stub
In addition to #FrancescoMussi's solution, if it is still not working for you, make sure your Babel config is in the correct place as per the Jest docs
I had moved my Babel config to package.json which Babel wasn't detecting due to Vue CLI installing Babel 7. Moving Babel config back to babel.config.js resolved the issue for me.
Trying to use howler.js (https://github.com/goldfire/howler.js#documentation) in a Controller.
There is no addon for Howler but it exists as a npm package.
I did an npm install and subsequently got an update in package.json like this :
"dependencies": {
"bootswatch": "^4.0.0",
"howler": "^2.0.9",
"npm": "^5.8.0"
}
In the controller I added this import
import {Howl} from 'howler';
But when I try to execute the code I get a runtime error
Could not find module 'howler' imported from 'foo/controllers/bar'
When I do a find for *howl* this is what I find
./node_modules/howler/dist/howler.js
./node_modules/howler/dist/howler.core.min.js
./node_modules/howler/dist/howler.min.js
./node_modules/howler/dist/howler.spatial.min.js
./node_modules/howler/src/howler.core.js
./node_modules/howler/src/plugins/howler.spatial.js
Should my import have a path to these files as part of it ? If so which one ?
Would appreciate some advice about whether there's something obviously wrong in what I've done there.
Emberjs version is 3.0.
Thanks
You can import the howler.js inside your ember-cli-build.js like this
app.import('node_modules/howler/dist/howler.min.js')
Then you can use Howl as global variable inside you ember app.
I found this issues in the official, but it looks like they refused to answer.
So I can only ask questions on SO.
Here is my Error&Warning Log:
WARNING in ./~/aws-sdk/lib/util.js
Critical dependencies:
40:30-45 the request of a dependency is an expression
43:11-53 the request of a dependency is an expression
# ./~/aws-sdk/lib/util.js 40:30-45 43:11-53
WARNING in ./~/aws-sdk/lib ^\.\/.*$
Module not found: Error: Cannot resolve directory '.' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
# ./~/aws-sdk/lib ^\.\/.*$
WARNING in ./~/aws-sdk/lib/api_loader.js
Critical dependencies:
13:15-59 the request of a dependency is an expression
104:12-46 the request of a dependency is an expression
108:21-58 the request of a dependency is an expression
114:18-52 the request of a dependency is an expression
# ./~/aws-sdk/lib/api_loader.js 13:15-59 104:12-46 108:21-58 114:18-52
WARNING in ./~/aws-sdk/lib/region_config.json
Module parse failed: /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib/region_config.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "rules": {
| "*/*": {
| "endpoint": "{service}.{region}.amazonaws.com"
# ./~/aws-sdk/lib ^\.\/.*$
ERROR in ./~/aws-sdk/lib/api_loader.js
Module not found: Error: Cannot resolve module 'fs' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
# ./~/aws-sdk/lib/api_loader.js 1:9-22
ERROR in ./~/aws-sdk/lib/services.js
Module not found: Error: Cannot resolve module 'fs' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
# ./~/aws-sdk/lib/services.js 1:9-22
There are three types:
Cannot resolve module 'fs'
I only need to install fs can solve this.
need an appropriate loader
Well, this will need to install json-loader, and set it in webpack.config.js, but also can solve.
Critical dependencies
Module not found: Error: Cannot resolve directory '.'
I webpack newbie.So, i don't know how to solve this.
Will someone help me? thanks.
UPDATE:
Module not found: Error: Cannot resolve directory '.'
that is my fault, config file's extensions missing a .
I found this blog post that fixed it for me.
Essentially you need to import the built version of the library.
All credit goes to the author. Here is the code:
require('aws-sdk/dist/aws-sdk');
var AWS = window.AWS;
ES6 version:
import 'aws-sdk/dist/aws-sdk';
const AWS = window.AWS;
config:
module: {
noParse: [
/aws/
]
}
usage:
window.AWS to the reference of the global AWS object.
Using the noParse method should work if you are creating a node package, as this is setting webpack to not apply any parsing/loaders. This did not work for me when creating a umd formatted output file/library.
To create a umd formatted library I had to use loaders to Browserify aws-sdk and handle json files.
Install the loaders:
npm install json-loader --save-dev
npm install transform-loader brfs --save-dev
Webpack Config:
module: {
loaders: [
{ test: /aws-sdk/, loaders: ["transform?brfs"]},
{ test: /\.json$/, loaders: ['json']},
]
},
output: {
library: 'LibraryName',
libraryTarget: 'umd'
},
resolve: {
extensions: ['', '.js']
}
Replace LibraryName with you own namespacing. Currently the library would be used through a constructor as follows:
var libObj = new LibraryName();
AWS SDK added support to webpack starting from version 2.6.1, please see Using webpack and the AWS SDK for JavaScript to Create and Bundle an Application – Part 1 blog post describing how to require aws-sdk into webpack bundle.
use npm install json-loader --save-dev
add the following code to webpack.config.js
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /.json$/,
loaders: ['json']
}]
}
Just import * as AWS from 'aws-sdk'
Notice that we specified a loader to tell webpack how to handle importing JSON files, in this case by using the json-loader we installed earlier. By default, webpack only supports JavaScript, but uses loaders to add support for importing other file types as well. The AWS SDK makes heavy use of JSON files, so without this extra configuration, webpack will throw an error when generating the bundle.
Update(2015-10-20):
aws-sdk fix this. i can use it from npm.
thanks, aws-sdk team.
I'm trying to import ic-modal into an ember-cli project, but for some reason I keep getting this error:
Uncaught Error: <ic-test#view:toplevel::ember278> Handlebars error: Could not find property 'ic-modal-trigger' on object (generated application controller).
I have the following import statements:
app.import('vendor/ic-styled/main.js');
app.import('vendor/ic-modal/dist/named-amd/main.js', {
'ic-modal': [
'ModalComponent',
'ModalFormComponent',
'ModalTriggerComponent',
'ModalTitleComponent',
'modalCss'
]
});
Any help with this would be great?!
In Brocfile.js:
app.import('bower_components/ic-styled/main.js');
app.import('bower_components/ic-modal/dist/named-amd/main.js');
Replace bower_components with vendor in the above if you're still using an older version of Ember-CLI.
Then use:
import ICModal from 'ic-modal';
// Can now utilise ICModal, ICModal.ModalForm etc
The Broccoli build and ES6 module transpiler should take care of the rest.
(Side-note: when using Coffeescript, put the import statement in backticks as the standard Coffeescript compiler doesn't handle the ES6 syntax.)