Develop Reference

Vite build: Don't perform typecheck on modules that have been included via the "module" package.json param

I am transitioning my application from Webpack to Vite and I have this custom component library that uses typescript and includes many #types/library-name libraries.
I also have the main frontend repository which I am currently migrating to Vite. It uses this component library.
The problem is that Vite couldn't import this component library at first since there was no "module" property defined in the package.json file of my library. I defined it and pointed it to build/index.ts.
Now, when I include this library from my frontend and perform typecheck using tsc --noEmit, it gives a lot of errors that should've been thrown during the library build, i.e. errors about some modules not being defined, like for example library imports pluralize and during the build of the frontend it throws the following error:
frontend-repo/node_modules/pluralize/pluralize.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/pluralize` if it exists or add a new declaration (.d.ts) file containing `declare module 'pluralize';
How do I make it so that the type resolution for my component library stays local to the library build?

How to use require with javascript browser

I am using react and need to use modules, hence I have to use require.
I found a way to use require in JS browser which is BROWSERIFY.
I installed browserify and diffie-hellman(module I want to use) by npm.
dh.js
var crypto = require('diffie-hellman/browser');
After executing the following command
browserify dh.js -o bundle.js
The bundle file has been created with the commands inside.
now, how to import this bundle.js inside the react app to use the module? I tried to use
import "bundle.js"
but the compiler shows me those errors inside the bundle
Line 6240:82: Unexpected use of 'self'
no-restricted-globals Line 6240:105: Unexpected use of 'self'
no-restricted-globals
shall I import bundle or dh instead?
sorry it's my first time I use browserify.

Webpack - Alias folder for use within installed package

I have some reusable React components published to NPM, that I am installing and using within my React application. Is it possible for me to set an alias in my React app, that can be used within these NPM components? For example, I want to allow the use of a folder common, which is within my React App, within the React components. So if I do this in my React components, it should work
import someVal from 'common';
I am bundling these React components with Webpack, and sending down the transpiled, bundled version for use within the React application. I tried setting the alias the regular way within the React app webpack config (by setting resolve.alias), but it does not work. Can this be done? Or am I approaching this incorrectly? Any suggestions would be great, thanks!
Edit: So the React components from NPM are within my node_modules folder, and it is already bundled up via it's own Webpack config. I then run these components through my React application Webpack config as well (I'm whitelisting the folder), in the hopes that the new common alias will be added there. But no luck. I keep getting a
someVal is undefined error.
My common file has the following: Ignore the logic for now (I'm only posting a part of the code)
import _myClass from '../components/MyClass';
const myClass = _myClass; // Other things are done to it
export default myClass;
In my React components Webpack bundle file (after I fixed the default import statement)
/* harmony import */ var common__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! common */ "./src/common/index.js");
...
return common__WEBPACK_IMPORTED_MODULE_25__["default"].myFunction({
...
});
This still seems to be looking for common within the React components package, and not within the React app package that I am trying to use this in.

How to set babel on create-react-app Project?

I'm doing React.js project that created by create-react-app. I use axios to connect with server, so I have to use babel-polyfill to support IE11. create-react-app doesn't have webpack.config.js file to modify 'entry', so I can't set babel.
Also I tried to insert import 'babel-polyfill'; and require('babel-polyfill'); on javascript file that using axios. But it didn't work.
How can I solve this problem?

create-react-app includes only a few polyfills to reduce the code size (ES6 polyfills are large).
If you want to add babel-polyfill without modifying webpack configs, you need to import it at the entry-point to your application, before anything else is called
// on top of your index.js
import 'babel-polyfill'

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)