When i tried run a cypress test that use a react-phone-number-input a webpack error appears, this error only appears in cypress, my react project don't show this error and works fine, is there a solution in webpack or cypress that can remove this error?
Error: Webpack Compilation Error
./node_modules/react-phone-number-input/style.css 2:0
Module parse failed: Unexpected token (2:0)
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
| /* CSS variables. */
> :root {
| --PhoneInputCountrySelect-marginRight: 0.35em;
| --PhoneInputCountrySelectArrow-width: 0.3em;
# ./src/components/InputPhoneNumber/index.js 15:0-44
# ./src/components/SignUpForm/index.js
# ./src/components/ProductForm/index.js
# ./src/tests/ProductForm.spec.js
My Webpack config is this
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'public' }
]
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'style-loader' // inject CSS to page
},
{
loader: 'css-loader' // translates CSS into CommonJS modules
},
{
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader' // compiles Sass to CSS
}
]
}
]
}
}
The css-loader doesn’t compile css root parameters.
This answer will help you solve the problem
https://github.com/webpack-contrib/css-loader/issues/69#issuecomment-108597013
Related
I'm trying to use cypress for integration testing on a React project. However, I'm getting the following error:
Error: Webpack Compilation Error
./node_modules/react-pro-sidebar/dist/css/styles.css 1:0
Module parse failed: Unexpected character '#' (1:0)
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
As the error suggests, I'm using the react-pro-sidebar package.
The first lines of the .css file of the package that is causing the error,
> #keyframes swing {
| 0%,
| 30%,
I've tried installing the css and scss webpack loader but it still failed.
Here's my webpack.config.js file,
const {resolve} = require('path');
module.exports = {
entry: [
'./md5.js'
],
output: {
path: resolve('./dist'),
filename: 'md5.min.js',
libraryTarget: "var",
library: "MD5"
}
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader'],
},
]
}
};
The code that triggers the error,
import React from 'react';
describe('example to-do app', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
})
it("containsMain",()=>{
cy.contains(".main")
})
})
The error also happens if I just try to load the page as well.
I am using webpack and react js.
I am getting this error when i try to import image or font file inside my scss file.
I have tried many solutions but none of them solved my problem,
webpack.common.js
enter image description here
const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(ttf|svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs"
}
}
}
]
}
};
Here is another webpack.dev.js
module.exports = merge(common, {
mode: "development",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
}
]
}
});
ERROR in ./src/assets/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/assets/index.scss)
Module not found: Error: Can't resolve '../../../src/assets/fonts/icomoon.ttf' in 'C:\Users\jamal\Documents\webpack-demo-app\src\assets'
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
You need to remember that the import actually takes "place" from the root index.scss file (the one that loads all the other partials). So the path you are using to fetch the asset is not accurate.
You need to use ./fonts/icomoon.ttf instead of ../fonts/icomoon.ttf
your file structure:
assets/
------/fonts
------/images
------/sass
------/---/partial1.scss // while the reference to the image is here
------/index.scss // the actual root of the reference call is here
I am using styleguidist for my react application, here is the code of my styleguid.config.js file:
module.exports = {
webpackConfig: {
module: {
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
}
]
}
}
}
Now I want to show barcode image in my styleguidist server which is running in http://localhost:6060.
Code of my styleguidist readme.md
```jsx
var Macybarcode = require('../../../containers/assets/img/macy/barcode.png');
const barcode_img = Macybarcode;
const barcode_no = "33527111690008";
<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />
```
But whenever I am trying to show image my server is giving following error:
Please click to see the Error console
You need url-loader for images
Use:
npm install url-loader --save
module.exports = {
webpackConfig: {
module: {
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000
}
}
}
]
}
}
}
try this line inside
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
This is the error message that I get (I removed part of the file path for security reasons):
ERROR in ./react-components/MyComponent.js
Module parse failed: /home/vagrant/src/***/react-
components/MyComponent.js Unexpected token (6:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div>
| <p>FooBar: {this.props.fooBar}</p>
| <p>Baz: {this.props.baz}</p>
# ./client/app/app.module.js 52:19-64
# ./client/app/index.js
Right now, all I'm trying to do is to just allow a React component to live inside an Angular 1.X project. This is what the webpack config looks like:
webpack.make.js:
config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
use: [{
loader : 'babel-loader',
options : {
shouldPrintComment(commentContents) {
// keep `/*#ngInject*/`
return /#ngInject/.test(commentContents);
},
plugins : TEST ?
[[ 'istanbul', { 'exclude' : [ '**/*.spec.js'] }]]
: [],
presets : ['es2015', 'react', 'stage-0']
}
}],
include: [
path.resolve(__dirname, 'client/')
]
},{
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)([\?]?.*)$/,
loader: 'file-loader'
}, {
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader'
}, {
// CSS LOADER
// Reference: https://github.com/webpack/css-loader
// Allow loading css through js
//
// Reference: https://github.com/postcss/postcss-loader
// Postprocess your css with PostCSS plugins
test: /\.css$/,
loader: !TEST
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development for hot-loading
? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
// PostCSS
// Reference: https://github.com/postcss/autoprefixer-core
// Add vendor prefixes to your css
loader: 'postcss-loader',
options : {
plugins : [
autoprefixer({browsers: ['last 2 version']})
]
}
}
]
})
// Reference: https://github.com/webpack/null-loader
// Skip loading css in test mode
: 'null-loader'
}, {
// SASS LOADER
// Reference: https://github.com/jtangelder/sass-loader
test: /\.(scss|sass)$/,
loader : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
// PostCSS
// Reference: https://github.com/postcss/autoprefixer-core
// Add vendor prefixes to your css
loader: 'postcss-loader',
options : {
plugins : [
autoprefixer({browsers: ['last 2 version']})
]
}
},
{
loader : 'sass-loader',
options: {
outputStyle: 'compressed',
precision: 10,
sourceComments: false
}
}
]
}),
include: [
path.resolve(__dirname, 'client/app/app.scss')
]
}, {
// Imports Loader
// This allows the CodeMirror json linter to find jsonlint, which it expects to be global
test: require.resolve('codemirror/addon/lint/json-lint'),
use: 'imports-loader?jsonlint=jsonlint-mod'
}
]
};
And here is my .babelrc:
{
"presets": ["es2015", "react", "stage-3", "stage-0"]
}
I've tried both stage-3 and stage-0, but I still get the same error. I made sure to install babel-preset-react via npm. There's nothing wrong with the JSX in the JS file, as it's a simple React component that's used as example code from a repository that I'm using. I've gotten to a point where I'm not sure where to look next.
I forgot to add path.resolve(__dirname, 'react-components') in the includes object, where the JS file in question resides.
I am trying to use react-datetime on my react-on-rails app. To make the datetime work out of the box, I need to import the CSS mentioned on their GH page.
On my app, I copy/paste the CSS into a file I named DateTime.css:
...
import DateTime from 'react-datetime';
import '../../schedules/stylesheets/DateTime.css';
...
export default class AddDate extends React.Component {
But it gives me this error:
VM45976:1 Uncaught Error: Module parse failed: /Users/some/path/to/my/project/App/components/schedules/stylesheets/DateTime.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .rdt {
| position: relative;
| }
It seems like the CSS loader is not working. I tried this on pure react app (create-react-app) and it worked. It broke when I did it inside react_on_rails.
This is my webpack config atm (standard out-of-the-box react_on_rails):
const webpack = require('webpack');
const { resolve } = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
const configPath = resolve('..', 'config');
const { devBuild, manifest, webpackOutputPath, webpackPublicOutputDir } =
webpackConfigLoader(configPath);
const config = {
context: resolve(__dirname),
entry: {
'webpack-bundle': [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/App/startup/registration',
],
},
output: {
// Name comes from the entry section.
filename: '[name]-[hash].js',
// Leading slash is necessary
publicPath: `/${webpackPublicOutputDir}`,
path: webpackOutputPath,
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
DEBUG: false,
}),
new ManifestPlugin({ fileName: manifest, writeToFileEmit: true }),
],
module: {
rules: [
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
},
},
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: 'css-loader',
exclude: /node_modules/,
},
],
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
I am very new in webpack, and not sure how to I can add loaders to make it work, how can I apply the DateTime.css file that I have to be applied to react-datetime?
EDIT: added css-loader (also updated the webpack above). It is no longer complaining that I don't have the correct loader, but the CSS does not work.
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: 'css-loader',
exclude: /node_modules/,
},
],
There are 2 conceptually different ways to approach this.
1. Using CSS modules.
This way your CSS will end up bundled with your JS and as soon as webpack loads that JS module/bundle it will automatically append CSS style element into the head.
In my project I have this rule to do exactly that (note that we use both css-loader and style-loader):
{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}]
}
More on css-loader modules at this link.
2. Using ExtractTextPlugin. This way all your CSS will be extracted into a separate file. The configuration requires 2 things: a plugin and loaders configuration created by the plugin:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Add this to your webpack plugins array
new ExtractTextPlugin('styles.css')
And add this to your rules:
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
}
This will create one single styles.css file and put all CSS you import from JS into that file.