I've installed some module on my react application
these are the error I got. Please if you guys have some solution.
`./node_modules/hafas-client/p/db/index.js 4:36
Module parse failed: Unexpected token (4:36)
File was processed with these loaders:
./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| // https://github.com/tc39/proposal-import-assertions
| import { createRequire } from 'module';
const require = createRequire(import.meta.url);
| import trim from 'lodash/trim.js';
| import uniqBy from 'lodash/uniqBy.js';
`
I've try to upgrade react-script or find some loaders which can be solve this issue but no success
Related
I'm trying to upgrade to use import instead of requires for modules:
My old code looked like so:
const { NETWORK } = require(`${basePath}/constants/network.js`);
The network.js File:
export const NETWORK = {
eth: "eth",
sol: "sol",
};
module.exports = {
NETWORK,
};
When ever I try to import i've tried a few syntaxes):
import { NETWORK } from '../constants/network.js';
import NETWORK from '../constants/network.js';
import * as NETWORK from '../constants/network.js';
I get an error:
This file is being treated as an ES module because it has a '.js' file extension and '..\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///../constants/network.js:6:1
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
at async loadESM (node:internal/process/esm_loader:91:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)
When I try to rename the file to be network.cjs I get an error:
SyntaxError: Unexpected token 'export'
how can I import variables from js files using import?
You need to remove the unnecessary "module.exports" part from your network.js, because that is the way to export stuff in commonjs. Your first line of import will work after that import { NETWORK } from '../constants/network.js'; so remove the other ones
My input file looks like this:
import * as chalk from 'chalk'
const chalkInstance = new chalk.Instance({
level: 1
})
My output file looks like this:
import { Instance } from 'chalk';
const chalkInstance = new Instance({
level: 1
});
The problem is that chalk is a commonjs module and I want to my output to be an es module so when I execute the file I get the following error: The requested module 'chalk' is expected to be of type CommonJS, which does not support named exports etc. Is there a way to prevent Rollup from changing the import * as something imports? The problem doesn't go away even if I disable treeshaking.
Thank you in advance!
Preserving the import as typed won't help you — you need to do import chalk from 'chalk' instead, since CommonJS modules only have a default export. If you do preserve the import you'll still get an error, it'll just be a different error:
const chalkInstance = new chalk.Instance({
^
TypeError: chalk.Instance is not a constructor
I am having problems getting React and Jest to work together which seems odd as I thought they both came from a similar origin. My issue is around the way that the class I'm testing is being exported.
I have an ArticleService class which I could use happily in React when it was exporting as default:
class ArticleService {
constructor(articles) {
this.articles = articles;
if (!this.articles) {
this.articles =
[//set up default data....
];
}
}
getAll(){
return this.articles;
}
}
//module.exports = ArticleService;//Need this for jest testing, but React won't load it
export default ArticleService;// Can't test with this but React will load it.
Here is how it is being called in my React app (from my HomeComponent):
import ArticleService from './services/xArticleService';
and is being used happily as
const articles = (new ArticleService()).getAll();
However my tests will not run. Here is my test with an import of the class file:
import ArticleService from "../services/xArticleService";
it('correctly gets all summaries', () => {
var summaries = getFakeSummaryList();
var testSubject = new ArticleService(summaries);
var actual = testSubject.getAll();
expect(actual.length).toEqual(10);
});
and I get
FAIL src/tests/ArticleService.test.js
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
U:\...\src\tests\ArticleService.test.js:2
import ArticleService from "../services/xArticleService";
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
If (in the test) I swop
import ArticleService from "../services/xArticleService";
for
const ArticleService = require('../services/xArticleService');
and edit the export in xArticleService.js to
module.exports = ArticleService;//Need this for jest testing, but React won't load it
then the tests are executed but React will not load it:
Attempted import error: './services/xArticleService' does not contain a default export (imported as 'ArticleService').
I have a default set up, creating using create-react-app. I've not changed any .babelrc.
Can anyone see where I am going wrong?
Thanks
UPDATE:
I have made the changes to .babelrc suggested in the accepted answer to the possible duplicate of this but this has made no change to the output.
I'm normally able to resolve this error easily enough, but this time nothing seems to work.
My main.ts file has this:
import locale from 'element-ui/lib/locale/lang/en';
The error:
ERROR in /Volumes/SuperData/Sites/reelcrafter/rc-ts/src/main.ts
6:20 Could not find a declaration file for module 'element-ui/lib/locale/lang/en'. '/Volumes/SuperData/Sites/reelcrafter/rc-ts/node_modules/element-ui/lib/locale/lang/en.js' implicitly has an 'any' type.
Try `npm install #types/element-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'element-ui';`
4 | import store from './store';
5 | import ElementUI from 'element-ui';
> 6 | import locale from 'element-ui/lib/locale/lang/en';
| ^
7 | import VueDragDrop from 'vue-drag-drop';
8 | import './styles/element-setup.scss';
9 | import './bootstrap/amplify-setup';
No lint errors found
Version: typescript 3.0.1, tslint 5.11.0
In my declarations.d.ts at root level, I added the following:
declare module 'element-ui';
This doesn't fix it. Nor does declare module 'element-ui/*';. How do I fix it?
Reproduction repo: https://github.com/ffxsam/repro-element-ts-bug
Create a declaration file called shims-element-ui.d.ts with following contents:
declare module 'element-ui/*';
Within an Ionic app, I'm trying to call an external JS file's functions in a TS file and am receiving this error: (Line 9 is labelImage = function(){)
Error: Uncaught (in promise): Error: Module parse failed: Unexpected token (9:15)
You may need an appropriate loader to handle this file type.
|
| export class CloudVision{
| labelImage = function(){
| // Creates a client
| const client = new vision.ImageAnnotatorClient();
I import this JS file at the start of the TS file:
import { CloudVision } from '../../../vision.js'
and use it with:
CloudVision.labelImage()
try this
import * from '../../../vision.js
or include it in ionic-li
or look for type definition in typings