everything fine when i import first component, but i dont have intellisense when trying to import any others
here is my current project tree
.
├── client
│ ├── App.js
│ ├── components
│ │ ├── buttons
│ │ ├── form
│ │ └── index.js
│ ├── index.html
│ └── index.js
├── jsconfig.json
├── package-lock.json
├── package.json
└── webpack.config.js
inside folder components i have index.js file which export all components
here is my webpack alias
where clientPath is path.resolve(__dirname, 'client');
resolve: {
alias: {
//...
components: path.resolve(clientPath, 'components'),
},
symlinks: false,
}
and finally my jsconfig.json
{
"compilerOptions": {
"module": "ES6",
"jsx": "preserve",
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"components": ["client/components/*"],
}
},
"include": ["client"],
"exclude": ["node_modules", "**/node_modules/*"]
}
why does this happened and how to fix it ?
Related
I am trying to configure jest for my monorepo react app.
This is my file structure.
├── Dockerfile
├── Procfile
├── README.md
├── VERSIONLOG.md
├── apps
│ ├── admin
│ ├── business
│ └── consumer
├── config
│ ├── env.js
│ ├── getHttpsConfig.js
│ ├── grp-config.js
│ ├── jest
│ ├── modules.js
│ ├── paths.js
│ ├── utils
│ ├── webpack.config.js
│ └── webpackDevServer.config.js
├── core
│ ├── components
│ ├── constants
│ ├── external-scripts
│ ├── services
│ ├── static
│ └── utils
├── docker-compose.yml
├── jest.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo.png
│ ├── manifest.json
│ └── robots.txt
├── pull_request_template.md
├── scripts
│ ├── build.js
│ ├── build_parametrized
│ ├── lint.js
│ ├── server.js
│ ├── start.js
│ └── test.js
├── shared
│ ├── components
│ ├── constants
│ ├── helpers
│ ├── hooks
│ ├── redux
│ ├── selectors
│ ├── services
│ └── types
├── static.json
├── tests
│ ├── admin
│ ├── business
│ ├── consumer
│ ├── core
│ ├── mocks.ts
│ ├── setupTests.ts
│ ├── shared
│ └── utils.tsx
├── tools
│ └── git-hooks
├── tsconfig.json
└── version.json
Every separate app has its own tsconfig.json which is merged with the one on the root.
For example Admin app has this tsconfig.json.
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"components/*": [
"src/components/*"
],
"constants/*": [
"src/constants/*"
],
"helpers/*": [
"src/helpers/*"
],
"pages/*": [
"src/pages/*"
],
"reducers/*": [
"src/reducers/*"
],
"selectors/*": [
"src/selectors/*"
],
"types/*": [
"src/types/*"
],
"hooks/*": [
"src/hooks/*"
],
"styles/*": [
"../../core/static/styles/*"
],
"core/*": [
"../../core/*"
],
"shared/*": [
"../../shared/*"
],
}
},
"include": [
"../../shared",
"../../core",
"../../apps/admin"
],
"extends": "../../tsconfig.json"
}
When I am running my tests, jest throws an error
Cannot find module 'pages/root' from 'apps/admin/src/routes.ts'
moduleNameMapper: {
"^core(.*)$": "<rootDir>/core$1",
"^apps(.*)$": "<rootDir>/apps$1",
"^shared(.*)$": "<rootDir>/shared$1",
"^styles(.*)$": "<rootDir>/core/static/styles$1",
"styles.ts": "identity-obj-proxy"
},
I have managed to add shared and core path mappers for jest, but can't do it for the separate apps.
"^apps/admin/src/pages(.*)$": "<rootDir>/apps/admin/src/pages$1",
Have tried this one and others, nothing helped me
I have a typescript monorepo setup that uses npm workspaces and I want to be able to import subpaths down to any individual typescript file of #package/shared in #package/client and #package/server while skipping the src folder. One solution is simply removing the src folder and moving every subfolder up the hierarchy but that feels like a hacky solution. I tried using wildcards in the exports (e.g. "./*": "./src/*", "./": "./src/*.ts") but either they're not working or they only work partially (moduleResolution is set to "NodeNext")
For example, with the following folder structure of the monorepo
.
├── package.json
└── packages/
├── shared/
│ ├── package.json
│ └── src/
│ ├── index.ts
│ ├── types/
│ │ ├── index.ts
│ │ ├── foo-type.ts
│ │ └── bar-type.ts
│ └── constants/
│ ├── index.ts
│ ├── foo-const.ts
│ └── bar-const.ts
├── client/
│ └── ...
└── server/
└── ...
I want to be able to import any typescript file in the shared package while skipping src
import { ... } from "#package/shared"
import { ... } from "#package/shared/types"
import { ... } from "#package/shared/types/foo-type"
import { ... } from "#package/shared/types/bar-type"
import { ... } from "#package/shared"
import { ... } from "#package/shared/constants"
import { ... } from "#package/shared/constants/foo-const"
import { ... } from "#package/shared/constants/bar-const"
// shouldn't work!
import { ... } from "#package/src/shared/..."
I sometimes see that ts file import other modules from post compiled js file.
For example I see like following monorepo project.
Each file in presentation refers to infrastructure/lib or library/lib. That means ts files in presentation refer to post-compiled js file in each project.
On the other hand, the files in presentation refer to ts files in presentation.
.
├── infrastructure
│ ├── README.md
│ ├── lib
│ ├── node_modules
│ ├── package.json
│ ├── src
│ ├── tsconfig.json
│ └── typeorm
├── library
│ ├── lib
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ └── tsconfig.json
└── presentation
├── batch
├── rest-api
└── web
infrastructure/tsconfig.json:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"baseUrl": "./src/",
"outDir": "./lib",
"moduleResolution": "node",
"strictPropertyInitialization": false,
}
}
Are there any laws about that? Is there any merit in referring to post-compiled files?
I've just created a new Gatsby project and have created a couple of small components that are being displayed on an index page after being imported like so:
import Nav from "../components/Nav"
import Intro from "../components/Intro"
import About from "../components/About"
import Experience from "../components/Experience"
import Projects from "../components/Projects"
import Contact from "../components/Contact"
import Footer from "../components/Footer"
Wanting to tidy this up a little, I discovered you could define aliases with webpack and installed the gatsby-plugin-alias-imports to achieve this. After installing the plugin with yarn add gatsby-plugin-alias-imports and adding the necessary config, my gatsby-config.js looks like the following:
const path = require('path')
module.exports = {
siteMetadata: {
title: "Site Title",
},
plugins: [
{
resolve: "gatsby-plugin-alias-imports",
options: {
alias: {
'#components': path.resolve(__dirname, 'src/components'),
'#pages': path.resolve(__dirname, 'src/pages'),
},
extensions: [
"js",
],
}
},
...
...
My project is structured like so:
.
├── README.md
├── gatsby-config.js
├── package.json
├── src
│ ├── components
│ │ ├── about.js
│ │ ├── contact.js
│ │ ├── experience.js
│ │ ├── footer.js
│ │ ├── intro.js
│ │ ├── nav.js
│ │ └── projects.js
│ ├── pages
│ │ ├── 404.js
│ │ └── index.js
│ └── scss
│ └── main.scss
├── static
│ └── static
│ └── icons
│ ├── github.svg
│ ├── instagram.svg
│ └── linkedin-in.svg
└── yarn.lock
Yet whenever I try to use #components syntax in an import:
import { Nav, Intro, About, Experience, Projects, Contact, Footer } from "#components"
yarn run develop reports that the #components alias can't be resolved:
ERROR #98124 WEBPACK
Generating development SSR bundle failed
Can't resolve '#components' in '/Users/James/Projects/personal-site/src/pages'
If you're trying to use a package make sure that '#components' is installed. If you're trying to use a
local file make sure that the path is correct.
File: src/pages/index.js:2:0
Am I missing something obvious? I've read the documentation for the plugin and don't think I have omitted anything. I've nuked node_modules and yarn.lock for good measure but without success.
Does anyone have any suggestions?
A friend pointed out to me that I was missing an index.js page within the src/components/ directory.
As I understand it whenever you setup an alias which points toward a directory, it will actually reference the index.js file contained within the specified directory.
After creating the file and re-exporting the components within it, webpack no longer had any issues.
Contents of my src/components/index.js:
export { default as Nav } from './nav';
export { default as Footer } from './footer';
export { default as About } from './about';
export { default as Contact } from './contact';
export { default as Experience } from './experience';
export { default as Intro } from './intro';
export { default as Projects } from './projects';
I'm having a hard time getting the require.js build just right. I have a main module and then the other pages/modules are lazy loaded. When it's done compiling, I have to fix the compiled dist/main.js or the app will load the compiled main module from the dist folder, but other modules are still loaded from the app folder. I have to change the require.config baseurl from /app to /dist. What do I need to reconfigure to get it to build correctly?
Directory Structure
├── app
│ ├── modules
│ │ ├── example_module
│ │ ╰── another_module
│ │ ├── AnotherController.js
│ │ ╰── AnotherView.stache
│ ├── main.js
│ ╰── build.js
├── dist
│ ├── modules
│ │ ├── example_module
│ │ ╰── another_module
│ │ ╰── AnotherController.js
│ ╰── main.js
├── content
│ ├── css
│ │ ╰── main.css
│ ├── sass
│ │ ├── table.scss
│ │ ├── type.scss
│ │ ├── form.scss
│ │ ╰── main.scss
│ ╰── img
├── lib
│ ├── bootstrap
│ ╰── canjs
├── bower.json
├── gulpfile.js
├── package.json
├── README.md
╰── index.html
app/main.js
require.config({
baseUrl: '/app', // must change this after compilation!
paths: {
'jquery': '../lib/jquery/dist/jquery.min',
'jquery-easing': '../lib/jquery-easing-original/jquery.easing.1.3.min',
'jquery-throttle': '../lib/jquery-throttle-debounce/jquery.ba-throttle-debounce.min',
'jquery-inputmask': '../lib/jquery.inputmask/dist/jquery.inputmask.bundle.min',
'can': '../lib/canjs/amd/can',
'bootstrap': '../lib/bootstrap-sass-official/assets/javascripts/bootstrap',
...
},
shim: {
'jquery-easing': ['jquery'],
'jquery-throttle': ['jquery'],
'bootstrap': ['jquery']
...
}
});
require([...], function (...) {
// Init App
});
app/build.js
({
appDir: '.',
baseUrl: '.',
dir: '../dist',
mainConfigFile: 'main.js',
preserveLicenseComments: false,
modules: [
{
name: 'main',
include: [
'modules/dashboard/DashboardController',
...
]
},{
name: 'modules/example_module/ExampleController',
exclude: ['main']
},{
name: 'modules/another_module/AnotherController',
exclude: ['main']
},{
...
}
]
})
Interesting, I've actually not used this scenario with RequireJS, however this structure would make sense for bundles/progressively loading files.
What I've done in the past is one of two things:
1) Use the existing /app directory for progressively loaded modules. /dist would only contain main.js/css or output the minified files to the root(if it's only 1-2 files)
2) Re-create the entire structure with only necessary files inside /dist. For example: /dist/index.html, /dist/app/modules/*, /dist/main.js would all exist. This way you can copy the entire /dist contents to any deployment package you use, vs cherry-picking which files you'll need on a production server.
Typically, I've found #2 is more common in my experience.