In a typical nextjs project I find myself with a number of root-level config files:
tsconfig.json
next.config.js
next-seo-config.ts
.eslintrc
etc...
I would like to clean up my root directory and move these files into their own directory. In particular, I would like to create a config directory which would house the above files.
Is this possible in nextjs? If so, how can I do it?
Thanks.
Related
I'm looking for a way to watch changes on files (sass files precisely) and execute a loader on other files (js files) with webpack.
The goal is to detect sass changes and recompiling all the javascript files with the babel-loader, because they might import it through the styled-jsx plugin.
I'm stuck in the "loader" concept and can't figure out how to get other files when testing for /.scss$/
You don't need to do anything by yourself if you using scss modules with webpack (more about module concept in the webpack docs.
What webpack does - it starts at entry point (you can specify one or multiple entrypoints, if you don't, default src/index.js would be used). And then builds dependency trees between modules (which can have any file extension as long as there's a specific loader that can turn file into module). Webpack then watches all files and rebuild all modules that have a dependency on changed file. So, if you import the .scss file in, let's say, your entrypoint
import './styles.scss';
// ...
It would rebuild automatically when styles.scss changes
You need to import your .scss file(s) under one of your .js files so that webpack actually picks up the changes.
Then, all loaders you have configured will be applied automatically based on which file type they should target.
I created a generic npm package which has my business logic, but I need some google cloud storage information that is in my config files. How can I access this file, if my package is in my node_modules folder? What would be a good solution for that?
this is the structure:
-config
-google_storage_config
-node_modules
-package
-serviceWhichNeedsThatConfig
Based on your folder structure, we will assume your path to the config will be ../../../config/google_storage_config, since node_modules/package/serviceWhichNeedsThatConfig should always be in the root directory.
Now, to access any variables from this config file, simply include the following code in the serviceWhichNeedsThatConfig,
var config = require('../../../config/google_storage_config');
console.log(config.myVariable);
Hi~Have you tried require?
var config = require('../../config/google_storage_config');
I'm looking for a solution to a pretty common webpack annoyance: within every folder in our app we need an index.js file that requires every other .js file within that folder and then exports them all so that webpack understands how we'd like to import them.
Is there any way to automate this via a custom Resolver / Loader?
Thanks in advance!
I have two Angular2 projects using webpack as module bundler and typescript.
Aiming to share code between, I split some of the source code and created a symlink to this 'external' source code from each of this two projects.
After doing this the "symlinked code" can not resolve the imports properly.
below a "hello world" project to shows my concerns.
https://github.com/datracka/angular2-symlink-issue
This project runs straight forward BUT if you remove the given src folder and create a symlink to another src folder with the same source code BUT located at /another/path/src then you get a compiler error:
ERROR in .-shared/src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.dirname (path.js:1326:5)
at ensureTypeScriptInstance (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:156:103)
at Object.loader (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:403:14)
So my question is: what I am missing with symlinks when I "distribute" the source code in another folder out of the project folder itself?
My guess is about configure properly resolving object in webpack https://webpack.github.io/docs/resolving.html to override the node.js loading node_modules algorithm https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders but not luck.
Hopefully somebody can point me in some direction.
I found the answer.
My guess was right. it was about how nodejs resolve the dependencies. https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders
The symlinked code is trying to find the dependencies moving up all the way failing until it finds node_module. But nothing is there. node_module is in the parent project.
Therefore the solution is create another symlink from the symlinked code to the node_modules folder of the parent project to resolve the dependencies.
I have a similar setup but decided to add a path to my tsconfig.json in my main app:
"paths": {
"*": ["*", "node_modules/*"]
}
All the modules required by the source code in the shared symlinked folders are in the main app's node_modules folder. This tells the compiler to look in the main app's node_modules folder before trying to find a node_modules folder further up the tree.
I'm wondering if it's possible to configure the RequireJS optimizer to fit with our current project structure.
The site directory is structured as below...
root
project1
scripts
main.js
main.min.js
project2
scripts
main.js
main.min.js
project3
scripts
main.js
main.min.js
I was wondering if it's possible to have a "main" file sitting at the root level that will optimize all the child project main.js files and place them within their respective directories. I noticed the multi-page optimizer example on the Requirejs homepage but i'm unsure how to configure that to work for my use case.
Is it just one main.js file per project? I think when I used require js modules, it optimized with this behavior, but in a separate build/distribution directory
see
http://www.bennadel.com/blog/2404-Compiling-Optimizing-A-Subset-Of-A-RequireJS-Application.htm