I have a module which I want to write a test for. I use webpack to transpile it because I'm writing it in ES6.
The file (app.js) starts like this:
import template from './app.html'; // pulls in the template for this component
import './app.scss'; // pulls in the styles for this component
But when I run the test, I get an error that app.scss is not found
ERROR in ./src/app.js
Module not found: Error: Cannot resolve module 'scss' in /Users/.../src
# ./src/app.js 11:0-21
13 05 2016 10:38:52.276:INFO [..browserinfo..]: Connected on socket /#KYFiNbOR-7lqgc9qAAAA with id 63011795
(browser) ERROR
Uncaught Error: Cannot find module "./app.scss"
at /Users/.../spec.bundle.js:34081 <- webpack:///src/app.js:4:0
Finished in 0.241 secs / 0 s
The test starts like this:
import angular from 'angular';
import header from './app.js'; // error occurs here cause .scss file is not recognized
describe('my module', () => {
let $rootScope, makeController;
// testing stuff
});
My karma.conf.js file includes this:
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
{ test: /\.html/, loader: 'raw' },
{ test: /\.scss/, loader: 'style!css!scss' },
{ test: /\.css$/, loader: 'style!css' }
]
}
}
How do I get karma/webpack to read the scss file correctly and run my tests?
The problem was a typo:
scss should have been sass
webpack: {
module: {
loaders: [
...,
{ test: /\.scss/, loader: 'style!css!sass' },
...
]
}
}
Related
I have a react project that uses styled components, and I'm trying to include a CSS file as part of react-image-gallery
I followed the steps to include css-loader and style-loader in my project and tried importing the file like this
import 'react-image-gallery/styles/css/image-gallery.css
and included the following in Webpack config rules
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
When running the server I'm getting the below error message
SyntaxError: Invalid or unexpected token
(function (exports, require, module, __filename, __dirname) { #charset "UTF-8";
in the above CSS file
From some googling, I understood that this is because the CSS file is included as a JS file by Webpack. But isn't that how it is supposed to be?
Addition info: I have a server side rendered app.
What am I doing wrong?
Update:
My rules look like this
A rules.ts file
import webpack from 'webpack'
const ts: webpack.RuleSetRule = {
test: /^(?!.*\.spec\.tsx?$).*\.tsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
}
const img: webpack.RuleSetRule = {
test: /\.(png|jpe?g|gif|svg)$/,
use: 'file-loader',
}
const css: webpack.RuleSetRule = {
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
export default {
client: {
ts,
img,
css,
},
server: {
ts,
css,
img: { ...img, use: [{ loader: 'file-loader', options: { emitFile: false } }] },
},
}
A config file that has the following
const config: webpack.Configuration = {
context: path.join(__dirname, '../../src/client'),
resolve: {
...resolve.client,
alias: { 'react-dom': '#hot-loader/react-dom' },
},
devtool: false,
entry: {
main: ['./index.tsx'],
},
mode: 'development',
module: {
rules: [rules.client.ts, rules.client.img, rules.client.css],
},
output: output.client,
plugins: [
...plugins,
...developmentPlugins,
new ForkTsCheckerWebpackPlugin({
tsconfig: path.join(__dirname, '../../tsconfig.fork-ts-checker-webpack.plugin.json'),
}),
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['!webpack.partial.html', '!favicon.ico'],
}),
],
}
We had 4 co-workers stuck on an issue like that.
Actually, we had a plugin "nodemon-webpack-plugin", which we configured for webpack.
This plugin tried to execute files like .css as java-script files.
We finally removed this plugin, because we had an up and running mon already.
I just tried to install [Vue-double-list][1] in my Vue app.
I have a fail to compile Webpack, but I do not know how resolve it.
I use postcss.
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
postcss: [require('postcss-cssnext')()],
loaders: {
}
// other vue-loader options go here
}
},
And it is the fail
./node_modules/vue-double-list/index.js
Module parse failed: Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
| export default from './dist/vue-double-list.common'
| export * from './dist/vue-double-list.common'
| import './dist/vue-double-list.css'
# ./src/main.js 11:0-41
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
server ./src/main.js
I'm very new to reactjs and webpack. I want to load html file to reactjs via using I use html-loader and webpack, but got this error
Failed to compile.
./src/test_ts.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
| <body>
This is my webpack config
var path = require("path");
var webpack = require("webpack");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
module.exports = {
entry: "./src/header.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "app.bundle.js"
},
module: {
loaders: [
{
test: /\.html$/,
loader: "html"
},
{
test: /\.js$/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
}
]
},
stats: {
colors: true
},
devtool: "source-map"
};
and this is where I want to load
import React from "react";
import { Button } from "reactstrap";
var htmlContent = require("./test_ts.html");
class Header extends React.Component {
render() {
return <div></div>;
}
}
export default Header;
I try to follow many tutorial but can't resolve this, what may I do wrong?
Add the following rule to your webpack.config file:
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}
Before that install html-loader using command: npm i -D html-loader :
When I want to create my bundle.js with:
$ ./node_modules/.bin/webpack --config webpack.config.js
I get the following error
ERROR in ./dev/js/source/scripts/components/TextInput.js Module not
found: Error: Cannot resolve module
'source/scripts/components/IconButton' in
/Users/sebastien/Documents/Javascript/Tests/MyApp/dev/js/source/scripts/components
# ./dev/js/source/scripts/components/TextInput.js 4:18-65
ERROR in ./dev/js/source/scripts/components/TextInput.js Module not
found: Error: Cannot resolve module 'source/scripts/SDK/classNames' in
/Users/sebastien/Documents/Javascript/Tests/MyApp/dev/js/source/scripts/components
# ./dev/js/source/scripts/components/TextInput.js 15:17-57
The project tree is the following
/Users/sebastien/Documents/Javascript/Tests/MyApp
- webpack.config.js
- dev
- js
- index.js
- source
- scripts
- components
- TextInput.js
- IconButton.js
- SDK
- classNames.js
In TextInput.js there's the following statement
import IconButton from "source/scripts/components/IconButton";
and my webpack.config.js contains the following
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 8080
},
devtool: 'cheap-module-eval-source-map',
entry: './dev/js/index.js',
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin()
]
};
How can I configure webpack to add the path ./dev/js to search for modules? I have tried with:
- modules: [path.resolve(__dirname, "./dev/js"), "node_modules"]
without any success. Can you help?
Regards,
Try
import IconButton from "./source/scripts/components/IconButton";
and see if that helps.
or
import IconButton from "../source/scripts/components/IconButton";
but the first one should probably work. Give it a try.
I'm trying to create a grails app with React as a frontend. There's a problem with loading an image though. I tried a few things and at first the image wouldn't load at all. I also tried linking to a picture on the internet and it works as intended.
Now I'm getting this error:
Module parse failed: /Users/miggy/projects/brochure/src/main/js/process/example.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
at Parser.pp$4.raise (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2756:10)
at Parser.pp$7.readToken (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2477:17)
at Parser.pp$7.nextToken (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2468:15)
at Parser.parse (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:515:10)
at Object.parse (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/miggy/projects/brochure/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule.<anonymous> (/Users/miggy/projects/brochure/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/miggy/projects/brochure/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/miggy/projects/brochure/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:416:3)
# ./src/main/js/process/process-page.js 13:15-39
This is my webpack.config.js:
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
index: './src/main/js/index.js'
},
output: {
path: './grails-app/assets/javascripts',
publicPath: '/assets/',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'src/main/js'),
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
This is my component.js:
import React, { Component } from 'react'
import ProcessImg from './example.'
class ProcessPage extends Component {
render() {
return (
<div>
<div>
<img src={ ProcessImg } alt="boohoo" className="img-responsive"/>
</div>
Process
</div>
)
}
}
export default ProcessPage;
It isn't working because you are not using webpack file-loader. You need to install it using npm like this:
npm install --save-dev file-loader
Also, you need to modify the webpack.config.js so webpack can recognize the loader. Here is an example:
(You can also add options to the loader using query. See webpack documentation for query parameters.)
loaders: [
// babel loader
{ test: /\.png$/, loader: 'file-loader' }
]
Then in your component.js file, the import needs to end with extension:
import ProcessImg from './example.png';