I make some tests to handle files located outside the webpack folder.
I have three simple files:
/*entry.js*/
import style from "./style.css";
import string from "./content.js";
console.log(string);
/*style.css*/
body {
background: beige;
}
/*content.js*/
export default string = "It works from content.js.";
I use ES6 syntax so I have a .babelrc like this:
{
"presets": [
"react",
"es2015"
]
}
Here is my webpack.config.js:
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './../outsidefolder/client/wptest/entry.js',
//entry: './entry.js',
debug:true,
devtool:'source-map',
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
loaders: ['babel']
},{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
plugins: [
new ExtractTextPlugin("app.css",{
allChunks: true
})
]
};
And my package.json
{
"private": true,
"devDependencies": {
"babel": "^6.3.26",
"babel-core": ">=5.8.29",
"babel-loader": ">=5.3.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"browser-sync": "^2.9.11",
"css-loader": "^0.21.0",
"extract-text-webpack-plugin": "^0.8.2",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2",
"webpack-dev-middleware": "^1.2.0",
"webpack-dev-server": "^1.12.1",
"webpack-hot-middleware": "^2.4.1",
"write-file-webpack-plugin": "^1.0.0"
}
}
When my entry is entry: './entry.js' all works well.
But when my entry point to an outside folder entry: './../outsidefolder/client/wptest/entry.js',
all goes wrong and I have this error:
ERROR in ../oustsidefolder/client/wptest/entry.js
Module parse failed: /Users/vikti/dev/webpacktut/node_modules/babel-loader/index.js!/Users/vikti/dev/oustsidefolder/client/wptest/entry.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import style from "./style.css";
| import string from "./content.js";
|
Is is possible to handle files with webpack outside the root folder?
Use path.join() and dirname to create an absolute path to the entry file.
webpack.config.js
var path = require('path');
//...
entry: path.join(__dirname, './../outsidefolder/client/wptest/entry.js'),
//...
Related
I'm trying to use Tailwind v2 into an old project that uses .tpl files. Not an issue as we're migrating to the world of SPAs. What I'm doing should work regardless.
I'm using the following (literally taken from my package.json):
"autoprefixer": "^10.2.5",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"mini-css-extract-plugin": "^1.5.0",
"extract-text-webpack-plugin": "^3.0.2",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"webpack-merge": "^5.7.3"
"postcss": "^8.2.12",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"tailwindcss": "^2.1.1",
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
webpack-merge is solely used to distinguish file names for production and development.
Here's an exact copy of my webpack.config.js:
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const { SRC, DIST, ASSETS } = require('./paths')
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'styles.css',
chunkFilename: '[id].css',
}),
new ExtractTextPlugin('styles.css', {
disable: process.env.NODE_ENV === 'development',
}),
],
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.s[ac]ss$/i,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}, {
loader: "postcss-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
],
},
entry: {
scripts: path.resolve(SRC, 'js', 'index.js')
},
output: {
// Put all the bundled stuff in your dist folder
path: DIST,
// Our single entry point from above will be named "scripts.js"
filename: '[name].js',
// The output path as seen from the domain we're visiting in the browser
publicPath: ASSETS
},
}
After running the build command, I get:
TypeError: compiler.plugin is not a function
Removing new ExtractTextPlugin from the plugin, the error is gone but another error comes up stating it's needed. I've also looked at Tailwinds' example but not having any luck. I've also looked at the ExtractTextWebpackPlugin docs but.... no luck, same error.
This project uses *.scss, *.css, *.js, *.tpl, *.php
Appreciate the help or pointers.
Thanks.
This plugin has been DEPRECATED.
Please use: https://github.com/webpack-contrib/mini-css-extract-plugin
I am learning to use webpack to develop a react project, but I cannot start local services locally. It reports the following error.
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
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
| import App from './App';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
I suspect this is a babel compilation problem, but I have configured babel-loader, but it does not work. I Googled this issue for a long time, but I still didn't find the problem. Can you help me? Thanks!
And this is my configuration files.
// webpack.common.js
const path = require('path');
const commonConfig = {
entry: [
'babel-polyfill',
'../src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'dist/index.html')
})
],
module: {
rules: [{
test: /\.(jsx?|tsx?)$/,
loader: 'babel-loader',
exclude: /node_modules/,
}]
}
};
module.exports = commonConfig;
// webpack.dev.js
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const path = require('path');
const devConfig = merge(commonConfig, {
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000
}
})
module.exports = devConfig;
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
},
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
// .babelrc
{
"presets": ["env", "react"]
}
I found out where the problem was. I didn’t specify the webpack.dev.js file for the npm run start command in the scripts of package.json, and it worked after making the following changes.
"scripts": {
"start": "webpack-dev-server --config webpack/webpack.dev.js",
},
I stumbled upon an error while using babel-relay-plugin.
When I require babel-relay-plugin module and export the output with my graphql schema and call it in my webpack list of babel plugins as a path works.
// webpack/plugins/babel-relay-plugin.js
var babelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../../cloud/data/schema.json');
module.exports = babelRelayPlugin(schema.data);
// webpack/pro.config.js
module.exports = [
{
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
'./webpack/plugins/babel-relay-plugin'
]
}
}
]
}
}
]
But when I create the plugin in the same file as this:
// webpack/pro.config.js
var BabelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../cloud/data/schema.json').data;
module.exports = [
{
name: 'server',
target: 'node',
devtool: 'cheap-module-source-map',
entry: cloudPath,
output: {
path: buildPath,
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
new BabelRelayPlugin(schema)
]
}
}
]
}
}
]
It throws this error stack:
ERROR in ./cloud/index.js
Module build failed: TypeError: Cannot read property '__esModule' of null
at Function.normalisePlugin (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:156:20)
at /Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:197:30
at Array.map (native)
at Function.normalisePlugins (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
at OptionManager.mergeOptions (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
at OptionManager.init (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
at File.initOptions (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/AJ/Desktop/winebox/app/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/AJ/Desktop/winebox/app/node_modules/babel-loader/index.js:88:12)
Any pointers as to how fix this inside the same file would be awesome. Thanks in advance.
All my packages are up-to-date an I already asked and it's not a Relay-side problem.
I faced the same issue that was faced by OP, the solution provided by #steveluscher raised TypeError: Cannot read property 'Plugin' of undefined.
There is a plugin babel-plugin-react-relay that solves this problem. It can take a json file, URL or graphql-js schema.
It relies on babel-relay-plugin so that you do not have to create your own plugin.
Usage is simple:
npm install --dev babel-plugin-react-relay
In your .babelrc file, add:
"plugins": [
"react-relay"
],
In package.json, add the path to your schema:
"react-relay-schema": "./data/schema.json"
And if you're using webpack, specify the plugin under babel-loader for your loaders:
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.join(__dirname, 'src')
],
query: {
plugins: ['react-relay'],
presets: ['react', 'es2015']
}
}
require('babel-relay-plugin') returns a function that you can use to get a plugin given a schema. I think the usage that you're looking for is:
// webpack/pro.config.js
var babelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../cloud/data/schema.json').data;
module.exports = [
{
/* ... */
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
new (babelRelayPlugin(schema))()
]
}
}
]
}
}
]
The inner expression returns a plugin, while the outer expression creates an instance of that plugin using the new keyword.
For those who stumble into this and are getting this error:
/app/client/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:53
var Plugin = _ref.Plugin;
^
TypeError: Cannot read property 'Plugin' of undefined
at new <anonymous> (/app/client/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:53:22)
Here is how the config I used to fix it:
at the root of my client app: babelRelayPlugin.js
const getBabelRelayPlugin = require('babel-relay-plugin');
// Make sure the path is correct here
const schemaData = require('../data/schema.json');
module.exports = getBabelRelayPlugin(schemaData.data);
Then in my .babelrc
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["./babelRelayPlugin"]
}
Here are my dependencies in my package.json
"dependencies": {
"babel-preset-stage-0": "^6.24.1",
"babel-relay-plugin": "0.10.0",
"node-sass": "^4.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-relay": "0.10.0",
"sass-loader": "^6.0.2",
"semantic-ui-css": "^2.2.10",
"semantic-ui-react": "^0.68.3"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "6.22.0",
"babel-preset-react": "^6.23.0",
"babel-runtime": "^6.22.0",
"css-loader": "0.26.1",
"extract-text-webpack-plugin": "^v2.0.0-rc.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.26.0",
"postcss-loader": "^1.2.2",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-cleanup-plugin": "^0.4.2",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.4.1"
}
I believe the babel stage-0 preset is required as it is present in all configs that work but I can't say for sure
I'm currently working on a react webpack babel etc site and trying to build the first time. The build is successful, but when I open up the browser I get the following error:
Uncaught Error: Cannot find module "/Users/michael.nakayama/Documents/Development/jamsesh/node_modules/webpack/node_modules/node-libs-browser/node_modules/process/browser.js"
This module exists. Going to that actual url in my browser shows the file in question. But I cannot figure out why webpack cannot find it. I don't know if this is a babel6 issue or a webpack issue, or neither. My config file looks like this:
var webpack = require('webpack');
var cleanWebpack = require('clean-webpack-plugin');
var ignore = new webpack.IgnorePlugin(new RegExp("/(node_modules|ckeditor)/"))
module.exports = {
devtool: 'inline-source-map',
entry: './lib/client/entry',
output: {
path: __dirname + '/public/js',
filename: 'app.js',
publicPath: 'http://localhost:8081/js/',
},
plugins: [
ignore,
],
resolve: {
extensions: ['', '.js'],
moduleDirectories: ['./node_modules']
},
module: {
loaders: [
{
test: /\.js?$/,
loaders: ['babel-loader?presets[]=react,presets[]=es2015,plugins[]=transform-es2015-classes,plugins[]=transform-react-jsx'],
exclude: /(node_modules)/,
}
]
}
}
and my webpack server file is as follows:
var WebpackDevServer = require('webpack-dev-server');
var webpack = require('webpack');
var config = require('../../webpack.config');
var server = new WebpackDevServer(webpack(config), {
// webpack-dev-server options
publicPath: config.output.publicPath,
stats: { colors: true },
});
server.listen(8081, 'localhost', function() {});
and here are the packages I have installed:
"devDependencies": {
"babel-cli": "^6.3.17",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-syntax-jsx": "^6.3.13",
"babel-plugin-transform-es2015-classes": "^6.4.0",
"babel-plugin-transform-react-jsx": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"body-parser": "^1.14.2",
"clean-webpack-plugin": "^0.1.5",
"express": "^4.13.3",
"history": "^1.17.0",
"jade": "^1.11.0",
"nodemon": "^1.8.1",
"path": "^0.12.7",
"pg": "^4.4.3",
"react": "^0.14.6",
"react-dom": "^0.14.3",
"react-hot-loader": "^1.3.0",
"react-router": "^1.0.3",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
entry.js:
var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var routes = require('../routes');
// -v x.13.x
/**Router.run(routes, Router.HistoryLocation, function (Handler, state) {
React.render(<Handler/>, document.getElementById('react-app'));
});**/
var node = document.getElementById('react-app');
// -v 1.0.0
ReactDOM.render(<Router history={createBrowserHistory()} routes={routes}/> , node);
Also as a heads up, I have tried uninstalling and reinstalling all my packages. I have tried installing specifically the node-libs-browser modules. thanks.
The problem with ignore plugin on node_modules. In webpack.config.js, you have:
var ignore = new webpack.IgnorePlugin(new RegExp("/(node_modules|ckeditor)/"))
...
plugins: [
ignore,
],
From Ignore Plugin documentation:
Don’t generate modules for requests matching the provided RegExp.
Webpack tries to require module with the name node_modules/process/browser for React module and fails with it because it is ignored.
Try to remove node_modules from Ignore Plugin or write less global condition if you really need this.
Importing nodeExternals worked for me.
import nodeExternals from 'webpack-node-externals';
this is my server.webpack.config:
import path from 'path';
import nodeExternals from 'webpack-node-externals'; // changes
const CONTEXT = path.join( __dirname, "../.." ),
INPUT_SERVER_DIR = path.join( CONTEXT, "server" ),
OUTPUT_SERVER_DIR = path.join( CONTEXT, "dist/server" );
export default [
{
name: 'server',
target: 'node',
context: INPUT_SERVER_DIR,
node: {
__dirname: false
},
entry: './server',
devtool : 'source-map',
output: {
path: OUTPUT_SERVER_DIR,
filename: "server.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
resolve: {
extensions: ['.js']
},
**externals : [ nodeExternals() ]**
}
];
I have been using react since a while now and wanted to try it with webpack.
Here is my webpack.config.js :
var path = require('path');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
resolve: {
extensions: ['', 'js', 'jsx']
}
}
The error that occurs is as follows :
ERROR in ./~/react/react.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/React in /Users/username/path/to/app/node_modules/react
# ./~/react/react.js 3:17-39
This error is occurring when I am importing react into my file by using either var React = require('react') or import React from 'react';
I have the required preset packages for babel installed :
"devDependencies": {
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"webpack": "^1.12.10",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"highcharts-release": "^4.2.1",
"immutable": "^3.7.6",
"react": "^0.14.5",
"react-highcharts": "^6.0.0",
"react-redux": "^4.0.6",
"redux": "^3.0.5"
}
Thanks!
Based on your pastebin example, you can see that webpack is looking for React, Reactjs, or Reactjsx, not React.js:
/Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/React doesn't exist
/Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/Reactjs doesn't exist
/Users/bIgB/Private/Code/go-projects/src/github.com/bIgBV/cereberus/app/node_modules/react/lib/Reactjsx doesn't exist
To fix this, simply add a . to the front of your extensions, like so:
resolve: {
extensions: ['', '.js', '.jsx']
}
https://webpack.github.io/docs/configuration.html#resolve-extensions