Webpack error for 3rd party react module (effector) - javascript

EDIT: I gave up with my own Webpack setup and just used react-scripts and now it compiles just fine. So must have been my Webpack/Babel setup, though still can't find out what
I'm trying to play around with the module effector, which has a React binding effector-react. I copy pasted a basic (working) code sandbox example, but I'm getting a webpack error which makes me think my build configuration isn't right.
My simple component is as follows:
import React from "react";
import { useStore } from "effector-react";
import { s_counter } from "stores/counter";
function Count () {
const counter = useStore(s_counter);
return ( <div>{counter}</div> );
};
export default Count;
and my effector counter store is as follows:
import { createStore, createEvent } from "effector";
// Store
const s_counter = createStore(0);
export { s_counter };
I think the issue is with my Webpack/Babel config, which are as follows:
webpack.config.js
const path = require("path");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/src/dist',
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
alias: {
components: path.resolve(__dirname, 'src/components/'),
stores: path.resolve(__dirname, 'src/stores/'),
},
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
I'm using webpack 4, and when I build by just running webpack my app doesn't load and I get the console error:
effector.es.js:35 Uncaught SyntaxError: Invalid or unexpected token
at Object../node_modules/effector/effector.es.js (bundle.js:109)
at __webpack_require__ (bundle.js:20)
at eval (effector-react.es.js:13)
at Module../node_modules/effector-react/effector-react.es.js (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at eval (Count.jsx:4)
at Module../src/components/Count.jsx (bundle.js:311)
at __webpack_require__ (bundle.js:20)
at eval (App.jsx:4)
at Module../src/components/App.jsx (bundle.js:299)
The actual error is caused by importing things from effector-react, specifically this line:
import { useStore } from "effector-react";
doesn't matter what module I import from effector-react, I get that console error. Any ideas for what's going wrong are welcome.
EDIT: same kind of problem if importing from effector itself too

Tested on npm#6.4.1, webpack4.30.0 & node#10.13.0
Try this,
Did you download effector separately as a npm dependency.
I believe you are not able to resolve this module specifically.
I tried using the same modules using.
npm install effector
npm install effector-react
Adding the above two dependencies. It works fine.
Adding a sample of my module property from webpack
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}]
}
Hope this helps.

Related

Webpack Can't resolve other modules while building in my boilerplate project

I've created boilder plate project with webpack, react, typescript etc. but whenever I build my project, webpack throw this errors on my entry point that Cannot resolve other modules (which is just simple Login component)
This is my webpack's error message
ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Login' in '/Users/myname/Desktop/Projects/front/src'
# ./src/index.tsx 6:14-43
This is my index.tsx file
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Login from './components/Login';
ReactDOM.render(
<BrowserRouter>
<Login />
</BrowserRouter>,
document.getElementById('root')
);
And this is my Login components, which webpack cannot resolve
import * as React from 'react';
export default () => <div>Login</div>;
This is my webpack config and package.json's scripts
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
useCache: true,
reportFiles: ['src/**/*.{ts,tsx}']
}
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
})
],
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/'),
filename: 'bundle.[hash].js'
},
plugins: [new CleanWebpackPlugin()]
};
package.json's scripts
"scripts": {
"build": "webpack"
},
I tried minimize my project as possible so you can focus on this single problem, why the hack my webpack cannot resolve ordinary component file? you can find this minimized project on https://github.com/sh2045/myproblem
you can just clone it, and run
npm i
npm run build
and you can see error message, please help :(
Instead of using awesome-typescript-loader why don't you try the loader's recommended by webpack for typescript
To fix your problem,
Install this node package npm install --save-dev typescript ts-loader. This is the loader that does ts to js conversion.
You need to remove awesome-typescript-loader and use ts-loader in webpack.config.js. Below is the updated webpack.config.js. You can use this configuration and execute npm run build and verify if your webpack bundles the project without errors
Modified webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
})
],
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/'),
filename: 'bundle.[hash].js'
},
plugins: [new CleanWebpackPlugin()]
};
Note When i downloaded & setup your project from your git, this package npm i acorn --save was missing in your package.json i believe. so i had to install it manually

Webpack, React.js - require not defined error in browser console

