I'm using Next.js (javascript) for a new project and have included a fork of a dependency locally within the project by modifying the "package" field in the package.json file as follows:
"package": "file:./path/to/the/package"
This works, but now I'm trying to enable hot reloading for this dependency by changing the "package" field to:
"package": "link:./path/to/the/package"
However, this results in the following error:
Error: require() of ES Module
Instead change the require of index.js in .../.next/server/pages/page.js to a dynamic import() which is available in all CommonJS modules.
Is there a way to fix this error and enable hot reloading for local dependencies in Next.js, or is there another approach I can take to achieve this?
Related
I have two packages ui and app in a "monorepo" using turborepo.
I have the ui repo with .tsx files and it's not being built, it's package.json main is a typescript file.
However when running nextjs I get an error at the import from the ui main file.
Is it possible to include this node_module from nextjs perspective? When looking at config.module.rule I can't find any rules for typescript files. I'm not sure how typescript config for nextjs files.
The turbo-repo example is using next-transpile-modules in the apps to get Next to transpile these package dependencies that do not have a build step:
// in next.config.js
const withTM = require("next-transpile-modules")(["ui"]);
module.exports = withTM({
reactStrictMode: true,
});
From this article by the creator of Turbo Repo, Jared Palmer:
[To] do this, this package can then be used without project references or a TypeScript build step (either via tsc or esbuild etc) as long as you adhere to 2 rules:
The consuming application of an internal package must transpile and typecheck it.
You should never publish an internal package to NPM.
...
**Next.js
If you use Next.js, you can satisfy these constraints with the next-transpile-modules plugin which will tell Next.js to run certain dependencies through its Webpack/Babel/TypeScript pipelines.
So make sure you're meeting the constraints outlined in the previous excerpt. Since you're using Next, check your next.config.js and confirm that you're using next-transpile-modules for your internal dependencies.
Take a look at the default project of Turborepo as it is explained here: Getting Started. The repository itself can be found here: GitHub.
This project comes with 3 different packages and two plain NextJS apps (docs/web) that use a (Button-)component from the UI repository.
Use this project to understand the structure of a Turborepo and adjust it to your needs.
I did exactly what I described above and my NextJs apps just work fine sharing (tsx-)components from the UI package.
add this to your app's package.json should resolve it:
"bundledDependencies": [
"ui"
]
Since Next.js 13, you can just do the following:
// next.config.js
module.exports = {
transpilePackages: ['ui'],
}
Next.js doc
I have added "type": "module" in my package.json file. And this has led to several issues.
I needed to change jest.config, next.config, tailwind.config, postcss.config into cjs format, as all of them use module.exports.
Also, as I added "type": "module", I deleted the package-lock.json file, node_modules and .next folder and ran npm install.
I have node v14.17.4, and next v11.1.2. Actually starting from next 11 esm should be supported.
I keep getting the error: Error: Must use import to load ES Module: /Users/Katharina.Schreiber/Desktop/not-just-another-weather-app/.next/server/pages/_document.js
require() of ES modules is not supported
I assume, it makes no sense to rename files in .next folder. I tried to clear next cache - nothing.
I have an angular application built in Visual Studio 2017. I'm using npm, gulp, and browserify to help me manage dependencies, bundling, and minification. Everything had been going along well until I tried to pull in moment, moment-timezone, and angular-moment, when I started having trouble getting these libraries to play nice.
I'm assuming that the issue is related to the way these libraries are being included in my application due to some mistake or bug with the way I'm using npm, gulp, browserify, or the require('...') statements. So, it seems like it'd be helpful for me to explain how I'm doing that.
First, in VS, I added a node configuration file to the project (package.json) and it contains a list of all of my dependencies that will be installed through npm. So, for example, my package.json looks something like this:
{
"property": value,
"otherProperty": otherValue,
"dependencies": {
"angular": "1.5.8",
"angular-ui-router": "1.0.3",
"jquery": "3.1.0",
"moment": "2.18.1",
"moment-timezone": "0.5.13",
"angular-moment": "1.0.1"
}
}
Now, that makes npm go ahead and download everything and stick it in my node_modules folder, but it doesn't actually include anything in my application. So there's a gulp task similar to the following:
var dependencies = Object.keys(packageJson && packageJson.dependencies || {});
browserify({cache: {}, packageCache: {} }})
.require(dependencies)
.bundle()
.pipe(source(js/siteLibs.js))
.pipe(buffer())
.pipe(gulp.dest("."));
Ok, so if that gulp task works correctly, I'll have a file called siteLibs.js that contains all of the js from my npm dependencies, and then I can just make a single script tag to reference siteLibs.js.
The next part, I'm a little hazy on, but do I still have to have an actual require('...') statement in my app for moment, angular-moment, and moment-timezone? If it is required, why? What is it doing?
Now, once at this point, I should be able to go ahead and let my angular app take a dependency on moment, moment-timezone, or angular-moment, and, indeed I can. The issue is that when I call moment.locales(), which is supposed to return a list of all loaded locales, it has naught but 'en-US'. Ok, that's expected because I never loaded any locales. So if I go in my app and say:
require('moment/locales/en-gb');
require('moment/locales/en-au');
require('moment/locales/fr-ca');
It makes no difference. The only loaded locale is en-US. What is the right way to go about getting those additional locales loaded given that I'm using npm, gulp, and browserify?
Refer to this in moment's documentation
https://momentjs.com/docs/#/use-it/browserify/
I'm using the Immutable library (v4.0.0-rc2) and am trying to setup flow to use the typedefs included with the library. The typedefs are located at immutable/dist/immutable.js.flow, which I've duplicated under my project's ./flow-typed/npm directory.
The problem that I have is that flow works with every other module but Immutable and I keep getting an error whenever I attempt to include the module: required module not found.
Having inspected the contents of immutable.js.flow, there is no declare module block anywhere to be found, which I believe to be the cause of the error. There are a bunch of export statements at the end of the file though.
How can I include the typedefs so the thing just works? IOW, what can I do that doesn't involve providing the typedefs under a manually-created declare module block?
As you are using latest version of immutablejs library, all you need to do is install flow-typed library
Then just run
yarn flow-typed install
This should install all flow-typed dependencies based on your project's package.json and it will also create module declarations for any packages which don't have flow types yet.
And you don't need to copy any immutable flow definitions from node_modules to flow-typed/npm directory, because flow-typed will resolve automatically the flow types either from node_modules or from flow-typed/npm directory.
I've been working on a Meteor package for some time now and I have been been using a Meteor SCSS build package to compile my sass. Now for reasons like autoprefixer and such, I need to compile the SCSS outside of Meteor. My plan was to use Codekit but when I try to build the SCSS I get an error with no message at all. When I use the Sublime Text 2 SCSS build package I get an error as well. I have come to the conclusion that this is because of my Meteor package name. I have named it:
myusername:packagename
and as a folder that translates to
myusername/packagename
It replaces : with / and because of that, Codekit thinks the folder named myusername/packagename is two folders myusername -> packagename. That messes up the folder tree when Codekit tries to compile it.
Is there a good way to handle this?
To solve this problem, you can rename the directory of the package and then add an entry inside the Package.describe call in package.js:
Package.describe({
summary: "My package",
version: "0.0.1",
name: "myusername:packagename"
});
Now, the name of the package will be read from package.js and the directory can be called whatever you want.