search

remarkjs / react-markdown

Markdown component for React
https://remarkjs.github.io/react-markdown/
MIT License
12.93k stars 863 forks source link

Uncaught Error: Invalid value `../json/block-elements.json` for setting `options.blocks` #391

Closed angelod1as closed 3 years ago

angelod1as commented 4 years ago

I was trying to solve #216 and got lost in this error. I can't seem to find it's solution anywhere.

Webpack config:

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PATHS = {
    build: path.resolve(__dirname, '../build'),
    src: path.resolve(__dirname, '../src'),
    js: path.resolve(__dirname, '../src/assets/scripts'),
};

module.exports = (env) => {
    console.log('NODE_ENV:', env.NODE_ENV);

    return {
        devServer: {
            port: 3000,
            hot: true,
            inline: true,
            open: true,
            overlay: true,
            host: '0.0.0.0',
        },
        mode: process.env.NODE_ENV || 'development',
        devtool: 'source-map',
        stats: {
            assets: false,
            colors: true,
            version: false,
            hash: true,
            timings: true,
        },
        entry: [
            '@babel/polyfill',
            path.join(PATHS.js, 'main.js'),
        ],
        output: {
            path: path.join(PATHS.build),
            filename: 'js/main.js',
        },
        plugins: [
        // new HelloWorldPlugin({ options: true }),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(),
            new webpack.NoEmitOnErrorsPlugin(),
            new HtmlPlugin({
                template: path.join(PATHS.src, 'templates/pages/index.pug'),
                env: process.env.NODE_ENV,
                baseURL: process.env.npm_package_config_baseURL,
                title: process.env.npm_package_config_name,
                date: process.env.npm_package_config_date,
                section: process.env.npm_package_config_section,
                sectionSlug: process.env.npm_package_config_sectionSlug,
            }),
            new MiniCssExtractPlugin({
                filename: 'css/[name].css',
            }),
            new CopyWebpackPlugin([
                {
                    from: path.join(PATHS.src, 'assets/images'),
                    to: 'images',
                    ignore: '.gitkeep',
                },
                {
                    from: path.join(PATHS.src, 'assets/json'),
                    to: 'json',
                    ignore: '.gitkeep',
                },
                {
                    from: path.join(PATHS.src, '../others/**/*'),
                    to: '[path][name].[ext]',
                    ignore: '.gitkeep',
                },
            ]),
        ],
        module: {
            rules: [
                {
                    test: /\.(json|geojson)$/,
                    loader: 'file-loader',
                    type: 'javascript/auto',
                    options: {
                        name: '../json/[name].[ext]',
                    },
                },
                {
                    enforce: 'pre',
                    test: /\.jsx?$/,
                    use: 'eslint-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: false,
                            plugins: ['react-hot-loader/babel'],
                        },
                    }],
                },
                {
                    test: /\.pug$/,
                    use: ['pug-loader'],
                },
                {
                    test: /\.(css|styl)$/,
                    use: [
                        'css-hot-loader?fileMap=./css/{fileName}',
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: path.resolve(__dirname, 'postcss.config.js'),
                                },
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'stylus-loader',
                            options: { sourceMap: true },
                        },
                    ],
                },
                {
                    test: /\.(png|gif|jpg|jpeg|svg)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '../images/[name].[ext]',
                            },
                        },
                    ],
                },
            ],
        },
        resolve: {
            extensions: ['.js', '.jsx'],
            alias: {
                'react-dom': '@hot-loader/react-dom',
            },
        },
    };
};

Package.json:

{
    "name": "fotas",
    "version": "1.1.0",
    "description": "Boilerplate com webpack e react para o interativo da Folha de S.Paulo",
    "main": "install.js",
    "author": "Pilker <rogerio.pilker@grupofolha.com.br>",
    "license": "MIT",
    "private": true,
    "devDependencies": {
        "@babel/core": "^7.3.4",
        "@babel/polyfill": "^7.2.5",
        "@babel/preset-env": "^7.3.4",
        "@babel/preset-react": "^7.0.0",
        "@hot-loader/react-dom": "16.8.3",
        "babel-loader": "8.0.0-beta.0",
        "clean-webpack-plugin": "^1.0.1",
        "copy-webpack-plugin": "5.0.0",
        "css-hot-loader": "^1.4.3",
        "css-loader": "^2.1.0",
        "css-mqpacker": "^7.0.0",
        "cssnano": "^4.1.10",
        "eslint": "^5.14.1",
        "eslint-config-airbnb": "^17.1.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-loader": "^2.1.2",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-jsx-a11y": "^6.2.1",
        "eslint-plugin-react": "^7.12.4",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^3.0.1",
        "html-webpack-plugin": "^3.2.0",
        "html-webpack-template-pug": "^1.1.1",
        "jsdom": "^13.2.0",
        "mini-css-extract-plugin": "^0.5.0",
        "postcss": "^7.0.14",
        "postcss-import": "^12.0.1",
        "postcss-loader": "^3.0.0",
        "postcss-preset-env": "^6.5.0",
        "prompt": "^1.0.0",
        "pug": "^2.0.3",
        "pug-html-loader": "^1.1.5",
        "pug-loader": "^2.4.0",
        "react-hot-loader": "^4.5.3",
        "react-snap": "^1.23.0",
        "redbox-react": "^1.6.0",
        "static-site-generator-webpack-plugin": "^3.4.2",
        "style-loader": "^0.23.1",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        "webpack": "^4.29.5",
        "webpack-cli": "^3.2.3",
        "webpack-dev-server": "^3.2.1",
        "xmldom": "^0.1.27"
    },
    "scripts": {
        "postinstall": "node install.js",
        "build": "NODE_ENV=production webpack -p --env.NODE_ENV=production --config ./webpack/webpack.config.prod.js",
        "build/clean": "NODE_ENV=production NODE_CLEAN=1 webpack -p --env.NODE_ENV=production --config ./webpack/webpack.config.prod.js",
        "include": "NODE_ENV=production webpack -p --env.NODE_ENV=production --config ./webpack/webpack.config.include.js",
        "serve": "NODE_ENV=development webpack-dev-server --env.NODE_ENV=development --config ./webpack/webpack.config.dev.js",
        "staging": "NODE_ENV=staging webpack --env.NODE_ENV=staging --config ./webpack/webpack.config.staging.js",
        "deploy/staging": "./bin/staging.sh",
        "teste": "./bin/teste.sh",
        "deploy/production": "./bin/production.sh",
        "postbuild": "react-snap"
    },
    "dependencies": {
        "babel-plugin-styled-components": "^1.10.6",
        "jsonp": "^0.2.1",
        "mapbox-gl": "^1.7.0",
        "prop-types": "^15.7.2",
        "react": "^16.8.3",
        "react-dom": "npm:@hot-loader/react-dom",
        "react-map-gl": "^5.2.1",
        "react-markdown": "^4.3.1",
        "react-router-dom": "^5.1.2",
        "styled-components": "^5.0.0",
        "uuid": "^3.4.0"
    },
    "config": {
        "section": "Poder",
        "sectionSlug": "poder",
        "name": "Fotas",
        "date": "12/05/2018",
        "baseURL": "poder/2018/05/12/fotas/"
    },
    "reactSnap": {
        "fixWebpackChunksIssue": false
    }
}

I'm simply trying to <ReactMarkdown source="# Hello" />

Any known solution to this error?

ChristianMurphy commented 3 years ago

see resolution from linked issue https://github.com/remarkjs/react-markdown/issues/216#issuecomment-431293280