Develop Reference

Vue 3 yarn serve stuck at 42% when importing external js file

Vue 3 yarn serve stuck at 42% when I try to import an external js file into main.ts.
This is what causes the issue:
main.ts
import '#/assets/js/jquery.min.js';
No error just stuck at:
42% building 267/276 modules 9 active
/Users/mark/Documents/workspace/testapp/test-web/node_modules/html-entities/lib/surrogate-pairs.js
When I try to import any external js file I have the same issue.
As there is no error output as such, can anyone tell me what I'm doing incorrectly?

Did you put the jquery javascript file in that folder?
Try to add the dependence using package.json and import it like this example
https://www.npmjs.com/package/jquery
I see that you're using typescript because of your main.ts file and usually the app cannot compile js files when you are using typescript in your project

How to get the typescript compiler to find bokeh's "*d.ts" files

I have recently moved from Bokeh's nice, inline extension framework to their npm based out of line build system, I am trying go get my extension to build, but Bokeh installs all of the TypeScript *.ts.d in a separate tree, for example:
bash$ find node_modules -name 'serialization.*'
node_modules/#bokeh/bokehjs/build/js/types/core/util/serialization.d.ts
node_modules/#bokeh/bokehjs/build/js/lib/core/util/serialization.js
bash$
In the inline build system this file is imported like import { is_NDArray_ref, decode_NDArray } from "core/util/serialization".
Is there a way using tsconfig.json options to allow my extension files to continue to use core/util/serialization for import and find both the JavaScript and the TypeScript description with Bokeh's node installation layout.
The only dependency in my package.json is:
"dependencies": {
"#bokeh/bokehjs": "^2.3.1"
},
Even if I change the import paths to use .../lib/..., TypeScript does not find the *.d.ts files, and if I change the import path to use .../types/... if finds the types and compiles but the linker fails to find the JavaScript. I used Bokeh's bokeh init to create my build sandbox... Thanks for any advice...

I found the answer in a Bokeh ticket. In a nutshell, adding:
"paths": {
"#bokehjs/*": [
"./node_modules/#bokeh/bokehjs/build/js/lib/*",
"./node_modules/#bokeh/bokehjs/build/js/types/*"
]
}
to the tsconfig.json file in the compilerOptions property allows imports like:
import { is_NDArray_ref, decode_NDArray } from "#bokehjs/core/util/serialization"
which seems very reasonable.

Allow auto import my React library on vscode

I'm trying to do a library of components for React and publish on npm using webpack and babel to compile to Es5.
Almost everything worked, but for some reason, the project that consumes this lib cant auto import their components
I have a project on github with the setup I used:
https://github.com/dattebayorob/react-loading
//webpack.config.js
https://github.com/dattebayorob/react-loading/blob/master/webpack.config.js
//.babelrc
https://github.com/dattebayorob/react-loading/blob/master/.babelrc
//package.json
https://github.com/dattebayorob/react-loading/blob/master/package.json
I'm expecting to import components from my lib with 'CTRL+space' when typing then
Now, I can import from my lib manualy with import { Component } from 'my-react-lib'

Sometimes, when using Typescript in VSCode, you have to run the Typescript: Restart TS Server command in your command palette for auto import to work after creating new files. It's a bug.

On dattebayorob/react-loading/index.d.ts try:
export * from './src/components'

In package.json, you have "main": "./index.d.ts", but that's not a valid JS file, as it does not contain actual code, only type definitions.
In a library, usually you need to have an src/index.js file that imports / exports all components and in package.json you add the build artifact as main: "main": "dist/index.js".
Also, don't forget to explicitly specify the files: ["dist"] attribute in package.json so the src folder is not downloaded when your package is installed.

Using reactstrap with Next.js

I am creating a React app using Next.js and am trying to use components provided by reactstrap.
The issue I seem to be running into seems to involve importing the CSS file named bootstrap/dist/css/bootstrap.min.css as the reactstrap guide says to do.
The error I am seeing is Error in bootstrap/dist/css/bootstrap.min.css
Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.
Does anyone know what I have to do to make this work correctly? I am a new web developer so sorry if I am missing anything obvious.
Thanks!

EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin:
npm install --save #zeit/next-css
Then create the next.config.js file in your project root and add the following to it:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({/* my next config */})
You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:
// ./index.css
div {
color: tomato;
}
Then create the pages folder with an index.js file. Then you can do stuff like this in your components:
// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>
You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.
Next.js < version 7
Next.js doesn't come with CSS imports by default. You'll have to use a webpack loader. You can read about how this works here: https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules.
Next.js also has plugins for CSS, SASS and SCSS. Here is the plugin for CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css. The documentation for that plugin makes it fairly simple:
You create the _document file in pages/.
You create the next.config.js file in the root.
Using the code snippets from the documentation should set you up to import CSS files.
You'll need at least version 5.0. You can make sure you have the latest Next.js installed: npm i next#latest.

If you are still getting the error:
Unexpected token (6:3) You may need an appropriate loader to handle this file type.
try this in your next.config.js:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
Now you should be able to import styleshets from node_modules like this:
import 'bootstrap-css-only/css/bootstrap.min.css';
Note: Using Next v 8+
Background:
I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution.
It was provided by one of the core team members

Next.js 9.3 and above
As of Next.js 9.3 you can now directly import SCSS files as global stylesheets. Read more about next.js built-in SASS support here.
npm install sass reactstrap bootstrap
Index.scss
#import '~node_modules/bootstrap/scss/bootstrap';

Import from subfolder of npm package

