We Keep Coding

Error during npm run build - (plugin rpt2) Error: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

[my error during run command] (https://i.stack.imgur.com/cPnbq.png)
my rollup.config.js file:
Expected build Dist. file for my library but facing this error.
#build

The "�" character indicates that the file was not encoded properly. Try opening the file in a text editor and making sure that it's saved with a UTF-8 encoding.
You may need to update or implement Babel configuration to include the necessary plugins for importing non-JavaScript files.
If you already have, install npm install --save-dev babel-runtime babel-plugin-transform-runtime, then add the babel-plugin-transform-runtime plugin to your Babel configuration
{
"plugins": [
"#babel/plugin-transform-runtime"
]
}

Ignore or replace dependencies' imports when bundling with Rollup

I'm bundling a JS library using Rollup. This lib has a dependency on #tensorflow/tfjs-core.
On tfjs's code, there's a function that fetches a URL. If it's in the browser environment, it uses the global fetch function; if it's not, it tries to import node-fetch.
Something among these lines:
fetch(path: string, requestInits?: RequestInit): Promise<Response> {
if (env().global.fetch != null) {
return env().global.fetch(path, requestInits);
}
if (systemFetch == null) {
systemFetch = require('node-fetch');
}
return systemFetch(path, requestInits);
}
My library is made to run in the browser, so it always uses the global fetch function. However, Rollup still bundles node-fetch's require in my lib's assets.
It should not be an issue, but some consumers are reporting errors when using the library in a React project that uses webpack:
Failed to compile.
./node_modules/[my lib]/index.js
Cannot find module: 'node-fetch'. Make sure this package is installed.
You can install this package by running: npm install node-fetch.
Question is: is there some way I can tell Rollup not no bundle this?
I thought about replacing the require('node-fetch') by undefined after the bundle is generated, but it feels like a dirty hack. Any other sugestions?
PS: I believe marking node-fetch as external on consumer projects would fix the issue, but since I do not use node-fetch in my lib, it would be nice to remove it from final output.

Other package managers can include or exclude files based on the environment, test, development, production, etc.
There is any number of ways of implementing this, even going so far as
# Makefile
ENVIRONMENT ?= test
ROLLUP = $(which rollup)
ENVSUBST = $(which envsubst)
rollup.config.js: src/$(ENVIRONMENT)
${ENVSUBST} < $# > $^
${ROLLUP} $^ -o $(ENVIRONMENT).js
If you created files named after your environments, you could compile them using
make -e environment=browser
I don't expect my code to work, only to express ideas.

There is this loc which is used to exclude node-fetch from the bundle. You could consider a similar approach in your rollup configuration. (I think) If you add that, node-fetch will/should not be a part of your minified library.

Node-SASS source maps not working with React-JS

I am trying to use SASS with REACT
Dummy GITHUB : https://github.com/bansalvks/react-poc-collection/tree/master/scss-with-react
The problem I am facing is that the source maps are not working.
I am using node-sass-chokidar and using the following script to run the utility
node-sass-chokidar --include-path ./node_modules/ ./src -o ./src --output-style=expanded --source-map=true --source-map-root=true --watch
As you can see in the screen shot below the file is not appearing

This work with create-react-app but you can try in your react setup
Try this:
From "Dummy" Github webpage I found this:
https://github.com/facebook/create-react-app/issues/5707
The following did work for me:
1.) open node_modules\react-scripts\config\webpack.config.js
2.) replace "isEnvProduction" with "isEnvDevelopment" for the css-loader, css-module loader, sass loader and sass module loader
(between lines 443 - 500)
3.) start development process with "npm start"
So simply, navigate to node_modules\react-scripts\config\webpack.config.js
Between lines 443-500 search for:
css-loader
css-module
loader
sass-loader
sass-module-loader
and replace isEnvProduction to isEnvDevelopment
https://user-images.githubusercontent.com/11925409/50423483-4b986900-0856-11e9-80bb-7f7f331e17fd.png
I have tried that and source maps now are working in chrome developer tools

Make Webpack 1.13 work with ES6 vendor

I am trying to add some external dependency cryptowatch-embed js to my webpack project (of version 1.13.3) as vendor. The concern is that this dependency is written in ES6 style and js file ends with something like export default Embed;. When I run my webpack-dev-server and open the browser the console shows me Uncaught SyntaxError: Unexpected token export on this line. I suppose that webpack does not bundle ES6 vendor properly, but I dot'n have any ideas what should be done to fix this error. So the main question is how can I make webpack work with /node_modules/cryptowatch-embed/src/main.js that is written in ES6?

Javascript error in simple Aurelia ASP.Net 5.0 RC1 Setup

I am attempting to setup a very basic Aurelia project in ASP.Net 5.0 RC1. I am getting the following JavaScript error after doing a basic initial setup. I am using TypeScript.
Unhandled promise rejection Error: XHR error (404 Not Found) loading http://localhost:5392/core-js.js
Error loading http://localhost:5392/core-js.js as "core-js" from http://localhost:5392/jspm_packages/npm/aurelia-loader#1.0.0-beta.1/aurelia-loader.js
at o (http://localhost:5392/jspm_packages/system.js:4:12694)
at XMLHttpRequest.s.onreadystatechange (http://localhost:5392/jspm_packages/system.js:4:13219)
(anonymous function) # es6.promise.js:138
The setup I did is as follows.
Create Empty ASP.Net 5.0 template.
Install Microsoft.AspNet.StaticFiles from nuget and set up app.UseFileServer.
From git bash run jspm init with the following settings.
Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:./wwwroot
Enter jspm packages folder [wwwroot\jspm_packages]:
Enter config file path [wwwroot\config.js]:
Configuration file wwwroot\config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:typescript
From git bash run jspm install aurelia-framework and jspm install aurelia-bootstrapper.
Add the index.html, app.html, and app.ts file from the aurelia docs.
Fire up IIS Express, load page, get error.
Is there a step I am missing in this setup?

It seems like this is a known issue. The fix is somewhat simple. If you add a core-js mapping at the top of the map section in config.js, it fixes it.
For example,
map: {
"core-js": "npm:core-js#1.2.6",
// other mappings
}