I'm migrating react-intl to version 3.0, and need to polyfill locale-data for IE. Specifically I want to load a polyfill of locale data for en-US. I can only find #formatjs/intl-relativetimeformat/dist/locale-data/en locale file.
if (!Intl.RelativeTimeFormat) {
// eslint-disable-next-line global-require
require('#formatjs/intl-relativetimeformat/polyfill');
// eslint-disable-next-line global-require
require('#formatjs/intl-relativetimeformat/dist/locale-data/en-US');
}
It leads to this error :
Module not found: Error: Can't resolve '#formatjs/intl-relativetimeformat/dist/locale-data/en-US' in '/xxx/xxx/xxx/xxx/app'
Try the below format in "#formatjs/intl-relativetimeformat": "^7.2.0",
import '#formatjs/intl-pluralrules/polyfill'
import '#formatjs/intl-pluralrules/locale-data/en'
import '#formatjs/intl-pluralrules/locale-data/de'
import '#formatjs/intl-relativetimeformat/polyfill'
import '#formatjs/intl-relativetimeformat/locale-data/en'
import '#formatjs/intl-relativetimeformat/locale-data/de'
and addLocaleData is no removed already as per https://formatjs.io/docs/react-intl/upgrade-guide-3x/#migrate-to-using-native-intl-apis
try to install :
npm i #formatjs/intl-relativetimeformat
I had this same exact issue, when I checked the #formatjs directory inside node_modules/ there was no dist directory #formatjs/intl-relativetimeformat/**dist/**locale-data/en so I removed it from the import and everything worked fine.
Related
importing #lens-protocol/wagmi on next.js raises the following error:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/......./node_modules/#apollo/client/link/context' is not supported resolving ES modules imported from /Users/....../node_modules/#lens-protocol/api-bindings/dist/index.js
Did you mean to import #apollo/client/link/context/context.cjs?
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:412:17)
at moduleResolve (node:internal/modules/esm/resolve:932:10)
at defaultResolve (node:internal/modules/esm/resolve:1044:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ModuleWrap. (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///Users/sebastianserrano/projects/rpsocial/node_modules/#apollo/client/link/context',
page: '/'
}
Add to next.config.js the option:
transpilePackages: ['#lens-protocol'],
Until the #apollo-client fixes the ESM modules support (https://github.com/apollographql/apollo-feature-requests/issues/287)
./src/app/nav/nav.component.ts:5:0-44 - Error: Module not found: Error: Package path ./public_api is not exported from package C:\Users\Score\demo\DatingApp\client\node_modules\ngx-toastr (see exports field in C:\Users\Score\demo\DatingApp\client\node_modules\ngx-toastr\package.json)
./src/app/register/register.component.ts:4:0-55 - Error: Module not found: Error: Package path ./toastr/toastr.service is not exported from package C:\Users\Score\demo\DatingApp\client\node_modules\ngx-toastr (see exports field in C:\Users\Score\demo\DatingApp\client\node_modules\ngx-toastr\package.json)
[1]: https://i.stack.imgur.com/WaZNB.png
Use this
import { ToastrService } from 'ngx-toastr';
Instade of
import { ToastrService } from 'ngx-toastr/public_api';
import { ToastrService } from 'ngx-toastr/toastr/toastr.service';
import toastService in your service file like this:
import { ToastrService } from 'ngx-toastr';
I had the same problem. I uninstalled the version I had and instead, I used this command to install the older version:
npm i ngx-toastr#14.3.0
Hope that solves it for you!
I use vite to build one react environment. When I import GLTFLoader from the module, and vite commandline mentioned that:
Vite Error, /node_modules/.vite/deps/three_examples_jsm_loaders_GLTFLoader.js?v=9d4ee121 optimized info should be defined
Here's my code:
import * as Three from "three"
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
[...]
const gltfLoader = new GLTFLoader()
gltfLoader.setPath('public/')
gltfLoader.load('000.hdr', gltf => {
gltf.scene.scale.set(0.2,0.2,0.2)
scenes.add(gltf.scene)
})
Here's the error message:
For others in the future, YMMV: deleting node_modules and pnpm-lock.yaml solved the issue.
Already solve this question.
When the commandline mentioned vite error, just need to close dev-server, then reload. Vite would clean the cache tmp files in .vite.
this is usually caused by lockfiles or node_modules/.cache/vite (or maybe in your case node_modules/.vite)
I'm using React and ES6 using babel and webpack. I am very new to this ecosystem.
I am trying to import some common utility functions into my jsx file but react is unable to find the file
homepage.jsx
var pathToRoot = './../..';
import path from 'path';
import React from 'react';
import ReactDOM from 'react-dom';
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
//some react/JSX code
utils.js
var nextWrappedIndex = function(dataArray) {
//some plain js code
return newIndex;
}
exports.nextWrappedIndex = nextWrappedIndex;
Directory structure is as follows:
src
|--app.js
|--components
| |--homepage
| |--homepage.jsx
|
|--lib
| |--utils.js
I am on a windows 10 machine and was facing issues during compilation providing the path by any other means. Using path.join solved compilation issue but the browser while rendering throws this error
Uncaught Error: Cannot find module '../../lib/utils.js'.
How do I accomplish this?
Also, is this the best way to do it(if altogether it is way it is supposed to be done in such ecosystem)?
One of the best and easiest way I have found in such a setup is to use Webpack aliases.
Webpack aliases will simply associate an absolute path to a name that you can use to import the aliased module from anywhere. No need to count "../" anymore.
How to create an alias?
Let's imagine that your Webpack config is in the parent folder of your src folder.
You would add the following resolve section in your config.
const SRC_FOLDER = path.join(__dirname, 'src')
resolve: {
alias: {
'my-utils': path.join(SRC_FOLDER, 'lib', 'utils')
}
}
Now, anywhere in your app, in any of your modules or React component you can do the following:
import utils from 'my-utils'
class MyComponent extends React.component {
render () {
utils.doSomething()
}
}
Small note about this method. If you run unit tests with a tool like enzyme and you don't run the component tested through Webpack, you will need to use the babel-plugin-webpack-alias.
More info on Webpack website: Webpack aliases
I solved this by replacing
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
with
import nextWrappedIndex from './../../lib/utils.js';
I tried to reproduce your code and Webpack printed me the following error:
WARNING in ./app/components/homepage/homepage.jsx
Critical dependencies:
50:0-45 the request of a dependency is an expression
# ./app/components/homepage/homepage.jsx 50:0-45
It means that Webpack couldn't recognize your require() expression because it works only with static paths. So, it discourages the way you are doing.
If you would like to avoid long relative paths in your import, I'd recommend you to set up Webpack.
First, you can set up aliases per Amida's answer.
Also, you can set up an extra module root via resolve.modules to make webpack look into your src folder, when you are importing something absolute, like lib/utils.js
I'm trying to use Highcharts with some of its extensions (like "highcharts-more") in a project that uses webpack, TypeScript and AngularJS (version 1.5).
I've installed Highcharts through npm (https://www.npmjs.com/package/highcharts), but I'm not able to import the extensions that come with it.
The actual trick I'm doing is to set some global variables in the webpack config file
plugins: [
new webpack.ProvidePlugin({
Highcharts: 'highcharts',
HighchartsMore: 'highcharts/highcharts-more',
HighchartsExporting: 'highcharts/modules/exporting'
})
]
and extending Highcharts manually
HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
without any import in between. With this non-ideal solution TypeScript is complaining because
error TS2304: Cannot find name 'HighchartsMore'
error TS2304: Cannot find name 'HighchartsExporting'
In particular with Highcharts there is no error. Which I guess has to do with the fact that Highcharts is the only thing I manage to import, via
import * as Highcharts from 'highcharts';
which I can substitute with the Highchart global declaration in the webpack config. What I would like is to import every module in a clean way, something like
import {HighchartsMore} from 'highcharts-more';
Any idea is very much appreciated.
This type of error can occur when you do not have definition files for exported variables. Those Highcharts extensions still require them - you might want to read more about importing modules without d.ts here: https://github.com/Urigo/meteor-static-templates/issues/9 - it might change in the future.
You need to create a d.ts file for the extensions. For highcharts-more this is my file:
/// <reference path="index.d.ts" />
declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;
declare module "highcharts/highcharts-more" {
export = HighchartsMore;
}
reference path points to standard DefinietelyTyped Highcharts file from here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts
It allows to use type from Highcharts.d.ts because initializing will need proper typing for initializing extension:
HighchartsMore(Highcharts);
And finally don't forget to include all d.ts files by defining tsconfig or writing reference path in your files.
remove these lines from webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
Highcharts: 'highcharts',
HighchartsMore: 'highcharts/highcharts-more',
HighchartsExporting: 'highcharts/modules/exporting'
})
]
install typings file for highcharts using this:
npm install --save #types/highcharts
change your import statements to following:
import * as Highcharts from 'highcharts';
import HighchartsMore = require('highcharts/highcharts-more');
HighchartsMore(Highcharts);