I've been working on creating a small library of React components for use in several other projects. I am publishing the package internally (using a private GitHub repository) and then including in another project. However, when I go to import from a subdirectory of the package I am not able to do so as the paths don't match.
The projects using the package all utilize webpack to bundle/transpile code as I am trying to avoid doing any building in the component library if possible.
Directory Structure
- package.json
- src/
- index.js
- Button/
- index.js
- Button.jsx
- ButtonGroup.jsx
- Header/
- index.js
- Header.jsx (default export)
package.json
...
"main": "./src/index.js",
"scripts": "",
...
src/Button/index.js
import Button from './Button';
import ButtonGroup from './ButtonGroup';
export default Button;
export { Button, ButtonGroup};
src/index.js
Is this file actually necessary if only importing from subdirectories?
import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';
export { Button, ButtonGroup, Header };
Other Project
// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';
Example
Material-UI is a library of React components that is used by requiring in the following fashion: import { RadioButtonGroup } from 'material-ui/RadioButton. I've tried to figure out how this works for them but to no avail yet.
Similar Questions
How would I import a module within an npm package subfolder with webpack?
This is very nearly the correct approach I require, except that the import path used there involved the src/ directory, which I am trying to avoid (should be component-library/item, not component-library/src/item (which does work currently though))
Publishing Flat NPM Packages
This is exactly what I want except that I was hoping to not have a "build" phase in the package (rely on importing locations to build/transpile)
Questions
Can I skip the src/ directory somehow in the import path?
Can I skip any type of build phase in the package (so developers don't have to build before committing)?
How does a package similar to material-ui handle this?

Can I skip the src/ directory somehow in the import path?
Yes. Using the package.json "exports" field, which should be supported by Webpack in a near future (see this issue), but has already been supported by Node since Node 12 LTS following the Bare Module Specifier Resolution proposal:
package.json
...
"main": "./src/index.js",
"type": "module",
...
"exports": {
"./Button": "./src/Button/index.js",
"./Header": "./src/Header/index.js"
},
...
Now, the following code:
// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';
should be translated to:
import { Button, ButtonGroup } from 'components-library/src/Button/index.js';
which should correctly import the requested modules.
Caveat
Now, it would certainly be tempting to try a simpler version like:
...
"exports": {
"./Button": "./src/Button/",
"./Header": "./src/Header/"
},
...
so as the usual import statement
import { ... } from 'components-library/Button';
gets translated to
import { ... } from 'components-library/src/Button';
This looks nice, but it will not work in this case, because your submodules don't have each their own package.json file but rely on their index.js file to be found.
/!\ Unlike in CommonJS, there is no automatic searching for index.js or index.mjs or for file extensions.
src/index.js - Is this file actually necessary if only importing from subdirectories?
I don't think so, but you can keep it if you want.
Can I skip any type of build phase in the package?
Using the "exports" field does not require you to transpile your code.

The answer may depend on how you installed your components library. If you did it via either npm install <git-host>:<git-user>/<repo-name> or npm install <git repo url>,
You should be able to import {Button} from 'component-library/Button' as is, according to your first linked question. Similar to Node's require() resolution, Webpack should resolve subdirectories within component-library relative to component-library's entry point. You can find the docs on customizing the resolution behavior via the webpack.config.resolve property. material-ui seems to rely on resolving subdirectory imports from the module entry directory.
To distribute an ES module library, there's no need for building before distribution. However, projects such as create-react-app may need a pre-transpiled version.
Alternately, you can write import {Button} from 'components-library'.
Webpack will trace the dependencies back through each index without a fuss.

you have to install babel-plugin-module-resolver package
Specify the package relative path in your .babelrc file alias like this
{
"plugins": [
["module-resolver", {
"alias": {
"components-library": "./node_module/components-library"
}
}]
]
}
then you can import subdir of npm package like this
import { Button, ButtonGroup } from 'components-library/Button';

One of the possible solutions there is webpack aliasing system.
You can create another project, call it for example 'app-aliases', so your aliases will be reusable.
This project will has one js file with all of your packages paths:
const path = require('path');
module.exports = {
'#components': path.resolve(__dirname, 'node_modules/components-library/src'),
'#another': path.resolve(__dirname, 'node_modules/any/path/you/want'),
}
And then add it to the webpack configuration in any project which will be responsible for building/transpiling:
webpack.config.js
const appAliases = require('app-aliases');
const config = {
...
resolve: {
alias: {
...appAlises
}
}
}
In the runtime code you will be able to use it like this:
import {Button} from '#components/Button';
import {Something} from '#another'
If you are using typescript you will need to add the same aliases to the paths tsconfig property.
So answers to your questions are:
Yes, you can use any path in aliases
Yes, it is not necessary to build all of your projects
I see that now mui uses imports from directi packages (core for example), see https://material-ui.com/components/radio-buttons/ there is import Radio from '#material-ui/core/Radio';. But I hope they using re-export that I described below.
Also about node.js resolution mechanism.
When you import some library it tries to find node_modules/some-library/package.json and then main property inside it. This property should lead to your main entry point. Usually it is src/index.js (you should set it in package.json if it is no there yet). In this file you can re-export anything you want from internals file structure and will be able to use it without the full path.
Please see this repo for some examples.

I'am an angular developer never used react but what I could tell that material-ui are using monorepo where same concept exists in angular where we create one workspace and this workspace hold multiple project/packages as named in react. for more info Workspaces with Yarn
Material-ui using fake paths in tsconfig to make it appears like src folder doesn't exists this from the git you provided: tsconfig.json

This is possible but requires publishing a curated dist folder rather then the root of your project.
The whole thing is rather simple if you understand how module resolution works, and you just need a small script to prepare your distribution.
Lest I repeat all the details here, please see my answer for Importing from subfolders for a javascript package.