I ran create-react-app.
Made no changes and ran the tests.
The tests failed straight away.
Error: Failed to initialize watch plugin "node_modules/jest-watch-typeahead/filename.js":
● Test suite failed to run
file:///C:/_Projects/my-app/node_modules/jest-watch-typeahead/build/file_name_plugin/prompt.js:4
import { PatternPrompt, printPatternCaret, printRestoredPatternCaret } from 'jest-watcher';
^^^^^^^^^^^^^
SyntaxError: The requested module 'jest-watcher' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'jest-watcher';
const { PatternPrompt, printPatternCaret, printRestoredPatternCaret } = pkg;
at async requireOrImportModule (node_modules/jest-util/build/requireOrImportModule.js:65:32)
at async watch (node_modules/#jest/core/build/watch.js:337:34)
at async _run10000 (node_modules/#jest/core/build/cli/index.js:311:7)
What the deuce?
Can anyone please help?
This is a known issue and is related to the version of node you are using. Check out https://github.com/facebook/create-react-app/issues/11792.
Resolve it by upgrading to the latest node version >16. This worked for me. https://nodejs.org/en/download/
Related
I am attempting to mock the import of a module for use in Storybook but I can only do it with JavaScript and CJS imports, not TypeScript and ESM. My current webpackFinal contains this
config.resolve.alias['moduleToMock'] = require.resolve('../src/mocks/mockModule')
return config;
This current config doesn't work with TypeScript and will throw an error saying that the mock module can't be found. How can I configure this to work with TypeScript?
In general TypeScript only throws errors when you try to compile the code. If you encounter an error on code execution this is very likely more related to your code rewrite. If the webpackFinal of the Storybook already supports ESM and you need to import the module synchronously then you can create a replacement for the require function like this:
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
...
config.resolve.alias['moduleToMock'] = require.resolve('../src/mocks/mockModule')
Hope it helps.
I am working on a Next.js project that uses Firebase. I'm trying to make a simple query with Firestore and I'm getting the following error:
SyntaxError: The requested module '#grpc/grpc-js' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from '#grpc/grpc-js';
const { credentials, loadPackageDefinition, Metadata } = pkg;
It seems like Firebase library wouldn't work with '#grpc/grpc-js' in Next.js asks the same question, but I'm not sure what Node version to upgrade or downgrade to.
When I add a new React component to my NextJS app (React, TypeScript and GraphQL), my local development environment suddenly breaks with this cryptic error:
wait - compiling...
error - ./node_modules/busboy/lib/main.js:1:0
Module not found: Can't resolve 'fs'
null
When I stash my new component, everything works fine. I'm trying to figure out what it is in my new component that's triggering this error.
Relevant dependencies:
#apollo/client: ^3.2.5
apollo-server-micro: ^2.18.2
graphql: ^15.4.0
next: 10.0.0
react: 17.0.1
react-dom: 17.0.1
Turns out I was importing gql from the wrong package. As I'm building both the server and the client in one app, I have to be careful importing the right methods from the right packages.
This line from my imports caused the error:
import { gql } from "apollo-micro-server
Changing the line to this fixed the error:
import { gql } from "#apollo/client"
NOTE: I fixed this by moving all of the code inside my src/nod_modules folder into the src folder directly and deleting src/node_modules as per this short thread: https://github.com/facebook/create-react-app/issues/4241
I am using create-react-app and having trouble running Jest.
When I attempt to import any one of my React components into my test file, I get an error when I yarn test:
Test suite failed to run
.../src/node_modules/common/ErrorMessage.js:1
({"Object.<anonymous>":function(
module,exports,require,__dirname,__filename,global,jest)
{import React from 'react'
^^^^^^
SyntaxError: Unexpected token import
This is what my test file looks like:
// test.test.js
// attempting to import
import ErrorMessage from '../node_modules/common/ErrorMessage.js'
// dummy test
test('adds 1 + 2 to equal 3', () => {
expect(1 + 2).toBe(3)
})
However, the error does not get thrown if I'm at the root of the src file, importing my index.js. At that point, the error gets thrown in the first file that index.js imports. For example:
test.test.js
import index from './index'
index.js
import React from 'react'
import { render } from 'react-dom'
import './style/index.css'
import LoginContainer from './node_modules/user/LoginContainer'
import NewUser from './node_modules/user/NewUser'
// etc.
terminal output
FAIL src/test.test.js
● Test suite failed to run
/Users/hannahmccain/Desktop/DEV/expense-report/fullstack-expense-report/client/src/node_modules/user/LoginContainer.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { Component } from 'react'
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (src/index.js:11:164)
at Object.<anonymous> (src/test.test.js:3:14)
It seems like, in the context of Jest, Babel isn't able to compile the files in src/node_modules properly. I'm just at a loss as to how to correct that! Any insights would be appreciated.
FYI, Jest is supposed to work out-of-the-box with create-react-app, and I don't want to eject. Without ejecting, I'm unable to make certain changes I've seen recommended elsewhere, such as updating the Jest settings in my package.json.
To follow up with #Himanshu Singh answer, by adding this in my package.json helped me resolved this error.
{
test: react-scripts test --transformIgnorePatterns \"node_modules/(?!ui-core)/\" --env=jsdom
}
The code inside node_modules/user/LoginContainer.js is not a production release (babelified version) as it still has those import statement.
Jest that comes pre-configured with create-react-app, excludes everything inside node_modules from babel-transformation before running tests assuming that the code inside node_modules would be pre-babelified.
And since your module inside node_modules isn't babelified, jest throws error as soon as it encounters import statement.
Solution
1. You must be having a build script for your node_module in use. Try placing the production release of your module inside node_modules.This will do the trick but will also create further issues (as per my experience).
2. Start configuring jest and its dependencies explicitly without ejecting. Essentially by changing your test script to jest --env=jsdom. You will need to install jest, react-dom, babel-transforms-* explicitly and then configure using jest configuration inside package.json.
Here you need to focus on two major configuration option - transformIgnorePatterns and transform.
In short, transform everything and ingnore everything that is already transformed.
Take a look at Jest configuration section for more details.
I'm trying to upgrade an Angular1.4.0 app to use the latest angular-ui-router, but I can't figure out how to reference this package in code. I'm using webpack 1.12.9 and node 6.10.2. I've installed package "#uirouter/angularjs" version 1.0.3.
Using CommonJs modules, the following used to work with version 0.2.14:
require('angular-ui-router')
I've tried variants of the following, but with no luck:
require('#uirouter/angularjs/lib')
I am getting the error:
Error: [$injector:modulerr] Failed to instantiate module {"core":`{"services":{},"Category": ..... (remaining stack omitted)
Any ideas?
May be this is necroposting but:
I am facing with same issue right now so here is the answer:
Try to use uiRouter.default package when register dependencies.
Like here:
import * as uiRouter from 'angular-ui-router';
const dependencies = [uiRouter.default];
const app = angular.module('app', dependencies);