I am having an issue with webpack/typescript correctly resolving modules.
Consider the below structure
Project files
src/models/item.ts
Dependencies
node_modules/#common/src/models/item.ts
node_modules/#common/src/models/container.ts
The #common module contains common libraries, that each project can use and extend base on its needs.
What I am trying to accomplish is that when the container.ts imports item.ts as
import item from "models/item";
Webpack should resolve the path to the project's path.
However, I am getting the one from the #common path
Below is the relevant part from CRA's ejected webpack config and the relevant tsconfig
webpack config
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules, "./src", "node_modules/#common/src"].concat(
modules.additionalModulePaths || []
),
tsconfig.json
"paths": {
"*": ["*", "src/*", "../node_modules/#common/src/*"]
},
I would expect this to be possible.
Am I missing something?
Thanks for any help
Related
I've never published an NPM package before. All these details to generate a package seem way too complicated to my level. The only tool, that was beginner friendly, that I could find is create-react-library which recommended to switch to tsup instead.
I'm asking here to know if there's a batteries-included, most-cases-met, setup for tsup or any other tool of your recommendation for this kind of project (and I think this is a common scenario):
A React Project
Typed with Typescript
Tested with Jest
No dependencies
Exports React components
Should be public on NPM
If you want most-cases-met, batteries-included way to make a library like that then take a look at dts-cli. It will work but it will definitely be slower than tsup. I myself am in the process of switching a library with about 60 react components from dts-cli to tsup because the build time started taking too long (about a minute) on a MacBook Air M1.
Here is an example setup.
First you need to bundle each component separately. You can use a glob as an entry point in Tsup.
Keep in mind that options that works for Esbuild works for Tsup most of the time.
// tsup.config.ts
defineConfig([
{
clean: true,
sourcemap: true,
tsconfig: path.resolve(__dirname, "./tsconfig.build.json"),
entry: ["./components/core/!(index).ts?(x)"],
format: ["esm"],
outDir: "dist/",
esbuildOptions(options, context) {
// the directory structure will be the same as the source
options.outbase = "./";
},
},
Then you'll want to have a index.ts, for convenience, that expose named exports. This index is sometimes referred as a "barrel" file.
// index.ts
// the actual file is "Button.tsx" but we still want a ".js" here
export { Button } from "./components/core/Button.js";
Notice the .js extension. ESM expects explicit extensions so it's needed in the final build.
Adding the .js doesn't seem to bother TypeScript, which stills correctly recognize the type of "Button" from Button.tsx. At this point I am not sure why it works, but it does.
Transpile this index, without bundling.
// tsup.config.ts
{
clean: true,
sourcemap: true,
tsconfig: path.resolve(__dirname, "./tsconfig.build.json"),
entry: ["index.ts", "./components/core/index.ts"],
bundle: false,
format: ["esm"],
outDir: "dist",
esbuildOptions(options, context) {
options.outbase = "./";
},
},
])
Finally define your package.json as usual:
"sideEffects": false,
"type": "module",
"exports": {
".": "./dist/index.js"
},
sideEffects is a non-standard property targeting application bundlers like Webpack and Rollup.
Setting it to false tells them that the package is safe for tree-shaking.
Now import { Button } from "my-package" should work as you expect, and tree-shaking and dynamic loading at app-level become possible because "Button" is bundled as its own ES module Button.js, and the package is marked as being side-effect free.
This is confirmed by my Webpack Bundle Analyzer in a Next app:
Before (a single bundled index.js):
After (separate files means I can select more precisely my imports):
Final config available here (might be improved in the future)
I'm working on a #nrwl/nx monorepo. I want to import the folders inside the project src by the absolute paths. I tried specifying the baseUrl but didn't work. The only solution worked is, adding the path to the monorepo root tsConfig.json file as follows.
"paths": {
"*": ["apps/my-app/src/*"]
}
But, the problem is, if I have another project, I will have to add that project as well to this path. I tried something as follows.
"paths": {
"*": ["apps/*/src/*"]
}
But, this doesn't work anymore. It doesn't match the project folder name.
How can I solve this? Or, is there any better way to import by absolute paths?
I'm facing the same problem, due to organizing common DTOs and Event.ts files in the nx monorepo. I found useful to update the tsconfig.base.json with a simpler path shortcut, that allow cross app imports and at the same time mantains the options of setting an absolute path in the single apps tsconfig.json file.
Here's my base.json:
"baseUrl": ".",
"paths": {
"libs": [
"libs/"
],
"app1: [
"apps/app1/"
],
"app2": [
"apps/app2/"
],
}
Now I have a sort of absolute imports that point to app names as base:
import {CreateUserEvent} from 'libs/events/create-user.event';
This is a random file in the app1/src/app/ folder that import a file in libs folder
Folder structure is:
root ('.')
|__ app1/src/app/file_with_import.ts
|__ ...
|__ ...
|__ libs/events/create_user.event.ts
Hope it helps
I've created a React project with typescript using create-react-app version 3.4.1.
I'm trying to avoid the use of relative paths in my project. Here's a part of my project tree:
/
|_ public
|_ tests
|_ src
|____ Scenarios
|____ Components
|____c
What I basically want is to be able to to do something like import '#components/c'. I've tried to add this part to my tsconfig.json file:
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"tests": ["tests/*"],
"public": ["public/*"],
"#components/*": ["src/Components/*"],
"#Scenarios/*": ["src/Scenarios/*"],
},
...
}
}
But every time I'm starting my app using yarn start my tsconfig deletes this part of my code (eveything but my "baseUrl" part). As far as I know since version 3 of react-create-app, solved this problem partially with enabling baseUrl property to affect the imports' root dir. But I couldn't find anywhere a working solution to set absolute paths from tsconfig path directory. The partial solution doesn't work for me as I'm probably going to import stuff from public directory.
I did try this solution from last year but it wouldn't work for me. Did anyone manage to get this or any other solution working?
Ideally the solution will enable me to still use create-react-app and not to use other packages but of course any solution would work.
you can do it with your solution by add tsconfig.extends.json and use craco or any library to custom webpack. This is my craco.config.js:
const path = require('path')
module.exports = {
webpack: {
alias: {
src: path.resolve(__dirname, './src/')
}
}
}
I have a question or problem.
I'm using React v.16 so when I create a project I did with create-react-app that webpack is already preconfigured. And I want work with ol-cesium, and in npmjs I see that I have to:
create an alias to the goog directory. With webpack:
resolve: {
alias: {
'goog': path_to_goog,
}
}
If I dont create a webpack file show me this error:
./node_modules/olcs/AbstractSynchronizer.js
107:22-35 "export 'getUid' (imported as 'olBase') was not found in 'ol/index.js'
How can solve it??? And what is path_to_goog???
EDIT
Thanks to Shishir Anshuman for your help.
Now I add alias on webpack.config.dev.js and webpack.config.prod.js but some me a lot errors.
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Ol-Cesium
'goog': '../node_modules/olcs/goog',
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
In console show me this error:
./node_modules/olcs/AbstractSynchronizer.js
107:22-35 "export 'getUid' (imported as 'olBase') was not found in 'ol/index.js'
__stack_frame_overlay_proxy_console__ # index.js:2178
handleErrors # webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent # eventtarget.js:51
(anonymous) # main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage # main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:50
WebSocketTransport.ws.onmessage
In the Codesandbox provided by you, I was unable to find the root cause, but I noticed the following:
I noticed that you have used the ES6 import statement:import OLCesium from "olcs/OLCesium";.
But as per this issue, the module is not yet ported to ES6.
I have never used this library before, So it's hard to figure out what exactly is going on.
Did you try installing https://www.npmjs.com/package/geom ? Since the error says 4.6.4/geom/Point.js is missing.
I added a config.json to application.
in webpack.config.js I defined Config
externals: {
'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
},
in application I required config and used it
var Config = require('Config');
However, webpack bundles my config file into index.js(my webpack output file) and I dont want this.
I want to keep my config.json seperate from index.js To achieve this, I excluded my config.json but it did not work.
exclude: [/node_modules/, path.resolve(__dirname, 'config.dev.json'), path.resolve(__dirname, 'config.prod.json')]
Can you please help me if I miss something.
Thanks
As descibed by #thedude you can use webpack's code splitting feature.
Instead of simply doing import config from 'config.json' you can use a really cool feature of code splitting.
require.ensure([], function(require) {
let _config = require("config.json");
this.setState({
_configData: _config
});
});
and when you want to use data of config, do that by checking state
if(this.state._configData) { // this checks _configData is not undefined as well
// use the data of config json
}
When you will compile your code using webpack then two bundle files will be created i.e. bundle.js and 0.bundle.js. This 0.bundle.js has your code of config.json file.
You should use webpack's code splitting feature: https://webpack.js.org/guides/code-splitting/#src/components/Sidebar/Sidebar.jsx