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.
Related
I'm completely new to Tailwind, React, and Webpack. I've been trying to get them to work together, but I'm having trouble parsing the main CSS file that has the Tailwind directives.
On execution of my script, I'm getting this error:
ERROR in ./static/index.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
I've tried finagling with css-loader, postcss-loader, etc. to no avail.
"App.js"
import React from "react"
function App() {
return <div className="bg-slate-900 h-screen">Hello, Tailwind!</div>
}
export default App
"index.js"
import React from 'react';
import ReactDOM from 'react-dom'
import App from "./js/App"
import "./index.css"
ReactDOM.render(
<App />,
document.getElementById('root')
);
"webpack.config.js"
const path = require('path');
module.exports = {
entry: './static/index.js', // path to our input file
output: {
filename: 'index-bundle.js', // output bundle file name
path: path.resolve(__dirname, './static'), // path to our Django static directory
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, './static'),
exclude: /node_modules/,
loader: "babel-loader",
options: { presets: ["#babel/preset-env", "#babel/preset-react"] }
},
{
test: /\.css$/i,
include: path.resolve(__dirname, './static'),
use: ['style-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ["postcss-preset-env",],
},
},
},
],
},
]
},
devServer: {
static: 'dist',
watchContentBase: true,
},
};
I not sure of the answer but I think that you could either read through the set up process and see if you missed something or you could just re do it :)
https://tailwindcss.com/docs/guides/create-react-app
I'm loading icons on my app.js
import bg from './icons/bg.png';
import br from './icons/br.png';
import rg from './icons/rg.png';
import ig from './icons/invert.png';
import bw from './icons/bw.png';
import by from './icons/by.png';
import gm from './icons/gm.png';
import rs from './icons/rs.png';
They work fine when i run the default react start script, but when i try to compile using this webpack:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/js/index.js',
devtool: 'inline-source-map',
target: 'electron-renderer',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [[
'#babel/preset-env', {
targets: {
esmodules: true
}
}],
'#babel/preset-react']
}
}
},
{
test: [/\.s[ac]ss$/i, /\.css$/i],
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
}
]
},
resolve: {
extensions: ['.js'],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'build', 'js'),
},
};
I get this errors for each image:
ERROR in ./src/js/icons/bg.png 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
(Source code omitted for this binary file)
# ./src/js/App.js 2:0-32 230:9-11
# ./src/js/index.js 4:0-24 5:107-110
Which provably means that babel is trying to load the image as a javascript file, is there a way to load a image on React when compiling it with Babel?
As mentioned in webpack docs
Out of the box, webpack only understands JavaScript and JSON files.
So you need to use loader for png file as webpack don't know what to do with that file.
file-loader
More on Loaders
I'm trying to add sound effects to my UI but it keeps telling me that it
Module not found: Error: Can't resolve 'file-loader'
I have a .mp3 file in this directory structure src/core/sounds/click.mp3 and in my login.tsx
file I'm importing it
import soundPack from '../../../core/sounds/soundpack.mp3';
My in my WebPack file I have the following
{
test: /\.(mp3)/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'core/sounds'
}
}
]
}
You have not installed file-loader
please see file-loader npm package
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'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/