Develop Reference

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.

Webpack - Import node module as though it was a normal folder

I have a JS app which is importing a custom node_module with helper functions etc. I'd like to import these functions using ES6 imports like so:
import exampleHelper from 'mycustommodule/helpers/foo'
and have Webpack just import this file as though it was any other include in the app. ie Use the same babelrc, webpack config, package.json as the existing app.
At the moment none of the imports in the custom module are resolving.
I've looked into Webpack externals but I can't work out if they are what I'm looking for. Any advice would be appreciated.

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';

Accessing meteor application's imports directory from a package?

Meteor application directory layout:
imports/
api/
collections/
MyCollectionFile.js
packages/
mypackage/
mypackageMain.js
I can export anything from the package file and use it inside the application, that's ok. But how can I use "import" in the package, like the other way around?
// mypackageMain.js
if (Meteor.isServer) {
require ('/imports/api/collections/MyCollectionFile.js');
};
OR
import '/imports/api/collections/MyCollectionFile.js';
I tried using the path '../../imports/api/collections/MyCollectionFile.js' but it simply does not work. I can not access this file from a package.
I get the following Error for both the import and the require:
W20160618-23:25:59.486(3)? (STDERR) Error: Cannot find module '../../imports/api/collections/MyCollectionFile.js'
W20160618-23:25:59.487(3)? (STDERR) at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:85:1)

Figured out that this was not possible.
However, moving the collections to a package and exporting them would make the collections available to other packages and the application.

I've also been running in to this issue and have found two solutions, both are sub-par though.
Install the thing you want to import as a npm package. $npm install --save ./imports/<the thing>.
Use npm link to create a link to the thing you want to import.
Both solutions require that you have a package.json in the directory you want to import and both won't be transpile the code and just run it against the provided version of node.
A possible solution for the transpile issue would be using a loader plugin, or somehow provide a additional configuration to System.js to tell it to transpile the code on import.

Using node modules with Rollup to build web client

I'm trying to build a react application using rollup instead of browserify and babel. I realize I need to use the rollup-plugin-babel to transpile jsx, but when I tell rollup the format is iife, the final page loads with an error:
Uncaught ReferenceError: React is not defined
What do I need to add to the rollup.config.js to include the node modules I've installed in package.json in my final build?

Two options:
Include React as a separate <script> tag before your app bundle
Include rollup-plugin-node-resolve in your config file, to pull in dependencies from your node_modules folder.
If you take the second route you'll also need rollup-plugin-commonjs (to convert the CommonJS module into an ES module). I think you would also need to add import * as React from 'react' to each module that contained JSX, otherwise you'll continue to get the ReferenceError.
Note: you might be able to use rollup-plugin-buble to transpile JSX. It's similar to the Babel plugin but much faster (though it doesn't transpile every ES2015 feature)