I have a monorepo with lerna, yarn workspaces, and the following structure:
- packages
- a_webpack
- src
- index.ts
- dist
- main.js
- main.css
- b_tsc
- src
- indes.ts
- dist
- index.js
both packages a_webpack and b_tsc are to be consumed by another package c.
on b_tsc i run tsc to compile into its dist folder.
on a_webpack i run webpack to do the same
I mainly use webpack, because I can get a separate .css file in the dist that can be imported
When I import b_tsc in package c like:
import { something } from 'b_tsc'
everything works as expected.
Also when I do:
import 'b_tsc/dist/main.css'
that is working.
However when i try:
import { something } from 'a_webpack'
I'm getting:
Module not found: Can't resolve 'a_webpack'
Question
Even if I change the output of webpack to generate dist/index.js, it doesn't work. What am I doing wrong here?
General Question
When importing like seen above, how does the compiler know it needs to look inside dist/main.js or any other entry point within that package?
Figured it out:
The entrypoint is specified in the package.jsons main property.
That solved the import issue for me.
Related
In my project (project A) I have a webpack alias to the directory in the neighboring project (project B, outside of the project A directory). Both of them have own node_modules.
When in project A I import some file from project B that has an import of some library then it still gets imported from projectB/node_modules. I want this to be imported from projectA/node_modules.
- projectA
- src/file1.ts (imports 'dirB/file2' from project B, which leads to 'react' library for 'file2' to be imported from project B)
- dirB (webpack alias to 'projectB/dir')
- node_modules/react
- projectB
- dir/file2.ts (imports 'react' library)
- node_modules/react
A solution that I see it to tell webpack that for files in projectB start node_modules resolution as if they were located in projectA somehow. How can I achieve this?
I know this is a dirty setup and I really should do packages/npm link, but this is how it is, I just want to temporarily reuse some files within projectB but without copypasting them (but the result should be as if I did copypaste). Tried creating a symlink instead of webpack alias - the issue remains the same.
I am trying to compile a very simple typescript code with esbuild.
However esbuild is compiling only the entry file.
This is my setup:
//index.ts
import * as mod1 from './mod1';
mod1.my_method();
//mod1.ts
export function my_method(){
console.log('debug');
}
I run:
esbuild index.ts --outdir=./dist --platform=node
the compilation is done with no error and if I now check the dist I get only
dist
- index.js
// dist/indes.js
import * as mod1 from './mod1';
mod1.my_method();
but there is no trace of dist/mod1.js. So of course the code cannot run and give an error.
Why esbuild is not compiling all the other files like mod1.ts?
I can't use --bundle in my project.
esbuild index.ts --outdir=./dist --platform=node
^^^
you only specify the index.ts file in the commandline
i never actually worked with esbuild, but there is probably a function for folders, like esbuild . --outdir=./dist --platform=node
How do I get my react js app to start watching my sass files?
I did npm i sass vs npm i node-sass because I learned that node-sass is depreciated, I'm not sure if that has anything to do with automatic sass watching? (also, I have the latest version of node installed)
I know when you're not using a framework you have to type into the terminal " sass --watch input.scss output.css.", do I have to do the same in react js?
Also in my components I have imported the main.scss sheet!
this is the error I get when I try to run my react js app:
Failed to compile
./src/components/Login.js
Module not found: Can't resolve './scss/main.scss' in '/Users/karinapichardo/Desktop/login-project/src/components'
what am I missing to do? any help would be greatly appreciated
You are trying to import the SCSS file from the directory where Login.js is.
You should modify your import path to be like this:
import "../scss/main.scss"; // 2 dots at start of path
instead of like this:
import "./scss/main.scss";
Which will essentially navigate to the src directory before accessing the rest of the path
I would like to break up my NPM package in to more workable parts.
In my application requiring the package, instead of
import { myFunction } from 'my-package'
I want
import { myFunction } from 'my-package/submodule'
My package has a number of files in src folder and then an index.ts which just exports them all.
package.json main points to dist/index.js already.
My package builds to dist directory so
import { myFunction } from 'my-package/dist/submodule'
and
import { myFunction } from 'my-package'
both work.
One solution may be to copy all compiled files to package root but this feels untidy.
Maybe there is a way make the dist folder the root? I can't find this in the documentation.
D3 and Lodash manages this but I think it's done at build time. I couldn't work out how they managed it.
I have two javascript projects in separate directories within a parent directory and I want both of them to be able to import files from a common directory. The structure looks a bit like this:
- parentDir
- project1
- package.json
- webpack.config.js
- src
- index.js
- project2
- package.json
- webpack.config.js
- src
- index.js
- common
- components
- CommonComponent.vue
- application
- app.js
I'd like both project1's index.js and project2's index.js to be able to import CommonComponent.vue and app.js.
Currently this works if I do:
import CommonComponent from ../../common/components/CommonComponent.vue
However those import paths starts to get very messy and hard to maintain the deeper into each tree we go, with huge numbers of ../s, so I'm trying to find a way of making the imports neater and easier to manage and I came across resolve options in webpack. So I've tried adding this to my webpack.config.js:
resolve: {
modules: [
path.resolve("../common/"),
path.resolve("./node_modules")
]
},
so then the import would look like:
import CommonComponent from "components/CommonComponent.vue"
import app from "application/app"
Importing the plain js file works, but when trying to import the .vue file, webpack throws an error:
ERROR in C:/parentDir/common/components/CommonComponent.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'
So how can I apply webpack loaders to files imported via resolve.modules?
Note: importing .vue files from within a single project works fine, so my module.rules config is correct.
It turns out the common package needed its own node_modules. That doesn't seem to be the case when importing a file from there directly via its path, but it is when using either resolve.modules or resolve.alias in webpack.
So the answer was to npm init in common and then to npm install all the dependencies and devDependencies needed there. e.g (of course these will depend on the project):
npm install --save vue
npm install --save-dev babel-core babel-loader css-loader less-loader vue-loader vue-template-compiler webpack
Once that's done, both of these webpack configs seem to have the same result as far as I can tell:
resolve: {
modules: [
path.resolve("../../common"),
path.resolve("./node_modules")
]
},
and
resolve: {
alias: {
components: path.resolve("../../common/components")
}
}
Both allow a file in project1 or project2 to do an import like:
import CommonComponent from "components/CommonComponent.vue"