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
Related
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?
I'm creating the initial setup of a proof of concept project using ReactJS and typescript, and I'd like to include the CSS modules in it without having to eject the webpack configuration.
Here are the steps I followed so far:
npm install -g create-react-app
create-react-app firstapp --scripts-version=react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
package.json:
"start": "react-app-rewired start --scripts-version react-scripts-ts"
config-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = function override(config, env){
config = rewireCssModules(config, env);
return config; }
I correctly set my App.module.scss file, and referenced it in my App.tsx file:
import styles from './App.module.scss';
When I run the project, I have an error regarding the css module:
Cannot find module './App.module.scss'.
When I do the exact same project without the typescript configuration, it works though.
What should I change for the CSS modules to be taken into account?
I came accross typings-for-css-modules-loader, but I'm not sure how to integrate it in my configuration since I didn't eject the webpack configuration.
Thanks in advance,
Thomas .T
EDIT 1:
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
Gonna accept this as an answer within 2 days.
I got the workaround after googling a lot. I'm new to react js and trying to build using typescript so I found the solution and started using
react-script-ts
package. But when I started using css module faced the problem import class from './button.css' didn't work so I used import './button.css' but in this got lot of css conflicts, higher component scope css always overridden by lower component. so googled a lot and finally got the solution.
Solution
From 2.1 create-react-app having support for typescript so convert your application to 2.1 above
1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run
source : https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/
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 making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!
I am trying to setup a basic ionic 2 leaflet app using ionic 2.0.0-beta.24 and leaflet 0.7.7. After starting the default project with
ionic start test --v2 --ts
if you open the ionic.config.js file you will see the message
Ionic CLI is no longer responsible for building your web assets, and now
relies on gulp hooks instead. This file was used for exposing web build
configuration and is no longer necessary.
If this file is executed when running ionic commands, then an update to the
CLI is needed.
If your version of the Ionic CLI is beta.21 or greater, you can delete this file.
In older versions of ionic 2 you would put the directories you would want to include in this file like this:
sass: {
src: ['app/theme/app.+(ios|md).scss'],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
},
Now i guess that isn't an option, so how do i bring in the css stylesheet i need, because doing #import "leaflet"; in app.core.scss errors out because it can't find the folder.
Any help would be greatly appreciated. I am able to use the Leaflet js library because i did.
npm install --save leaflet
typings install --ambient --save leaflet
The map is loading without an issue, but the tiles are scrambled which is a sign the css sheet is not loaded. If i put in a stylesheet link in it works without an issue, but i would prefer not to have to rely on a CDN.
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
Thanks.
So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.
The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:
gulp.task('sass', buildSass);
to
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
}
})
});
It solves my issue. I also needed to call #import "leaflet" in the page that needed the leaflet css.