I've been playing with https://www.npmjs.com/package/react-calendar-timeline and I have an issue.
If I want to overload the timeline class, I simply do
import React from 'react'
import Timeline from 'react-calendar-timeline';
export class MyTimeline extends Timeline {
//Here I can override methods
}
export default MyTimeline;
This compiles, and works correctly.
However, if I want to make the import statement:
import Timeline from 'react-calendar-timeline/src/lib/Timeline';
(I will eventually also have to update the .../lib/Item/item.js file and therefore need to inherit timeline.js, and /lib/items/items.js to make sure that we load my overridden item.js file instead of that branch's file).
I get loader issues, and don't really understand why.
Module parse failed: PATH\node_modules\react-calendar-timeline\src\lib\Timeline.js Unexpected token (36:19)
You may need an appropriate loader to handle this file type.
|
| export default class ReactCalendarTimeline extends Component {
| static propTypes = {
I don't understand this error because if I take everything from the react-calendar-timeline/src/lib directory inside of node_modules, and put it directly into my project, I can now inherit from the Timeline.js file (I know physically moving the directory out of node modules and into my project is bad practice).
So why is webpack able to compile the same code when it is in my actual project directory instead of node_modules?
My current webpack.config
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-class-properties']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader' },
]
You need to allow babel to transform class properties using the babel-plugin-transform-class-properties plugin. Link: https://babeljs.io/docs/plugins/transform-class-properties/
Related
I'm trying to set up a basic SSR react app, using typescript for the frontend and js for the server.
The main App component is a .tsx file.
But I am facing the following error:
Error: Cannot find module '../src/App'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
In my renderSSR.js file I:
import App from "../src/App";
(this should be importing ../src/App.tsx)
If I change the server side to be all .ts files and use ts-node everything works. But I do not wish to do this.
Some relevant parts of my webpack file:
config.resolve = {
extensions: [".tsx", ".ts", ".js", ".jsx"]
};
config.module = {
rules: [
// Babel
{
test: /\.(js|jsx)$/,
include: resolvePath("../src"),
loader: "babel-loader",
options: {
cacheDirectory: IS_DEV,
compact: IS_PROD
}
},
// TS
{
test: /\.ts(x?)$/,
loader: "ts-loader",
exclude: /node_modules/
},
Update: I can get past this import problem by changing the import statement to:
import App from "../src/App.tsx";
However this then results in the following error in the newly imported App.tsx file:
{ import * as React from "react";
^ SyntaxError: Unexpected token *
In typescript that how you import React.
I have a standard React funtional component which exports a SVG as so;
SomeSVG.js
import React from 'react';
const SomeSVG = props => (
<svg width={24} height={24} {...props}>...</svg>
)
export default SomeSVG;
When using this in Create React App, works fine. Nice inlined SVG where it was expected to be.
Now I'm trying to use this in another project, with a custom webpack setup. But I get the error;
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
|
| const SomeSVG = props => (
> <svg width={24} height={24} {...props}>
I imagine I need to have a webpack loader than can support these, my existing webpack settings for JS/JSX/SVG
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader?cacheDirectory=true',
'eslint-loader'
]
},
{
test: /\.svg$/,
loader: 'file-loader',
options: {
name: 'assets_seller/[name].[ext]'
}
},
(I don't think the SVG part is revelant but I'll include it for completeness)
I've tried react-svg-loader as a loader as well with and without options;
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader?cacheDirectory=true',
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
},
'eslint-loader'
]
},
But that errors as well
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.
My .babelrc config
{
"presets": [
[
"#babel/preset-env", {
"modules": false
}
],
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-modules-commonjs",
"transform-async-to-generator",
"syntax-dynamic-import",
"universal-import",
"#babel/plugin-transform-exponentiation-operator"
]
}
Any ideas would be greatly appriciated.
EDIT: I upgraded Webpack and it's plugins to the latest versions beforehand.
This issue is not related with how babel/webpack handles the SVG but, it's because the (Expo?) webpack config it's not transforming the JSX from the react-svg-main package because of configuration settings (webpack.config.js).
Furthermore, when you add it to the list, the compile process finishes, but the components are not there in runtime because the dependency isn't included and it will never work in this environment (Attempted import error: 'SvgXml' is not exported from react-native-svg).
I will try to update this response & send a pull request to the affected project.
I think I can get this working if I make some changes in the react-svg-main project...
In my case, this is a problem while trying to run an Expo project with web/browser.
I am using webpack with my reactjs and I do have the sass loader setup but I am wondering if I am importing the file the right way(It works but I am just wondering if it best practice to do it this way)
import hamburger from "../../node_modules/hamburgers/dist/hamburgers.css";
import bulma from "../../node_modules/bulma/bulma";
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
Edit
When I try to import a sass file in I get an error
import "../../node_modules/bulma/bulma";
import "../../node_modules/bulma-steps-component/bulma-steps";
they both have an extension of .sass
Error: Can't resolve '../../node_modules/bulma-steps-component/bulma-steps'
Do I need another check for this?
Edit 2
I tried adding this check in
test: /(\.css|\.scss|\.sass)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
and did this (I needed the .sass extension to make it work)
import "../../node_modules/bulma/bulma.sass";
import "../../node_modules/bulma-steps-component/bulma-steps.sass";
But now I get
ERROR in ./node_modules/bulma-steps-component/bulma-steps.sass (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/bulma-steps-component/bulma-steps.sass)
Module build failed:
$steps-default-color: $grey-lighter !default
$steps-completed-color: $primary !default
$steps-active-color: $primary !default
$steps-horizontal-min-width: 10em !default
$steps-vertical-min-height: 4em !default
$steps-marker-size: 2 !default
$steps-divider-size: .4em !default
$steps-gap-size: .3rem !default
$steps-hollow-border-size: .3em !default
$steps-thin-divider-size: 1px !default
$steps-thin-marker-size: .8em !default
It keeps going(almost seems like it is showing me all the code in the file) but the error seems to be Undefined variable: "$grey-lighter".
I got same issue when i started with react-js but then i found this boilerplate. this is having best setup of react with redux and router.
check this out: https://github.com/coryhouse/react-slingshot
if you don't want to use this then you can refer this for your problem.
The webpack error saying it can't resolve your CSS file means the path you have specified is not correct. I'd import the file with the extension when you are importing sass or css, just like in your initial example where the css works. That will also help anyone else touching your code to know that what you are importing is not another module, but styles.
I am using select2 library in my react app to add some drop downs. When i am importing the css file it gives a error saying "you may need a appropriate loader to handle this file type".
so how can fix this error. In my project i am using SCSS to style my components.
picture of the error
My loader in webpack.config.js is like this
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
You can add another loader right before your scss loader
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!scss-loader'
},
How can use CSS modules in production and load standard css file in production?
I am configuring an new application with React using webpack
In development I use CSS modules using webpack loaders :
into my .jsx file I import the style file:
import style from './stile.scss';
export class App extends React.Component {
render() {
return (
<div>
<div>
<span className={style.title}>Ciao</span>
</div>
</div>
)
}
}
then I use the following webpack configuration for loaders for my stylesheets:
loaders: [
{
test: /\.(scss|css)$/,
loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap'
}
]
this way everything works (the style is included in the .js file and classes properly hased)
but in production? I should leave the browser render all the classes included in the webpack bundle.js output file?
I would rather create a css file with webpack (and ExtracttextPlugin) with all my style:
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('css-loader' )
}
and link the .css produced in my index.html
Problem is that now all my classes definitions into the React components are no longer rendered in the browser.
How should I solve this?
You can't just switch from using CSS modules to not using them, that doesn't work out as your code depends on it. Also there is no reason not to use CSS modules in production as well. What you want to change is not the CSS modules, but the way you include the CSS. Instead of having it in your JavaScript bundle you can extract them with extract-text-webpack-plugin into a separate .css file, but you still need to use the same configuration for the loaders.
webpack 1
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap')
}
The first argument style-loader is only used as a fallback if the CSS can't be extracted.
webpack 2
The arguments to ExtractTextPlugin.extract changed and for readability using options instead of an inline query in the string.
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoaders: 1,
localIdentName: '[name]-[local]___[hash:base64:5]'
}
},
{ loader: 'sass-loader', options: { sourceMap: true } }
]
})
}