I am trying to import Swiper for react in to my application and use it in Storybook.
I have the following import:
import { Swiper, SwiperSlide } from 'swiper/react';
This works in the React app but not in Storybook, I get the following error:
ModuleNotFoundError: Module not found: Error: Can't resolve 'swiper/react'
Other React modules have import without a problem. Do I need to change some configuration in Storybook?
Swiper v7+ uses ESM module. To make it work with storybook, you have to update storybook to use webpack5 instead of the default webpack4. Also ensure that your current node version must be equal or higher than 12.20, 14.13 or 16. These are versions that support ESM module.
In my case, I also delete addons #storybook/react line in .storybook/main.js as it still uses webpack4 and raises configuration Validation Error. After that it runs fine.
Full instruction
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
https://storybook.js.org/blog/storybook-for-webpack-5/
Related
I need to support ESM packages, to be able to update Swiper to version 7.
My React project doesn't use Create React App.
I tried the following, written in their docs (to use it without support of pure ESM packages yet).
In Slideshow.tsx, I import Swiper and modules like (described in their docs as workaround):
import { Autoplay, EffectFade, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';
When I try to compile and run npm start I get the following message in terminal:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /my-project/node_modules/swiper/swiper.esm.js
require() of ES modules is not supported.
require() of /my-project/node_modules/swiper/swiper.esm.js from
/my-project/build/server/server.js is an ES module file as it is a .js
file whose nearest parent package.json contains "type": "module" which
defines all .js files in that package scope as ES modules. Instead
rename swiper.esm.js to end in .cjs, change the requiring code to use
import(), or remove "type": "module" from
/my-project/node_modules/swiper/package.json.
What do I have to do to get this working?
try explicitly including the file extension (.js)
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
I read that this might be important for the workaround.
I have a Nextjs app and trying to use the Image feature.
I am importing the dependencies like so:
import React from "react";
import Link from "next/link";
import Image from "next/image";
but getting this error
Module not found: Error: Can't resolve 'next/image'
only for next/image and not for next/link which is confusing me.
The problem can be solved by
Updating Nextjs using npm install react#latest react-dom#latest, [This solution can break your project make sure you need to update]
Ensuring you're importing next/image in small letters not
next/Image in capital letters.
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"
I created react by create-react-app my-app --typescript.
And then I installed typescript module in local.
../typescript-module/A.ts
export default class A {
}
App.ts
import A from 'typescript-module/A';
console.log(A);
I try to import typescript module to my react app.
But it show error like under.
./node_modules/typescript-module/A.ts
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
How can I set installing local typescript module ?
If I am understanding correctly, you are trying to import a local custom made React component. If you use an absolute path for your import, it will try to find it in the node_modules. You should use relative paths for local modules/components.
import 'typescript-module/A' -> import './typescript-module/A'
Note: The relative path depends on where you are importing it from
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.