I'm trying to build a web app with a React.js front-end, Express handling the back-end and Webpack bundling the whole thing. I'm trying to move away from my habitual way of doing things which is creating separate webpack.config files for the server and client. I'm also trying to add a minifier (Babili).
Here is my webpack.config file. Note how I used object.assign to create different objects for my client and server files and how I export them at the very end. I doubt this is where the problem lies.
const BabiliPlugin = require('babili-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const srcPath = path.resolve(__dirname + '/src');
const distPath = path.resolve(__dirname + '/dist');
// Common entries for all configs
var common = Object.assign({}, {
context: srcPath,
resolve: {
modules: ['node_modules', 'src'],
extensions: ['*']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new BabiliPlugin()
],
externals: nodeExternals()
});
// Server.js config
// Output to dist/client/
var serverConfig = Object.assign({}, common, {
entry: './server/index.js',
output: {
path: distPath,
filename: 'server.min.js'
},
target: 'node',
node: {
__dirname: false,
__filename: false
}
});
// Client.js config
// Output to /dist/
var clientConfig = Object.assign({}, common, {
entry: "./client/index.js",
output: {
path: distPath,
filename: './client/client.min.js',
publicPath: '/'
},
target: 'web',
devtool: 'source-map'
});
// Export configurations array
module.exports = [serverConfig, clientConfig]
Here is my client.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router-dom';
import Home from './routes/Home.js';
ReactDOM.render((
<div>
<p> why is this not working </p>
</div>
), document.getElementById('app'));
The error I get in the browser console is the following :
Uncaught ReferenceError: require is not defined
at Object.<anonymous> (client.min.js:1)
at b (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at b (client.min.js:1)
at client.min.js:1
at client.min.js:1
I don't understand why it wouldn't work. The server.js file works fine since I can see the index.html file is served to the browser. My usual webpack.config files are the exact same except for the Babili minifier, which when removed does not solve the issue. I'm hoping you guys can help me out with this. Thank you in advance!
Edit: I'd like to add the fact I did not have the nodeExternals() part in my previous client config. However, when I don't include it, I get the following error:
Uncaught Error: Cannot find module "object-assign"
at client.min.js:8
at client.min.js:8
at Object.<anonymous> (client.min.js:8)
at Object.<anonymous> (client.min.js:8)
at t (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at t (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at t (client.min.js:1)
externals: nodeExternals () tells Webpack to load all modules using require. This is useful for the server but throws this error in the browser (because require is only natively present on Node.js).
To fix it simply move the externals field to the server config :
// Common entries for all configs
var common = Object.assign({}, {
context: srcPath,
resolve: {
modules: ['node_modules', 'src'],
extensions: ['*']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new BabiliPlugin()
]
});
// Server.js config
// Output to dist/client/
var serverConfig = Object.assign({}, common, {
entry: './server/index.js',
output: {
path: distPath,
filename: 'server.min.js'
},
target: 'node',
node: {
__dirname: false,
__filename: false
},
externals: nodeExternals()
});

Web-pack only transpiling the entry point js file but not the rest

Hey guys I'm setting my development server and I would like webpack to search through each .js file and transpiled them using babel. As is currently set up, my bundle.js only includes the content of my entry point but not other js file in the project directory. any tips ?
this is my webpack config
module.exports = {
entry: './app/src/index.js',
output:{
path: __dirname,
publicPath:'/',
filename: 'bundle.js'
},
devServer:{
inline: true,
contentBase:'./',
port: 61116
},
module: {
loaders: [
{
test: /\.js$/,
exclude:/(node_modules)/,
loader: 'babel-loader',
query: {
presets: ["es2015", "react", "stage-1"]
}
},
{
test: /\.css$/,
loader:"style-loader!css-loader"
},
{
test: /\.html$/,
loader:"html-loader"
}
]
}
}
and this is my folder structure
Entry Point index.js
import React from 'react' ;
import ReactDOM from 'react-dom';
console.log("This ran");
const App = () =>{
return (<p>This is a new app</p>);
}
ReactDOM.render(<App />, document.querySelector(".react-container"));
Any idea where I'm going wrong ?
As IsenrichO implies in the comments, you don't seem to be including "index.js" from your components folder. Any file that is not first imported by the entry point, or any file the entry point imports, and so on, will not be transpiled.
Try import IndexComponent from "./components/index";, or whatever the name of your index component class is.

Webpack 2 Module not found: Error: Cannot resolve module

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.

React + Grails image loading

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';

Categories

Resources