When I import
import 'antd/dist/antd.css';
these lines I got error like below.
ERROR in ./node_modules/antd/dist/antd.css 13:6
Module parse failed: Unexpected token (13:6)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders.
| /* stylelint-disable */
| /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline
*/
> [class^=ant-]::-ms-clear,
| [class*= ant-]::-ms-clear,
| [class^=ant-] input::-ms-clear,
# ./src/index.tsx 4:0-28
Anyone please help me how to avoid this. I am using Antd for React, Typescript project with Webpack and Babel.
import this one instead with min.css extensionantd/dist/antd.min.css
Related
I'm building a react app and was planning to using Go JS as a part of the app. However, I get this error when running the default yarn test that comes with create react app:
/path/frontend/node_modules/gojs/extensionsJSM/PackedLayout.js:11
import * as go from '../release/go-module.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import * as go from 'gojs'
> 2 | import { PackedLayout } from 'gojs/extensionsJSM/PackedLayout'
| ^
3 | import { ReactDiagram } from 'gojs-react'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/components/Grid.tsx:2:1)
at Object.<anonymous> (src/App.tsx:6:1)
at Object.<anonymous> (src/App.test.tsx:4:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
I believe the bug appears because of the line import * as go from '../release/go-module.js'; in the Go JS PackedLayout file. I'm not quite sure as to how I am supposed to fix this. I assume that I'd have to somehow tell Jest to allow the import in the that particular file which is in node_modules.
I've tried adding transformIgnorePatterns: ['/node_modules/(?!gojs)'] to my jest.config.ts file but it did not fix the issue.
As documented at:
https://gojs.net/latest/intro/extensions.html
and at:
https://gojs.net/latest/api/symbols/PackedLayout.html,
you should copy the extension file into your project and update its import statement to refer to the same GoJS library file.
I opened my old project today and saw these strange warnings:
ERROR in src/App.tsx:13:17
TS2307: Cannot find module './App.module.css' or its corresponding type declarations.
11 | import { Layout, Breadcrumb } from 'antd'
12 | import Header from './components/Header/Header'
> 13 | import css from './App.module.css'
| ^^^^^^^^^^^^^^^^^^
14 | import { ROUTES } from './constants/routes'
15 | import Menu from './components/Menu'
16 |
ERROR in src/components/common/FormsControls/FormsControls.tsx:2:17
TS2307: Cannot find module './FormsControls.module.css' or its corresponding type declarations.
1 | import { FC, MouseEvent } from 'react'
> 2 | import css from './FormsControls.module.css'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | import commonCss from '../styles.module.css'
4 | import { Field, WrappedFieldProps } from 'redux-form'
5 | import cn from 'classnames'
There are also a lot of them with file formats svg, png and others. All my packages are now the most recent version.
There was no such problem before, can anyone help solve this without having to struggle with webpack?
Create a file called declarations.d.ts (you can name it anything you want)
Sometimes it is mandatory to reload your IDE but not always.
// declarations.d.ts
declare module '*.css';
declare module '*.scss';
declare module '*.svg';
// etc ...
TypeScript does not know that there are files other than .ts or .tsx hence it will complain if an import has an unknown file suffix, so in this case, we explicitly tell the compiler that we mean to load a module that can have the following extensions.
In my React app, created with CRA, I had to add in react-app-env.d.ts:
declare module '*.css';
Adding this declaration in separate file, like suggested above, did not work.
Im getting this error
./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
Module parse failed: Unexpected token (26:4)
You may need an appropriate loader to handle this file type.
|
| return (
| <React.Fragment>
| {finalData && render(finalData)}
| {!finalData && <div>Loading (StaticQuery)</div>}
gatsby-browswer-entry.js only has this inside of it:
import './src/styles/tailwind.css'
None of my .js files are failing to import the 'Link' component
Sometimes, depending on Gatsby's version and its dependencies, you need to import the component from gatsby-link rather than gatsby, so:
// import { Link } from "gatsby" // error
import Link from "gatsby-link" // not error
I had a similar issue, and was only exposed when running tests in cypress. I had used gatsby's navigate function in a non-jsx javascript helper file. I think the error is indicative of a bundling / webpack issue and you have to look at the stack trace to see the actual culprit file.
I'm trying to unit test but the only way I can stop the error throwing is to comment out the import './styles.css line.
As soon as I put it back in I get:
Jest encountered an unexpected token
...
SyntaxError: Unexpected token.
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
> 3 | import './styles.css';
| ^
4 |
5 |
I have webpack, babel, jest, enzyme all configured but googling tells me there's a difference between running the app (via webpack) and using .css files vs running tests that can read .css files, which would need to be configured separately.
For love nor money, I cannot find an example where import './styles.css is successfully imported & the tests pass.
Can anyone help?
Managed to get this working by hitting up https://github.com/eddyerburgh/jest-transform-stub
My jest.config.js now looks like this:
module.exports = {
setupFiles: ['<rootDir>/jest.setup.js'], // links to normal "configure({ adapter: new Adapter() })" stuff.
testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'], // ignores test files in .next(js) & node modules
transform: {
"^.+\\.js$": "babel-jest", // anything .js is babel'd for jest to consume
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub" // anything style related is ignored and mapped to jest-transform-stub module
},
moduleNameMapper: {
'\\.css$': '<rootDir>/EmptyModule.js' // <-- had to pop this in the following day to get any separetly imported .css files mapped to an empty module / object. So if i try to do import 'react-style-module/styles/my-styles.css' it would fail, though 'import './styles.css' worked. Now with this mapped correctly also, everything is imported/mapped/passing successfully.
}
}
If anyone else has other neater solutions, please let me know. x
In your package.json file set 'type' property to 'module'
{
"type":"module"
}
I think you declare like this:
import css from './styles.css'
<div className={css.test}>
</div>
Reference: https://github.com/zeit/next-plugins/tree/master/packages/next-css
I received error when try to import { PrimaryButton } from 'my-npm-modules/src/button' ( which is a flowtype src jsx file with extension .js)?
Is it because the create-react-app have config to NOT do flowtype processing for files in node_modules?
Module parse failed: /Users/me/live-demo/node_modules/my-npm-modules/src/button.js Unexpected token (2:35)
You may need an appropriate loader to handle this file type.
| //#flow
| import React from 'react';
| export function PrimaryButton(props: {
| text: string;
| onClick: ()=>void
When I put the button.js inside the live-demo project, it works fine.
It seems it did exclude the node_modules folder for performance reason.
So I endup compile the flow-typed jsx --> normal js files, and provided js.flow at the same output folder for sake of consumer flowtype support.