Using #now/node-server, I'm trying to achieve this:
const myLocalLibrary = require('#src/lib/myLocalLibrary');
Instead of
const myLocalLibrary = require('../../../lib/myLocalLibrary');
The problem is that I have tried multiple things that won't work, including:
Setting NODE_PATH=src and using require('src/...
Does not work because setting NODE_PATH as env has no effect
Patching require using module-alias (https://www.npmjs.com/package/module-alias)
Works locally, fails on Zeit because node can't find any files using the module.
I used:
require("module-alias").addAlias("~", __dirname);
Is there any way of achieving this?
You can use this
"build": {
"env": {
"NODE_PATH": "src/"
}
}
The reason your solution fails to build on ZEIT Now might be that it
only works runtime, and Now needs to resolve the paths at build time. You can try using babel-plugin-root-import like described here instead.
Or if you just want to use absolute imports with Next.js and ZEIT Now, see this question.
Related
I'm trying to run the Nuxt3 app but when I'm trying to run npm run dev then this error showing in my console: ERROR Cannot start nuxt: Context is not available
Anyone have face the same type of issue and how to fix that.
I had this same issue but the problem was that I was trying to use Nuxt/Vue specific functionality in a .ts file.
I was abstracting some of the lengthier functions and computed objects into a composition file, specifically import { useNuxtApp } from '#imports' and const { $store } = useNuxtApp(). The .ts file has no Nuxt context so these imports and functions just won't work there!
Might you be experiencing something similar?
I had same issue, when i try generated app for production "npm run generate".
Most likely its a version issue, update nuxt to "3.0.0-rc.8"
https://github.com/nuxt/framework/issues/6583
Hello I'm using VueJS 2 and I have multiple .env in my project.
My app have .env for each company to select the company configuration (skin color / files...)
Actually I have all my .env in the root folder:
.env.company1-dev
.env.company1-staging
.env.company1-prod
.env.company2-dev
.env.company2-staging
.env.company2-prod
.env.company3-dev
.env.company3-staging
.env.company3-prod
So when I'll get 20 companies it will be confused on my root folder so it is possible to create a folder where I can place all my .env ?
The idea :
/environments/company1/
.env.dev
.env.staging
.env.prod
/environments/company2/
.env.dev
.env.staging
.env.prod
/environments/company3/
.env.dev
.env.staging
.env.prod
On your vue.config.js file you can add:
const dotenv = require("dotenv");
const path = require("path");
let envfile = ".env";
if (process.env.NODE_ENV) {
envfile += "." + process.env.NODE_ENV;
}
const result = dotenv.config({
path: path.resolve(`environments/${process.env.VUE_APP_COMPANY}`, envfile)
});
// optional: check for errors
if (result.error) {
throw result.error;
}
the before run you can set VUE_APP_COMPANY to a company name and run your app,
Note: It's important to put this code on vue.config.js and not in main.js because dotenv will use fs to read files.
References
https://github.com/motdotla/dotenv#path
https://github.com/vuejs/vue-cli/issues/787
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
The accepted answer we have also used in the past. But I found a better solution to handle different environments. Using the npm package dotenv-flow allows not only the use of different environments but has some more benefits like:
local overwriting of variables by using .env.local or .env.staging.local and so on
definition of defaults using .env.defaults
In combination we have set up our projects with this configuration:
.env
.env.defaults
.env.development
.env.production
.env.staging
.env.test
And the only thing you have to do in your vue.config.js, nuxt.config.js or other entry points is
require('dotenv-flow').config()
Reference: https://www.npmjs.com/package/dotenv-flow
The powershell solution
I was handling exactly the same problem. Accepted solution is kind of ok, but it did not solve all differences between companies. Also, if you are using npm, your scripts can look nasty. So if you have powershell, here is what I suggest - get rid of the .env files :)
You can keep your structure like you want in the question. Just convert the env files to ps1.
/build/company1/
build-dev.ps1
build-stage.ps1
build-prod.ps1
/build/company2/
build-dev.ps1
build-stage.ps1
build-prod.ps1
Inside each of those, you can fully customize all env variables, run build process and apply some advanced post-build logic (like careful auto-deploy, publishing, merging with api project, ..).
So for example company1\build-stage.ps1 can look like this:
# You can pass some arguments to the script
param (
[string]$appName = "company1"
)
# Set environment variables for vue pipeline
$env:VUE_APP_ENVIRONMENT = "company1-stage";
$env:NODE_ENV="development";
$env:VUE_APP_NAME=$appName;
$env:VUE_APP_API_BASE_URL="https://company1.stage.mycompany.com"
# Run the vue pipeline build
vue-cli-service build;
# Any additional logic e.g.
# Copy-Item -Path "./dist" -Destination "my-server/my-app" -Recurse¨
Last part is easy - just call it (manualy or from integration service like TeamCity). Or, you can put it inside package.json.
...
"scripts": {
"build-company1-stage": "#powershell -Command ./build/company1/build-stage.ps1 -appName Company-One",
}
...
The you can call whole build process just by calling
npm run build-company1-stage
Similary, you can create localhost, dev, prod, test and any other environment. Let the javascript handle the part of building the app itself. For other advanced work, use poweshell. I think that this solution gives you much more flexibility for configuration and build process.
P.S.
I know that this way I'm merging configuration and build process, but you can always extract the configuration outside the file if it gets bigger.
This question already has answers here:
error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
(33 answers)
Closed 2 months ago.
ERROR in node_modules/#angular/common/http/http.d.ts:2801:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
2801 export declare class HttpClientModule {
restart your server...
terminate server for windows
ctrl + C
start again
ng serve
I had the same issue.
I was going through comments here https://github.com/angular/angular/issues/35399 for solution.
I simple ran ng serve --prodand the error was gone. After that I even ran ng serve.
Other solutions proposed are
Ensure that the tsconfig.json of your library has set "importHelpers": true
Add "enableIvy": false to compilerOptions in tsconfig.app.json
Adding "postinstall": "ngcc" to scripts: {...} in package.json then run npm run postinstall solved problem.
if you still want to keep the Anuglar Ivy and AOT advantage
Simply restart the server (press ctrl+c on the prompt) and then, run ng serve again.
I had the same issue. Then I realized that previously I've some changes in app.module.ts Every time you made changes in app.module.ts remember restart the server process.
I had the same issue. I was adding service to module i.e. app.module.ts's imports array instead of adding it to the providers array.
app.module.ts
#NgModule({
imports: [
MyService // wrong here
],
providers: [
MyService // should add here
]
})
export class EventsModule { }
For me I had a Pipe declared in my 'imports' in my module. Apparently many things can produce this error. I do not suggest you disable IVY, as that is not the problem.
Setting "aot": false inside angular.json file worked for me.
I terminated the current build and restarted it again.
i.e ng serve solved my error. Hope it helps.
In my case, I had included HttpClientModule run running the Angular server.
The below solution works best for my case
Just Close the Server, and reopen it.
It will work.
Working within an NX workspace I just came across this issue.
After a lot of searching I realised that the internal library that I just created had by default Ivy turned off.
I do have it on everywhere else. And yes, even for my libraries. They're only internal to the monorepo we don't expose any of them so we don't want to have an extra step to compile them with the deprecated view engine instructions and later on run ngcc onto it to turn that into Ivy code.
Conclusion: I just forgot to set
"angularCompilerOptions": {
"enableIvy": true
}
on my newly created library and the default is false which wasn't working in my case.
I had same issue in ubuntu. But when I used sudo bash command and executed ng serve. It resolve the issue
I had the same problem, it seems like there is a lot of ways to trigger the problem. I recommend trying to verify the .component, .module and the app.module declarations. Mine was triggered because I've declared the .component in app.module instead of the .module.
This happened to me in VSCode with another module after installing it with npm install. This is most likely related to how the Angular language service extension works and the quickest way to solve it was to restart the IDE.
this problem caused by angular extension and snippets in vscode
be careful not to install obsolete extensions like Angular Extension Pack and Angular Language Service
enter image description here
I'm stucking with this trouble for days.
import abc from './abc' doesn't work, the abc.xyz() or any function inside it will not be suggested.
Even the file abc.js will not be suggested
I have to use abc = required('./abc.js') and things work fine.
Both file suggestion and method will be available
I've tried to added jsconfig.json and force it to use "module":"es6" but didn't work either.
Already got react native tools installed.
Couldn't get it work eventually.
Edit:
i found out that module.exports = User doesn't work anymore. I have to write export default User if i want to access to all the method, since when and how to get old school export works?
Change your jsconfig.json to
{
"compilerOptions": {
"target": "es6"
},
"exclude": [
"node_modules"
]
}
and then you might need to restart VScode
the option module is used for typescript, more on this here
Currently, React Native dynamically requires a file for the running platform with an specific file extension, *.ios.js or *.android.js. However, when running this code inside a test environment, we get a require error because the module require('./module') cannot be found in the file tree, which looks like:
module.ios.js
module.android.js
How can we handle this issues in a test environment?
Adding platform specific extensions to moduleFileExtensions fixed the problem for me with jest.14.1. Credits to : github link
Here is a snippet from sample package.json which will run all files including scene.jest.js(x).
...
"jest": {
"verbose": true,
"preset": "jest-react-native",
"moduleFileExtensions": ["js", "android.js", "ios.js"],
"testRegex": "\\.scene\\.jest\\.jsx$"
}
...
As of Jest 17.0.0 you can use the defaultPlatform configuration for this - see the very bottom of the Jest React Native tutorial.
As it shows there, you would configure something like this:
"haste": {
"defaultPlatform": "ios",
"platforms": ["android", "ios"],
},
Naturally, this will mean your tests only load the iOS version of your component (or only Android, depending how you choose to configure it).
If you find it important to test both versions, you'll probably need to do something more like the solution mentioned in this issue, possibly manipulating Platform.OS and using require.requireActual directly.
(Might also want to track this issue, in case a less hacky solution is eventually found.)
It's kind of ugly and maybe there is a better solution but it seems that you can create a module.js file that will be used in tests but in platform environment it will still use the module.ios.js or module.android.js.
You need to create a custom compiler to resolve the platform specific dependencies in your tests. If you are using mocha, this will probably help you:
http://lidatang.com/setup-mocha-testing-react-native/