Im getting Syntax Error like below while using ReactDOMServer and Sass in my project:
SyntaxError: /Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss: Unexpected character '#' (1:3)
0|server | > 1 | img#logo{
0|server | | ^
0|server | 2 | height: 100%;
0|server | 3 | }
webpack.config.js:
const path = require('path');
const config = {
resolve: {
alias: {
Assets: path.resolve(__dirname, 'lib/assets/'),
}
},
entry: ['babel-polyfill', './lib/components/App.js'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.(png|jpg)$/i,
exclude: /node_modules/,
loader: 'url-loader',
include: path.resolve(__dirname, 'lib/assets/images')
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
};
module.exports = config;
This is my server scripts with ExpressJs
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';
const serverRender = () => {
return ReactDOMServer.renderToString(
<App />
);
};
export default serverRender;
Menu component is child component of App component, and Menu.scss imported like below:
import React from 'react';
import './Menu.scss';
export default class Menu extends React.Component {
render() {...}
}
and Finally Menu.scss :
img#logo{
height: 100%;
}
Do you have any suggestion? Could you tell me please, whats wrong with my source ?
Thanks!
After long investigation I found 2 type of solution for this issue thanks to dimaip!
So , Im giving related links below you can check if you have this problem like me:
1) 1st is adding env variable to check in webpack for importing css or not, and using .css file seperated from bundle.js
For this solution you can check this link
2) 2nd solution is using webpack for server-side renderToString function and using it inside app.get('*')
Additionaly, you can check this link
Thanks!!!
Related
I am getting following error while trying to build using webpack
ERROR in ./packages/chat/index.js 12:2
Module parse failed: Unexpected token (12:2)
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
| console.log('start rendering chat');
| ReactDOM.render(
> <div>
| <Provider store={globalStore}>
| <ChatUi />
FILE --> webpack.config.js
const path = require('path');
const appPath = suffix => path.resolve(__dirname, suffix);
const entries = { chat: appPath('../packages/chat/index.js') };
module.exports = {
name: 'Library',
entry: entries,
output: {
path: appPath('../dist'),
libraryTarget: 'var',
filename: '[name]/index.js'
},
mode: 'production',
resolve: {
extensions: ['.js']
},
module: {
rules: [
{
test: /[\.js|\.jsx]$/, /* only load js and jsx files and ignore non js files */
loader: 'babel-loader',
exclude:path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, './packages')
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
};
FILE --> .babelrc
{
"presets": ["es2015", "react", "stage-0"]
}
FILE --> index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ChatUi from '../../src/chatUi/ChatUi';
import { Provider } from 'react-redux';
import {globalStore} from '../../src/common/load-redux';
console.log('start rendering chat');
ReactDOM.render(
<div>
<Provider store={globalStore}>
<ChatUi />
</Provider>,
</div>,
document.getElementById('chat')
);
Already spent almost a whole day going through similar questions on stack overflow with no success. Getting frustrated now... :(
<div>
<Provider store={globalStore}>
<ChatUi />
</Provider>, <----- there is your problem
</div>,
Update
Check your presets. Not sure if react in there is just an alias for #babel/preset-react or if you placed the react framework lib there by accident.
{
"presets": ["es2015", "react", "stage-0"]
}
should read
{
"presets": ["es2015", "#babel/preset-react", "stage-0"]
}
I´m trying to import a simple Component but the webpack seems to cant find it. The route is good and the "resolve" in the webpack config is great too, therefore I cant understand where is the issue.
Give it at look please.
By the way, its a Sails/React environment.
ERROR in ./assets/src/component/Hello.jsx 6:12
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Hello.jsx:
import React from 'react'
class Hello extends React.Component {
render() {
return(
<div> // Err supposed to be here (line6)
Hello World!
</div>
)
}
}
export default Hello;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component/Hello'
const App = () => {
return (
<div>
Simple Sails-React stater
<Hello/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
.babelrc:
{
"presets": ["#babel/env", "#babel/react"]
}
webpack config file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
entry: './assets/src/index.js'
},
output: {
path: __dirname + '/.tmp/public',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: 'assets/src/index.html'
})
]
};
the structure is like this:
-src
--component
----Hello.jsx
--index.js
--index.html
Could you try change extension to Hello.js or change bable-loader test to
test: /\.(js|jsx)$/,
I am using Webpack, Gulp and React to use a React app in my Jekyll static site.
I am getting an unexpected token error on the React element:
Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
| window.mount = function(id, type) {
| render(
| <App type={type} />,
| document.getElementById(id)
| )
I have tried various methods and babel presets.
webpack.config.js
module.exports = {
entry: {
app: './webpack/app.js'
},
output: {
path: __dirname + '/src/_assets/js',
filename: 'app.js'
},
module: {
rules: [{
// I've tried node_modules/my-app as well
include: __dirname + 'node_modules/my-app/src',
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
// I've tried several variations of this:
presets: ["react", "env", "stage-0", "es2015", { targets: { node: true } }],
}
}
}]
}
};
Pertinent gulp code:
const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');
// I have tried gulp-webpack and gulp ( no webpack ) with the babel-loader
gulp.task('app', function () {
return webpack_stream(webpack_config).pipe(gulp.dest('src/_assets/js/'));
});
Can anyone see anything I am missing, have wrong, or are there some issues with versions/presets?
I have looked through the other similar questions and answers like this and this with no luck.
Edit 1:
If I change the webpack.config.js to use the babel-polyfill and exclude instead of include I can get past the first error, but I still error on a <Provider> element.
**webpack.config**
module.exports = {
entry: './webpack/rfi.js',
output: {
path: __dirname + '/src/_assets/js',
filename: 'rfi.js'
},
module: {
rules: [{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
presets: ["react", "env", "stage-3", "es2015"],
}
}
}]
}
};
**App.js**
class Rfi extends Component {
render() {
return (
<Provider store={store}>
<Form />
</Provider>
);
}
}
**error**
Module parse failed: Unexpected token (36:8)
You may need an appropriate loader to handle this file type.
|
| return (
| <Provider store={store}>
| <Form />
| </Provider>
And yes Provider is imported import { Provider } from 'react-redux';
Edit 2 ( per comment request )
For some reason I'm not getting a good trace in my messages anymore. Here's one from yesterday though.
One of the ways is make use of babel-polyfill , You can install it as a project dependency npm install --save babel-polyfill and inside your webpack.config.js you can pass it to the entry point (You can amend this accordingly):
entry: ["babel-polyfill", "./webpack/app.js"],
Edit 1 Answer :
You need to make sure your store is on the top of hierarchy , like (app.js) (You can amend this accordingly) :
import { render } from "react-dom";
import { Provider } from "react-redux";
render(
<Provider store={store}>
<Form />
</Provider>,
document.getElementById("app") // Ammend this accordignly
);
You can read more about babel Polyfill Here
I am trying to use React, Typescript, Webpack 3 and Bootstrap 4 to create a basic working project. When I import bootstrap.css in main .tsx file I am getting error like Unexpected Symbol - # - in /node_modules/bootstrap/dist/css/bootstrap.css.
Below is my webpack.config.js file :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/app.tsx'
},
output: {
path: path.join(__dirname,'dist'),
filename: '[name].bundle.js'
},
watch:true,
resolve: {
extensions: ['.ts','.tsx','.js']
},
devServer: {
contentBase: path.join(__dirname,'dist'),
port: 3333
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['awesome-typescript-loader']
},
{
test: /.html$/,
use: ['raw-loader']
},
{
test: /\.json$/,
use: ['json-loader']
},
{
test: /\.(s)css$/,
exclude: /node_modules/,
use: ['css-loader','style-loader','sass-loader',{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
},]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
showErrors: true,
title: 'React TS Webpack App'
}),
]
}
And the below App.tsx file:
import 'bootstrap/dist/css/bootstrap.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Greet from './components/Greet';
const techStack = ['React','TypeScript','Webpack','Bootstrap'];
ReactDOM.render(<Greet techs={techStack}/>, document.getElementById('app'));
But I am getting the below error:
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */
| #media print {
| *,
| *::before,
# ./src/app.tsx 1:0-42
# multi (webpack)-dev-server/client?http://localhost:3333 ./src/app.tsx
Could anybody help me how to clear this error and make bootsrap and webpack work?
"Use" style-loader before css-loader...
use: ['style-loader','css-loader','sass-loader',{ ... }..]
I have this error code .
i think this error is caused by webpack.config.js
I have studied many sources but could not get results
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
# ./index.js 21:0-43
# multi (webpack)-dev-server/client?http://localhost:8080 ./index.js
my webpack.config.js .
I have made arrangements here. but again I got an error.
how can i overcome this error
var webpack = require('webpack');
var path = require('path');
var parentDir = path.join(__dirname, '../');
module.exports = {
entry: [
path.join(parentDir, 'index.js')
],
module: {
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},{
test: /\.less$/,
loaders: ["style-loader", "css-loder", "less-loader"]
}
]
},
output: {
path: parentDir + '/dist',
filename: 'bundle.js'
},
devServer: {
contentBase: parentDir,
historyApiFallback: true
}
}
index.js like this.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRoutes from './routes';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<Provider store={store}>
<AppRoutes />
</Provider>,
document.getElementById('app')
)
It looks like you need to add some more configuration to your css-loader.
Currently, you have this for your less files:
{
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"]
}
Like the error message mentions, you need to configure a loader for css files in addition to less. Try this:
{
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"]
}, {
test: /\.css$/,
loaders: ["style-loader", "css-loader"]
}