Webpack loaders needed

The documentation doesn't make this clear, but in order to use the <JsonEditor> component, you need to first:

npm install --save-dev url-loader style-loader css-loader

Then add to your webpack.config.js:

    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.svg$/,
                use: ['url-loader']
            }
        ]
    }

You probably need the Babel loader too, but since most people using React have that anyway, it's less essential to point out.

I think it would be helpful if this were explained in the README.

You are right. I will label this as "help wanted". PRs wellcome 👍

Hmm, except my understanding was that modules published on npm were supposed to be pre-compiled, ie having only simple (ES5) source files as their main entrypoint. Which is why it's not normally needed to require users to edit their webpack config.

Is there any reason why this can't be pre-compiled?

You are correct @TMiguelT with a caveat. NPM packages will normally come with multiple compilations of the code. CommonJS, AMD, UMD, ES Modules, etc... It looks like this library is getting compiled to both UMD and ES Modules, but currently only marking the ES Module for consumption in package.json. In many libraries, you will see the main set to the UMD version and the module set to the ES Module, here both are set to es. If you want to use the compiled and minified version, you should pull in the /dist/jsoneditor-react.min.js file.

However, looking at the Webpack loaders you are adding, those are for CSS and SVG. The JS being ES6 or ES5, or whatever should have no effect on needing those loaders.

The CSS and SVG loaders are required here, because this module directly imports CSS from JavaScript, which is obviously not going to work without a loader:

jsoneditor-react/src/Editor.jsx

Lines 4 to 5 in 0d805ce

    
           import 'jsoneditor/dist/jsoneditor.css'; 
        
           import './fixAce.css';

added info in readme

@vankop

@vankop @multimeric I use tsup, is there any alterative for that ?
I tried the following, but no luck.

export default defineConfig({
  esbuildPlugins: [cssModulesPlugin(), svgrPlugin({ exportType: 'named' })],
  entry: {
    index: 'src/index.ts',
    vectors: 'src/assets/vectors/index.ts'
  },
  sourcemap: true,
  clean: true,
  outDir: 'dist',
  bundle: true,
  splitting: true,
  dts: true,
  target: 'es6',
  platform: 'browser',
  format: 'cjs',
  loader: {
    '.css': 'css'     <------------
  }
});

Navigation Menu

Repository navigation

Webpack loaders needed #16

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

	import 'jsoneditor/dist/jsoneditor.css';
	import './fixAce.css';

Webpack loaders needed #16

Description

Activity

vankop commented on Sep 25, 2019

multimeric commented on Oct 3, 2019

TreTuna commented on Nov 27, 2019

multimeric commented on Nov 27, 2019

vankop commented on Dec 28, 2019

kushagra010 commented on Jan 12, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions