Create-React-App with Moment JS: Cannot find module "./locale" - javascript

Just ran an npm update on my web application and now Moment JS appears to be failing with the following message:
Error: Cannot find module "./locale"
\node_modules\moment\src\lib\moment\prototype.js:1
> 1 | import { Moment } from './constructor';
Not sure what version of Moment JS I had prior to my update, but my application has been working for months.
I created another react app and ran an npm install moment --save and modified the source to display the time and ended up with the same error described above.
Not sure if there is a fail-proof way to integrate Moment JS using Create-React-App currently short of ejecting to manage the webpack settings myself, but I really don't want to do this. Anyone else seeing these issues or having success? If so, a short write up would go along way to helping out.

Appears this has already been identified as an issue for Moment JS version 2.19. If you have upgraded to 2.19 run npm install moment#2.18.1 to revert back to previous version until it is fixed!
See thread: https://github.com/moment/moment/issues/4216

Application built with Create React App and using Moment 2.24.0, the following seems to be working fine:
import moment from 'moment';
import 'moment/min/locales';
Instead of importing moment-with-locales directly. Alternatively, also possible to only import required locales:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/ru';

The answer above, though I have no doubt works for some, does not work for me. The solution I found is fairly quick and easy, but is a little more complicated than simple downgrading.
This problem originates as a result of and can be fixed with webpack. So we're going to have to add a few lines of code to our webpack.config.js file. If you don't have one yet, you can add one to the root webpack directory:
YOURAPPNAME/node-modules/webpack/
So now that you're inside your webpack.config.js file, you need to add a few lines of code. Just copy and paste this inside the new file or adapt it to the code you already have in webpack.config.js.
module.exports = {
resolve: {
alias: {
moment$: 'moment/moment.js'
}
}
};
Your import statement of moment in your index.js (or otherwise named) file should look like this:
import moment from 'moment'
You should now be able to use moment completely normally. For example:
var tomorrow = moment().add(1, "day")

If you have a fresh install, or upgraded moment to 2.25 and are getting this warning now, try forcing all your packages to use 2.24.
UPDATE: New release 2.25.3 has been reported to fix this problem! Try to first just update.
If you depend on some library that didn't upgrade yet, tell them to upgrade. And in the meantime, if you need 2.25, you can force also your sub-dependencies to use this version.
If you're using yarn add these lines into package.json
"resolutions": {
"**/moment": ">=2.25.3"
},
This is to be added inside packages.json at the top level, i.e. with the same indentation as "dependencies".

Related

Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

I type:
npm test
and I get:
It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.
I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.
This is the repo/branch of this question.
When I type npm start. Everything flows swiftly and with no errors.
The error occurs because jestdom is not able add canvas, which we need to do. For me this happened because I was using lottiefiles for the application.
Here is how I fixed it for my react application.
Install jest-canvas-mock as below .
npm i jest-canvas-mock
Then go to setup file like setup-tests.js and import jest-canvas as below .
import "jest-canvas-mock";
Now run test, you should not get errors any more.
I solved it by following this instructions.
Thanks CherryDt.
Installing npm i jest-canvas-mock
and Importing import "jest-canvas-mock" in set-up file; works for me

agGrid rollup example shows missing ClientSideRowModelModule

I tried to execute the minimal rollup example that ag-grid shows at their page. But no matter what, I won't get it to work. The Error I get is:
ag-Grid: could not find matching row model for rowModelType clientSide
Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '#ag-grid-community/client-side-row-model';
I tried importing ClientSideRowModelModule and ClientSideRowModel, as stated in the error, but that changes nothing.
I tried and stepped through the bundled code and it seems that it is not possible for aggrid to access their own modules, although they are present.
I uploaded the example to github, just clone, npm i && npm run rullup and then open the index.html file.
https://github.com/dennis-f/ag-grid-clientsiderowmodel-bug
git clone git#github.com:dennis-f/ag-grid-clientsiderowmodel-bug.git
npm i && npm run rollup
Okay I managed, to get it to work.
Old:
import {Grid} from '#ag-grid-community/all-modules';
New:
import {AllCommunityModules, Grid, ModuleRegistry} from '#ag-grid-community/all-modules';
ModuleRegistry.registerModules(AllCommunityModules);
I don't know why this is missing in all those examples, but you need to register your modules manually, even if you use the 'all-modules' package.
It is not aware, that all modules should be loaded on startup. It's a nice solution, but unfortunately it's only explained here.
Instead of AllCommunityModules you can obviously load only the ones you actually need.

How can I resolve the following compilation error when running Jest for testing?

