We Keep Coding

can't import specific export from main file of library

I am trying to understand how authoring libraries works with webpack and while doing works:
import add from 'sample-lib/add'
trying to import anything from the main does not:
import { add, subtract } from 'sample-lib'
Here is the repo for your reference:
https://github.com/rssilvaba/sample-lib
Any ideas why I can't do that? is it because it is umd? something with my package.json? Am I exporting from main in the wrong way?
Also extra question. how could I re export all files without having to manually add all of the files to the main.js?

resolved doing:
export { default as add } from './add'
export { default as subtract } from './subtract'
export * from './others'

VueJS compile failing when importing json data

I'm trying to import a static .json file in the <script> section of a .Vue file like so import Test from '#assets/test.json'
Based on what I've read about webpack, this should work out of the box. I've also tried explicitly defining both the .json extension in webpack resolve and the json loader under loaders.
However, for me it fails with the error:
ERROR Failed to compile with 1 errors 9:14:24 AM
This dependency was not found:
* #assets/test.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Settings.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #assets/test.json
That seems to be strange as it's not a dependency I'd be able to install?
My test.json file just contains {}, but I've also tried it with the real data file and the same outcome.
Thanks in advance for any help.
Edit: Thanks to #tao for helping me figure it out on chat. The error was indeed trivial: import Test from '#assets/test.json' should have been import Test from '#/assets/test.json'

For typescript support you have to add
"resolveJsonModule": true,
to compilerOptions in tsconfig.json.
And add
declare module '*.json' {
const value: unknown;
export default value;
}
to your shims-vue.d.ts
In Javascript, you don't need to do anything special. This should work:
test.json:
{
"foo": "bar"
}
Your *.vue SFC file:
<script>
import * as json from './test.json';
export default {
data: () => ({
json
}),
mounted() {
console.log(this.json)
}
}
</script>

Is there a way to automatically import 'cssuseragent' (or any non-exported) package in webpack?

Current cssuseragent package (2.1.31) doesn't export anything. There is only one variable named cssua. I want import/require it into my project with webpack.
I have tried to adding export keyword before cssua variable and it worked. But this is not a good solution. If anybody else upgrade the package in future, she/he won't know that s/he must do this.
In CLI:
npm i cssuseragent
Then I export cssua variable:
//'export' was not exist, I added it
export var cssua = (
//some code here
)(/*some arguments here*/)
Then I can import:
import { cssua } from 'cssuseragent';
Is there any way to say "If you resolve to this file in import/require, get it as 'custom-name' with its all content" to webpack with a loader or plugin? Because changing source code of a 3rd party module is not a good way. Also it may not be as easy as this every time, the module can be huge. And I want a generic way to do this, maybe like adding just the path of module.

I don't know of a webpack plugin that does that, but you can
// customExport.js
import { cssua } from 'cssuseragent';
export default { cssua };
in another file
// other_file,js
import customExport from "customExport.js";

Use sass variables into js files create-react-app

I have some color defined variables into _colors.scss file.
$color-succcess: #706caa;
$color-error: #dc3545;
I would like to also use them into some styled react components react-table into my js file.
I used the following article https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript as reference and many others like it but I cannot get it to work.
I export the colors from my scss file:
:export {
colorSuccess: $color-succcess;
colorError: $color-error;
}
and I import them into my js file:
import colors from "../../styles/_colors.scss";
but they are probably not loaded right.
How can I configure the create-react-app generated code to achieve the same thing as the guy in the article does with webpack.

I have faced a similar issue, and it took me a bunch of tries to get the desired result. If you already have node-sass installed, try the following.
First of all, try importing the main scss file without the underscore, i.e. instead of ../../styles/_colors.scss, try ../../styles/index.scss or whatewer your main file is.
Secondly, keep track of the variable names. This code DID NOT work:
:export {
$textBlack: $text-black;
}
while this one works perfectly
:export {
textBlack: $text-black;
}
For some reason it does not like the dollar sign in the variable name, though it is a valid JS variable name. Your case should work fine

Try to reproduce these steps:
1. Enable sass in CRA by installing node-sass.
npm i --save-dev node-sass
2. Create a sass file example.scss.
$hello: 'world';
:export {
my-var: $hello;
}
3. Import the sass into your react component.
import React from 'react';
import Example from './example.scss';
export default () => Example.hello;

If you are using CRA version 4, there is a known issue where this feature will not work unless you define your scss file as <name>.modules.css.
See https://github.com/facebook/create-react-app/issues/10047#issuecomment-724227353 for details.

install the sass in the project if you didn't install that.
yarn add --dev node-sass
create a file and use this rule to name it => filename.module.scss ( for example variables.module.scss )
$color-succcess: #706caa;
$color-error: #dc3545;
:export {
colorSuccess: $color-succcess;
colorError: $color-error;
otherColor: #786539;
}
and import it in the component like below:
import colors from "../../styles/_colors.module.scss";
const TheComponent = () => {
console.log(colors.colorSuccess)
return <h1>The Component</h1>
}
export default TheComponent
// output in console : #706caa

In order to load SCSS files in CRA you need to add node-sass as your dependency to package.json. I've tested it out and after adding it to clean CRA project and importing colors object (using :export, like in the code you provided) works as expected.

Import ace code editor into webpack, es6, typescript project

I'm trying to build a web component that will host the ace editor. The trouble is that I don't find enough information on how to import the module and set the types. The code bellow was working just fine using simple <script> tags and global vars.
So far this is what I have:
npm install ace-code-editor --save
npm install #types/ace --save-dev
code-editor.cmp.ts
// Error: [ts] File '.../node_modules/#types/ace/index.d.ts' is not a module.
import * as ace from 'ace';
export class CodeEditorCmp extends HTMLElement {
// DOM
private editor: AceAjax; // How do I import the type. What type to use?
constructor() {
super();
}
connectedCallback() {
this.initCodeEditor();
}
initCodeEditor(){
this.editor = ace.edit("editor-vsc");
// How do I import the editor themes?
this.editor.setTheme("ace/theme/xcode");
// How do I import the editor modes?
var JavaScriptMode = ace.require("ace/mode/html").Mode;
this.editor.session.setMode(new JavaScriptMode());
this.editor.getSession().setTabSize(4);
this.editor.getSession().setUseSoftTabs(true);
this.editor.getSession().setUseWrapMode(true);
this.editor.setAutoScrollEditorIntoView(true);
// Update document
this.editor.getSession().on('change', this.onEditorChange);
}
onEditorChange(){
}
}
require('./code-editor.cmp.scss');
window.customElements.define('editor-vsc', CodeEditorCmp);

For those who don't want to use the brace module, I saw that my issue was that I was importing the wrong version of ace. Once installed, make sure to import from src-noconflict. The noconflict version uses ace.require which seems to play a lot more nicely than the other iterations that use require.
I would suggest that you do the following:
npm install ace-builds --save
npm install #types/ace --save-dev
Afterwards in your file just import the noconflict like below:
import * as ace from 'ace-builds/src-noconflict/ace';
This will result in a variable ace being defined. You will then be able to reference methods and properties of ace as normal, such as ace.edit()
You can get more information about the different versions of ace check out the git page.

After a lot of digging I managed to find brace module. It's a browserify wrapper for ace. Fortunately it works straight away with webpack. No need to use separate types, they come prepackaged.
import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
export class CodeEditorCmp extends HTMLElement {
private editor: ace.Editor;
initCodeEditor(){
this.editor = ace.edit('javascript-editor');
this.editor.getSession().setMode('ace/mode/javascript');
this.editor.setTheme('ace/theme/monokai');
//...
}
//...
}