Although I am able to start the npm project using npm start without any issues with webpack or babel, once I run npm test, I find the following error related to testing App.js using App.test.js (where App.js imports ApolloClient):
TypeError: Cannot assign to read only property '__esModule' of object '[object Object]'
| import ApolloClient from 'apollo-boost';
| ^
at node_modules/apollo-boost/lib/bundle.cjs.js:127:74
at Array.forEach (<anonymous>)
at Object.<anonymous> (node_modules/apollo-boost/lib/bundle.cjs.js:127:36)
Essentially, I'm confused as to why I get an error when running the test but not when starting the project.
I've tried adding in a number of babel plugins to both .babelrc and in my webpack config file:
#babel/plugin-transform-object-assign
#babel/plugin-transform-modules-commonjs
babel-plugin-transform-es2015-modules-commonjs
However, I haven't been able to resolve the issue. My thinking was that this is related to the fact that the file that fails to compile was originally CommonJS.
I was only able to find something relatively similar here, https://github.com/ReactTraining/react-router/pull/6758, but I didn't find a solution.
Is there something that I'm missing specifically related to running tests? I should also mention I've tried frameworks other than Jest and ran into the same issue.
EDIT:
I removed everything from App.test.js except the imports to isolate the issue so it just contains the following:
import React from 'react';
import { shallow } from 'enzyme/build';
import App from './App';
UPDATE:
I was able to resolve the initial error by upgrading apollo-boost from version 0.3.1 to 0.4.2. However, I now have a different error that is similarly frustrating. I am using Babel 7 and have added the plugin #babel/plugin-syntax-dynamic-import to both my .babelrc and to my webpack.config.js files. Despite this, I get the following error related to the use of a dynamic import in App.js when running the Jest to test App.test.js:
SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled
Add #babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
I'm not sure if there is a parsing error or something else, but I've tried numerous things that have not worked. The closest discussion I could find related to this problem is, https://github.com/facebook/jest/issues/5920, however, the proposed solutions don't work for me.
UPDATE:
One thing that I'm trying is to avoid duplication of the babel options as right now they're both in .babelrc and in the babel-loader options within webpack.config.js. From what I found online (Whats the difference when configuring webpack babel-loader vs configuring it within package.json?), the way to make webpack use the settings in .babelrc is to not specify options. However, doing so results in the same error described above showing up only this time when running npm start. I will add that the project that was originally created using create-react-app, however, in order to support multiple pages, I needed to customize webpack's configuration and so ejected from it. I'm not sure why this is so convoluted.
its probably a babel configuration issue, I'm pretty sure jest needs to be compiled to work with create-react-app...
did you specify a setup file in package.json:
"jest": {
"setupFiles": [
"/setupTests.js"
]
}
and in setupTests.js:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
It turns out that one of the components in the project's src directory had its own local package.json file even though it wasn't being used and was not installed as a local dependency in the top level package.json (instead imports were done using relative urls). For some reason, the existence of this file changed the behavior of webpack and other tools when starting and testing the project such that none of the top level configurations were used for files within directories with separate package.json files. Once I removed these local package.json files from the components sub-directory, all the prior issues were resolved. One hallmark of this problem is that compilation errors were not showing up for JavaScript files that weren't nested under an alternate package.json file.
Hopefully this is useful for anyone that encounters similar errors as I don't think the cause can be directly determined from the compiler messages alone.

How do I import a single component from this library?

I'd like to understand how to use Babel, webpack or whatever the tool I need to import a single component from a library.
Here https://rsuitejs.com/en/guide/usage when you scroll down to 'Use modularized rsuite' they say that I need to install babel-preset-rsuite and then add a .babelrc file, but with this in it:
{
"presets": ["rsuite"]
}
I've done it, and it still does not import the .less styles. So I end up with an HTML button without the nice styling that goes with it.
(I'm a bit titled, have tried every possible thing and nothing works, I just broke my entire codebase because of another webpack issue, fortunately I was able to recover it thanks to my VCS)
Can someone, please, explain the beginner that I am what exactly do I have to do? Do I have to run a specific command instead of react-scripts start so that it takes this .babelrc file into account?
Thanks
OFF:
To use a single component from a library:
Install a library
Import the necessary component:
import { Example } from 'example-installed-library'
ON:
And related to babel, I recommend this article to read:
https://www.valentinog.com/blog/react-webpack-babel/
And of course it's own site with documentation: https://babeljs.io/
By not introducing less by default, you need to configure style: true.
{
"presets": [["rsuite", { style: true }]]
}

How to import poorly named libraries?

Background
I am using a library called baguettebox.js
You can see it here
Problem
When I import this into my project like
import * as BaguetteBox from 'baguettebox.js';
I get a warning flagged inside my IDE PhpStorm
Cannot resolve file 'baguettebox.js'
This is because the folder & package.json are called baguettebox.js.
The Package is actually found and works in my application, I just want a good way to handle this error.
It's the IDE issue. Please follow WEB-25805 for updates

Categories